I understand how to hide a column in Angular UI-grid:
$scope.gridOptions = {
columnDefs: [
{ name: 'id', visible : false },
],
};
But if I only define which columns I want hidden, the grid automatically assumes that I also define which columns I want to have visible, however this is not the case so this results in an empty grid.
Is it possible to configure the grid to show 'all columns except those configured to be hidden'?
Yes, it's certainly possible as stated in GridOptions api.
You just need to add excludeProperties instead of columnDefs and assign it an array of strings where every string is a property to hide in your grid.
In your example you should just write:
$scope.gridOptions = {
excludeProperties: ['id'],
};
Related
Let's say I need to set height for my ag-grid. I have to set it on the columns configuration, like that (in an Angular controller):
this.myAgGridOptions = {
columnDefs: ...,
rowData: ...,
headerHeight: 42,
rowHeight: 42
}
Now, if I have 10 different agGrid in my whole application, is there a way to set these properties only once for all of them, and not for each agGrid declaration?
My question is for the Angular 1 version of AgGrid, but if the solution can be used for any version of AgGrid, it will be great.
Thanks
What will probably work best is to use the extend method that angular provides
So you could have something like this:
this.GlobalAgGridOptions = {
headerHeight: 42,
rowHeight: 42
}
this.myAgGridOptionsOne = {
rowData: rowDataOne,
columnDefs: columnDefsOne
}
this.myAgGridOptionsTwo = {
rowData: rowDataTwo,
columnDefs: columnDefsTwo
}
angular.extends(this.mygridOptionsOne, this.GlobalOptions);
angular.extends(this.mygridOptionsTwo, this.GlobalOptions);
Now both the grid options should have the global options. I guess I am supposing that you are going to be creating somewhat different gridOptions for each grid that you plan on creating. I hope I am supposing correctly
I have a ui-grid bound to an object array called data like this:
$scope.grd = {
enableRowSelection: true,
multiSelect: true,
enableRowHeaderSelection: false,
columnDefs: [
{ field: 'id', name: 'ID' },
{ field: 'name', name: 'Name' },
{ field: 'tags', name: 'Tags' }
],
data: "data"
};
if I now replace an item in the array like this:
$scope.data[i] = replacementData;
the grid is updated correctly but the selection state is lost.
I guess the selection module simple doesn't support this though the core module does.
Is there a way to get the selection state of an item before replacing it?
I found this GridRow class in the docs of the selection module that has an isSelected property but no ideas how to get it...
Here is a Plunk that demonstrates the behavior - notice that the selectionCount is also wrong after the row is replaced, so there must be some kind of selected item info somewhere.
Update: It seems that replacing an item in the bound array doesn't remove the GridRow that ui-grid uses internally (that also is the reason why the selectedCount is wrong). Calling unSelectRow before replacing the item fixes the count but the GridRowstill exists...
Ended up copying all the properties from the replacementData over the old data object. That way the selection state is kept, and no new GridRow get's created.
Updated Plunk
angular.extend($scope.data[i], replacementData);
I'm using an Angular UI Grid in my app. I set enableFiltering to true in the options which made some filter boxes show up above my columns. This is great, but the filters don't work exactly as desired.
If a cell contains the text "I like pizza" and I type "I like", that cell's row is shown as a match. I would also think that if I type "pizza", the "I like pizza" cell/row should show up, but that's not the case.
How can I get the filters to allow searching anywhere in the text, not just from the beginning?
You can use filter: {condition: uiGridConstants.filter.CONTAINS} in the column definition to allow that column to search anywhere in the text.
Here's a sample column definition with this in place:
columnDefs: [
// default
{ field: 'name',
filter: {condition: uiGridConstants.filter.CONTAINS} },
...
You can pass a custom filter object that takes a condition property, which can be a function that takes searchTerm and cellValue. Will display if the function returns true.
Plunkr
{ field: 'name', filter: {
condition: function(searchTerm, cellValue) {
return cellValue.indexOf(searchTerm) > -1
}
}}
Given a ui grid with two columns:
columnDefs: [
{
name: 'select', displayName: '', cellTemplate: '<input type="checkbox">'
},
{
field: 'name', displayName: 'Item Name'
}]
In the delete method, I remove from the grid's data collection any items checked by the user. But the check boxes remain checked for some reason. So this:
[X] Item 1
[ ] Item 2
Turns into this after Item 1 is deleted from the grid:
[X] Item 2
How do I get that check box cleared?
Although I have not yet faced any such issues in my Ui-grid implementation. I once faced a issue wherein When I selected all the rows and deleted them, After deletion the selectAll checkbox was still checked.
Based on my research efforts at that time. I guess the following work around should work for you. You can use:
$scope.gridApi.selection.clearSelectedRows() immediately after your deletion. This should un-check any rows if selected.
But for above to work you should already be having something like:
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
}
which is a way to get hold of ui-grid $scope.
For more on this you can look up here https://github.com/angular-ui/ui-grid/issues/426
grid.getcolumnModel().setHidden(0,true) will be effected for column menu
and not grid panel. In column menu u can enable or disable the column. How do we add or remove the column in grid panel dynamically?
I think this is what you are looking for http://www.extjs.com/forum/showthread.php?53009-Adding-removing-fields-and-columns
Make sure you look at post #37 in the thread as well.
For those who reach this question looking for a solution for Ext.js 4.2 and avobe.
I use "reconfigure" method to dynamically change the grid columns: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel-method-reconfigure
Here is a nice example: http://marcusschiesser.de/2013/12/21/dynamically-changing-the-structure-of-a-grid-in-extjs-4-2/
You may have to refresh the Ext.grid.GridView in order for the column change to show.
grid.getView().refresh(true) // true to refresh HeadersToo
In ExtJs 3.x this piece of code can help:
Note: I have used checkbox, as the first column. Please remove that line if you don't need it.
var newColModel = new Ext.grid.ColumnModel({
columns: [
grid.getSelectionModel(),
{
header: 'New column 1'
}, {
header: 'New column 2'
}
],
defaults: {
sortable: false
}
});
grid.store.reader = new Ext.data.JsonReader({
root: 'items',
totalProperty: 'count',
fields: [
// Please provide new array of fields here
]
});
grid.reconfigure(grid.store, newColModel);
The reconfigure function might not work well with plugins. Especially if you have something like FilterBar.
If you only need to do this once, based on some global settings that use can use initComponent and change your initial config. Be sure to make all changes to the config before calling this.callParent();
Tested with ExtJS 6.2 (but should also work for ExtJS 4 and 5)
initComponent: function() {
// less columns for this setting
if (!app.Settings.dontUseFruits()) {
var newColumns = [];
for(var i=0; i<this.columns.items.length; i++) {
var column = this.columns.items[i];
// remove (don't add) columns for which `dataIndex` starts with "fruit"
if (column.dataIndex.search(/^fruit/) < 0) {
newColumns.push(column);
}
}
this.columns.items = newColumns;
}
this.callParent();
maybe try
store.add(new_record);
store.commitChanges();
or store.remove() and store.commitChanges()