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
Related
I am using Angular UI Grid and I want to know if it is possible to make multiple fields, on multiple rows 'appear' editable at the same time. From a user perspective it is impossible to tell at a glance which fields are editable. The best I have been able to get is the setting 'enableCellEditOnFocus', but this still only allows edit when a user specifically clicks on a cell.
$scope.gridOptions.columnDefs = [
{ name: 'age', enableCellEditOnFocus:true }
];
After some searching and that helpful suggestion by Austin I found a decent solution.
$scope.gridOptions = {
data: self.myData,
columnDefs: [{ field: 'firstName', cellTemplate: '<div class="ui-grid-cell-contents"><input type="text" ng-model="MODEL_COL_FIELD" /></div>' }]
};
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 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'],
};
I am using ext5 multiselect combo. If we select a value from the dropdown, say 'Other' and click outside to cancel the dropdown.
Now the value 'Other' will be shown in combo.
Again click the dropdown and select tha same value 'Other', it should remove 'Other' from its values. But rather it adds same value once again.
My code is given below:
xtype: 'combo',
emptyText: 'Retail BI',
name: 'chainRefId',
store: Ext.create('shared.store.filter.ChainRefs'),
displayField: 'name',
multiSelect: true,
valueField: 'chain_ref_id',
listeners: {
expand: function(){
this.getStore().load();
},
change: function(combo, newVal) {
if (!combo.eventsSuspended) {
var storeCombo = Ext.ComponentQuery.query('combo[name=storeId]')[0];
storeCombo.getStore().removeAll();
storeCombo.setValue(null);
var chainCombo = Ext.ComponentQuery.query('combo[name=chainId]')[0];
chainCombo.getStore().removeAll();
chainCombo.setValue(null);
}
}
}
Is there a solution for this?
Thanks in advance.
Your combo's store gets reloaded on each expand. Technically the record corresponding to the value you selected the first time disappears on the second store load, so the removing logic does not "see" it and therefore leaves it in the field.
Remove this:
expand: function(){
this.getStore().load();
}
and just use autoLoad: true on the store.
I have faced the same problem. I have provided a workaround for this. This fix holds good for tagfield too.
//on combo store load event
load: function () {
// I am assuming reference to combo
var rawVal = combo.getValue();
// If combo is multiselct, getValue returns an array of selected items.
// When combo is configured as remote, everytime it loads with new records and therefore removes the old reference.
// Hence, do setValue to set the value again based on old reference.
combo.setValue(rawVal);
// Here you can see, based on old reference of selected items, the drop down will be highlighted.
}
Can someone tell me how to get rid of the feature that filters combo box items.
when i click on the trigger of the combo, i want to display ALL menu items regardless of what text is already in the box, NOT filtered. I've tried several different config options with no luck.
make sense ?
for example, if i have 'View' as my text in the combo, and i click on the trigger, it will only show 'View1' and 'View2' items, i want it to include all the others...
Thanks!
heres my current config
{
...
items: [{
xtype: 'combo',
id: 'myViewsCombo',
emptyText: 'Select View',
selectOnFocus: true,
listeners: {
select: function(combo, record, index) {
L3.handlers.loadView(combo.value);
}},
store: ['View1', 'View2','blahblah']
}]
}
Setting triggerAction: "all" solved the same problem for me.
Try the setting the 'disableKeyFilter' config option to true.
See the ext combobox api.