I want to hide the + icon in the far left column and add another icon.
When the user clicks the new Icon I want to programatically expand that specific row.
I see there is gridApi.expandable.expandAllRows();
Is there a way to expand just one row?
You can use toggleRowExpansion function, add this attribute to the desired element which will be trigger this toggle:
ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"
If all you want is to change the default plus icon to a different icon, you can simply override the template for the expandableRowHeader.
$templateCache.put('ui-grid/expandableRowHeader',
"<div class=\"ui-grid-row-header-cell ui-grid-expandable-buttons-cell\"><div class=\"ui-grid-cell-contents\"><i ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\" ng-click=\"grid.api.expandable.toggleRowExpansion(row.entity)\"></i></div></div>"
);
You can change the ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\" and change them to a different icon of your choice.
Related
I want to add a dropdown button which usually works as an expand / collapse button in a treegrid. I can't seem to find in the documentation how to add a button which is the exact width and height of the dropdown button, e.g. the specific (custom) button class. This dropdown button should be added to a cell component even if it cannot be expanded / collapsed. The outcome should be that the button in the circle should also be present in the place of the x marks.
I am not fully sure in which context you are going to use this button, but here is an example of borderless button, with html caption that uses the same styles than TreeGrid uses for collapse button.
Button btn = new Button();
btn.addStyleNames("v-treegrid-expander","collapsed");
btn.addStyleName(ValoTheme.BUTTON_BORDERLESS);
btn.addClickListener(event -> {
btn.removeStyleName("collapsed");
btn.addStyleName("expanded");
});
layout.addComponent(btn);
I would like to display a list of avatar chips in a row, if it is not enough room for all the avatars I would like to hide the overflowing ones and add a show more button instead. Do you know if a component like this exists for flutter?
See the picture above, if the items exceeds the space a (+5) button is shown, if this one is clicked I want to replace the list with a wrapped list that shows all the avatars.
Is it best to write a new layout component to accomplish this?
In whatsapp, when we go to any particular user then at right corner there is more option (three dots menu). Then after clicking that menu, one list will come and again at last row there is navigate arrow, then after clicking on that row again new menu will come.
here is the images,
after clicking on more option, following view will appear
I want to implement this feature in my iOS Project. Anyone have any idea how to implement it ?
You can manage it with multiple ways!
First Way : Take two table view for the menu. Initially keep one tableview hidden. Then on more's click of first tableview, show second tableview and hide firt one.
Second Way : Take only one tableview and reload different data. I mean on click of main change your datasource for tableview and reload it.
DropDown menu's are considered bad practice in iOS. Use one UIAlertController to show first options, than on selecting the More show another UIAlertController.
Heloo all,
I am new to ios swift. I have one problem in my screen.
I have one screen with drop down list of option like : current bill,water bill., bike bill, loan bill, phone bill....so on
I have sone this. But what i need is, whenever i select any option from drop down list. I need to show some ui elements like label, text filed, text box, lie that dynamically for each each selction in drop list.
For example :
if i select water bill, then below my drop down, i need to show the two label ui with name , id.
if i select current bill , then below my drop down , i need to show one text filed with place holder ' enter current bill number'
So like wise when ever i select any option from drop down..i need to show some dynamic ui.
How can i achive that ??
ANY HELP WILL BE USE FULL
You can make use of container views to achieve that:
1- Add your drop down menu to any view controller you want.
2- Add a container view under that drop down menu and using auto layout make that container view fill the place that you want it to be switchable/dynamic.
3- Redo step 2 as many times as the items of the drop menu.
4- Create IBOutlets for each of your container views and and an IBAction for your drop down menu.
5- In the IBAction of your drop down menu, set isHidden property of one container view to false and set it to true for the others based on the user's selection from the drop down menu.
Here is a tutorial that explains that with a simple example.
Just drag and drop viewcontrollers in your storyboard for your current bill,water bill., bike bill, loan bill, phone billetc.
And when ever you change the option from your drop down list use below code to add your required controller as child controller.
let currentBill = self.storyboard?.instantiateViewController(withIdentifier: "currentBill") as! CurrentBillVC
// remove other views
for k in 0..<self.parentView.subviews.count {
self.parentView.subviews[k].removeFromSuperview()
}
self .addChildViewController(currentBill)
// Add view to your maincontroller i named it parent view in which you want to display other controller w.r.t your drop down list.
self.parentView .addSubview(currentBill.view)
currentBill.didMove(toParentViewController: self)
I created a custom icon, when I assign it to a hard-coded list the custom icon shows. but when I place it to a programmatically added list in a table it doesn't show but instead displays the "plus" icon.
ironically when I try the "delete" built-in icon it properly shows but my custom made icon wont.
these are the scenario:
this is my custom button
$(".ui-icon-customicon").css({'background-image':'url("http://website/mycustomeicon.jpg")','backgroundRepeat':'no-repeat', 'height':'18px', 'width':'18px', 'background-position':'center', 'background-color':'white'});
when I use the above button to a hard-coded list in a Table it properly shows. But when I use it like this...
listItem = document.createElement('li');
listItem.setAttribute("data-icon","customicon");
my icon doesnt show. and instead it displays the "plus" icon. but when I try this....
listItem = document.createElement('li');
listItem.setAttribute("data-icon","delete");
the button changes to the delete (builtin-icon) icon.
Anyone can help me whats the problem? please???
Update
Updating lists
If you add items to a listview, you'll need to call the
refresh() method on it to update the styles and create any nested
lists that are added. For example,
$('ul').listview('refresh');
Custom Icons
To use custom icons, specify a data-icon value that has a unique name
like myapp-email and the button plugin will generate a class by
prefixing ui-icon- to the data-icon value and apply it to the button.
You can then write a CSS rule that targets the ui-icon-myapp-email
class to specify the icon background source. To maintain visual
consistency, create a white icon 18x18 pixels saved as a PNG-8 with
alpha transparency.
Docs:
http://jquerymobile.com/test/docs/buttons/buttons-icons.html