I want to use the angularjs ui-grid and have one condition: It has to be possible to style a column filter menu.
In the documentation it is only explained how to add new items to a column menu but not how to change the design or add other controls. If we look at the example it should be possible for instance to open a column menu that can display two custom styled radio buttons (male, female) with two buttons two accept or decline the changes. If the changes are accepted, the filter should be applied.
Is it somehow possible to use templates for the column menu as it is possible for the columns header? How to create a custom column menu?
Thank you.
See plunker for solution.
Within your columnDefs you just need to add menuItems. I had trouble understanding from your question what exactly you wanted these additional dropdown options to do so I've modeled the general format for you in a very simple example where the first custom option does nothing but display in your menu and the second activates an alert containing the column name. Please let me know if this is (not) sufficient.
For a full list of supported attributes for menuItems see this tutorial.
columnDefs: [
{
field: 'name',
menuItems: [{
title: 'Custom Nothing'
}, {
title: 'Column Name',
action: function() {
alert(this.context.col.displayName);
}
}]
}
]
Came across what I think OP was looking for, definitely what I was looking for, via http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef#properties_headercellfilter
It's annoying you don't seem to be able to modify only the dropdown template, you have to override the entire header cell template, but at least you can do that on a per-col basis.
Related
I have a grid with windegColumns. And it all works right.
But if you manually hide the Num column, the tagfild widget does not work correctly. New values are not set, old values are not deleted. Unsaved values are reset.
In my application, I need to dynamically hide or show the column containing the widget at the click of a button. But when I do this, my Tagfield breaks
My fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3db6
Just hide the Num column in the table and try to change the Tegfield value and you will see
Any idea why this is happening and how to fix it?
It looks like there might be a bug with using the dataIndex instead of bind. Per the docs, you get a record property for each row for free, and if it doesn't work, you may have to explicitly set a rowViewModel. I would recommend using binding here regardless:
xtype: 'widgetcolumn',
cellWrap: true,
text: 'Phone',
// Notice I took out the dataIndex here
flex: 1,
widget: {
xtype: 'tagfield',
// Added bind
bind: {
value: '{record.phone}'
},
// rest of code
After removing the dataIndex from your tagfield column, the selecting of new values or removing or retaining after hiding the column works properly. A similar fiddle was available where the dataIndex was not provided. Still, not sure why it behaves like this. It probably does not store the selected values anywhere and reloads the widget store. Tried the same with combobox but it just resets the fields and still allows selecting of values after we hide the column.
What I have is I have an item selector with available users and assigned users as two different columns. On clicking any user in the available users and clicking a different menu option, the selected user from the available users columns is still displayed. How do I clear the selection upon clicking a different menu ?
Here's how the screen looks with the selection under a particular menu :
And here's the selection again after opting a different menu :
I tried, accessing the store and clearValue() and setValue('') which is not right solution and I was not able to access the selecitonModel to perform clearSelections() here.
How do I clear the selections upon clicking menu?
Would greatly appreciate your help, thanks a lot.
You can use the getSelectionModel().deselectAll() method of the "Users View" (that you want to clear the selection) within the listener select from the "Roles View". This will cause all user record selections to be removed when selecting a different menu. See docs: getSelectionModel, deselectAll.
Example:
{
xtype: 'dataview',
.
.
.
listeners: {
select: function(dataview, record, index, eOpts){
dataview.view.up('viewport').down('#usersView').getSelectionModel().deselectAll();
}
}
}
Within the listener, it performs the method to deselect all records from the target view.
These methods are commonly found in components that have the selection behavior, such as the grid.
See this fiddle: Deselect DataView Items.
store.removeAll();
is this what you are looking for
I have a requirement that, once i fetch data and bind it to UI grid, based on the cell data, i should enable/ disable cell selection. For cell navigation?
I am already set the cellNav option to my UI grid.
When i check the options, i see the below reference:
//Enables cell selection.
enableCellSelection: false, // no more in v3.0.+
but it is saying no more for v3.0+, but as of now, i am using 3.0+ version only.
I am looking for a code reference with a function instead of "false" option, and my function will check the cell data and put the option..?? any references?
I think you are looking for allowCellFocus:
{
name: 'FieldName',
allowCellFocus: false
}
I am not sure what you mean by based on the cell data. If you want to enable/disable only some cells in a given column, it would have to be something that is super custom, and would probably land in the realm of very hacky.
I cannot find an answer to this in stackoverflow or an answer I can understand in github..the issue is simple..I want to be able to use ui-grid much as I would a datasheet or continuous forms in MS Access..I think I have editing sussed (at least on a cell by cell basis) and now I need to be able to add a new blank record (row) by clicking a button.
Is there an easy way to achieve this?
Ideally the code would make provision for setting values for certain fields for example a field which is a foreign key (for example if the user is adding line items to an order one would want the order id to be entered automatically via the underlying code rather than for the user to have to select from a dropdown list each time).
As always any answer will be appreciated.
Please take a look at this plunker.
Adding row with button
More specifically look at this function within the controller and how it's called using the ng-click directive on the button html element:
$scope.addNewItem=function()
{
$scope.data.push( { name: 'Test add ', title: 'Test add' });
};
After being clicked this is then reflected in the view. Of course you could customize this to append blank data, or data specific to the button the user clicked.
I have a grid that displays images as values in one of its column using following code.
{
field: 'TR',
displayName: 'Trigger Redundancy',
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><img src="http://goo.gl/aFomAA"></img></span></div>'
}
Now I want few more alterations to my grid which I am unable to do,
Instead displaying one image as value for a column, I want five different images that should be shown on the basis of numeric value from 0-4.
I want to include bootstrap pagination to my grid.
After images are displayed, when I right click on it, it should provide me some functionality using which I could be able to change my image to some different image.
I want 1st column that should provide me a button, by clicking on it I should be able to display information of that row in some textbox below my grid.
I want to apply filtration on three of my columns such that I will provide user a textbox to search whatever he will type in that, that should be filtered from these three columns.
How can I achieve this? Possibly a working example?
I have a working demo Plunker of my grid
I have make chenges to show the images from 0 to 4 based on the data and even for the click function but i think to show some option you should avoid right click and you use left click and if you will make changes to the data source of gird it will automatically display the required value in the grid for showing different images.