I am using grouped grid containing a checkcolumn. I need to control the selection of the check boxes , that is allow or not allow selection. I use the beforecheckchange function to do that. To explain the issue consider the scenario. There are five group each containing 3 rows out of which only the last group is only expanded. If I would selected last row check column, the rowIndex that would be returned would be 2, because only 3 rows are visible. That is virtual or visible rowindex is returned how to know/get the actual row index without all the group being expanded.
My Bushiness requirement requires me know the exact row index to get the record from the store. The check column is mapped with data/record from the store that allows me to take decision to allow check on the check check box. Also one from lower group is checked then same level check box from higher need also be checked.
I am using ExtJS 5.x.x framework.
I have checked the same issue exists with tree grid.
Thanking you in advance.
I believe that this would solve your issue:
// You checkcolumn listeners
listeners: {
beforecheckchange : function(component, rowIndex, checked, eOpts) {
var row = component.getView().getRow(rowIndex),
record = component.getView().getRecord(row),
realIndex = component.getView().ownerCt.getStore().indexOf(record);
console.log(rowIndex, realIndex);
}
}
Demonstration Fiddle: https://fiddle.sencha.com/#fiddle/c3e
What version of ExtJS are you using?
There are at least two known grouping bugs in ExtJS 4.2.1, fixed in 4.2.2 (EXTJS-10027) and 4.2.3 (EXTJS-10043), respectively.
It would be easier to fix these bugs in your version of Ext (or by simply upgrading) than writing workarounds for each and every grid.
If this does not solve your issue, and you are on Ext4, consider abusing the "convert" function on the underlying model. This won't work in ExtJS5 any more, I fear, but for the time being it is a good interim solution.
Related
Is it normal that when I have a grid and I select the first row, then I try to select another row it actually deselects the first row without selecting the new one? It seems like a feature to me 'cause it happens to all my grids even with the simplest settings. Is there a way to remove this option?
Yes, this is the default behavior. You can set the selection mode to multiselect, which allows you to select multiple rows by holding the CTRL or SHIFT keys.
I'm unsure which version of ExtJS you are using, but if it is version 4.2, you can set the mode of the selection model to 'SIMPLE' in order to achieve the behavior you are expecting.
Ext.create('Ext.panel.Grid', {
// other grid configs
selModel: {
mode: 'SIMPLE'
}
}
The docs for the mode config are here: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.selection.Model-cfg-mode
It seems that this was an error with my version of ExtJS. My coworkers were using 4.2.2 while I was using 4.2.1. When I upgraded to the new version everything got fixed by itself. Weird since this does not seem to have been documented...
I need to hide the entire column of the check box (Ext.selection.CheckboxModel). I found out to get the columns of the grid to hide, but the columns does not give the checkbox column.
grid.headerCt.items.getAt(0).hide()
This worked for me in 4.2.2. I used a combination of the other answer by Saki and a little traversing through the DOM because the "getAt0).hide()" solution did not work for me either:
grid.headerCt.items.items[0].hidden = true;
Folks,
I am using ng-grid to display a list of items.
I want to give my users ability to rearrange the rows in the list.
i.e move the rows up and down as they please.
Now,
However when I update the grid data in the backend i.e say change the index of a particular row, that row does not automatically change locations in the front-end.
What am i missing here ?
I have created a plunker to describe the problem
http://plnkr.co/edit/s1hrTSqF2zeZo3Btaln0
The grid doesn't use the index of the array to order it, so even if you are changing it, because the data is still there nothing happens.
What you could do is define an order field and update the value then changing the values as shown in this plukr. The order field you can hide it from the grid if required using columnDefs to explicitly defined which column should be shown.
Regards
I have ExtJS Grid In which I have Columns called "Mobile Number".
I have made simple thing here When I edit more than 2 rows and If I Modify the Column "Mobile Number" It will be checked whether is it Exist in Grid or Not.
If Duplicate Number found, I will give Message that the Input Mobile Number is already Exist and
reloading the whole grid so all edited data will be gone.
But, I want the non-duplicate data back was edited.
So, How can I keep my non-duplicate data as it is after reload the whole Grid.
I just want to remove duplicate row where found duplication and other edited rows keep as it is.
Can I use this RowEditor plugin for ExtJS 2.x compatible.
http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/row-editor.html
My E-mail: ashwin.parmar2020#gmail.com
To find duplicate data use afteredit event of Ext.grid.EditorGridPanel on that event you will get current record, so just display message and add empty value in that field
You should use a validator for the mobile number field that detects duplicates and refuse the duplicate number. So you don't have to reload the grid.
If you want to reload the grid anyways, you could get the dirty rows before doing so and store/reapply them afterwards.
To get the dirty records you can use the getModifiedRecords() function of the grids store. Use the commitChangesfunction of the store to apply them after validation/processing.
I have a column in a grid with editor as combo-box.
When the grid is loaded then all the column values get displayed properly.
The issue is, when user clicks at the column (having combobox as editor) to edit it then the column value becomes null as shown in the attached screenshot.
I understand that the value becomes null as the store of combobox has not been loaded yet.
I can not use autoLoad true due to the heavy amount of data present in the combobox store. Moreover, even if I use autoLoad:true for the store with paging in it, then that too safeguards only those values which are present in the first page and not all.
Thus, how can I maintain the value in grid column when that value is not present in the store of combobox used as editor for the column?
Could anyone guide at this?
PS: I am using ExtJS Ver 4.0.2a
I have been able to find a solution for this.
It has more to do with the version of ExtJs. If we upgrade to 4.0.7 and then use forceSelection:false for a combobox then things work fine as expected. That is, the combo-box accepts a value which doesn't exist in its store and doesn't set the current value to null.
Hope this helps someone else too looking for something similar.
I would suggest having the grid record contain both that columns value, as well as display value. If the combo store lookup is unable to find a matching value (because that combo store hasn't been loaded yet), then revert to showing the display value stored with the grid record.
You might also need to have the afteredit event on the grid update that grid records display value after that column is edited for a particular row.