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);
Related
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.
}
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
I want to use a very simple combo box in ExtJS, but I was surprised to learn that it seems as though I have to complexify things by using a store.
I have a single array of data :
var states = [
{"name":"Alabama"},
{"name":"Alaska"}
]
I create my model 'State' linking to the 'name' field, and then I create my store linking to the model, and the array of data.
Ext.regModel('State', {
fields: [
{type: 'string', name: 'name'}
]
});
var store1 = Ext.create('Ext.data.Store', {
model: 'State',
data: states
});
Now I create my combo, as a field in my panel :
var f = Ext.create('Ext.form.Panel', {
items: [
{
fieldLabel: 'hi there',
xtype: 'combobox',
name: 'XXXX',
store:store1,
maxLength: 64,
allowBlank: false
}
]
})
Nothing tells me that I am doing anything wrong, but I get an 'Uncaught TypeError: Cannot read property 'indexOf' of undefined ' whenever I try and open the combo.
My fiddle is here :
http://jsfiddle.net/sr61tpmd/1/
Another aside to my question is, what is the simplest way I can present a combobox in ExtjS?
As long as you only want a combo box with same value as displayed, it is entirely possible to define the store as an array.
xtype:'combo',
store:['Alabama','Arkansas',...]
A real extjs store is necessary where your displayed text differs from the value. You can see a working example for this (also using the us states, actually) in the ext docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.ComboBox
My filter looks like this:
{
type: 'boolean',
dataIndex: 'FutureProfile',
value:false,
defaultValue : false
},
This does not add any sort of default filtering for my data. This brings back every row in the table.
If I do this:
{
type: 'boolean',
dataIndex: 'FutureProfile',
value:true,
defaultValue : false
},
Everything works fine and when the grid is loaded, the FutureProfile rows only display for items that have the boolean value of true.
So it seems if the value is set to false, extjs completely ignores this and does not send this as part of the ajax call, if it's set to true, the filter is sent via ajax. How would I make the grid actually default to rows with a false value for FutureProfile?
Figured it out after much trial and error.
If you want the default value of a boolean filter to work, you must set active to true:
{
type: 'boolean',
dataIndex: 'FutureProfile',
value:false,
active: true
}