Hi,
I have a requirement where I will key in say some department Id in a text box and when I click a button it should open a popup with grid having list of department Ids and names.
While opening this modal we should also make sure if the department id keyed in Textbox is available then it should be checked and highlighted.
In my sample I am able to select that particular department however the checkbox is not getting checked.
Note: If I select any department ids which is available in the beginning of grid, it works fine, but if the department id matched to any row which is somewhere in middle or so it is not getting checked.
Thanks,
Veena
Hello Veena,
When using virtualization only the table cells belonging to visible columns are present in the HTML DOM structure. So it is not possible to check a row which is in the middle of the grid and is not present in the DOM.
In order to provide more insight and a possible implementation of this functionality, I will highly appreciate if you could send me your working sample or the code where you check for the id and apply checking and highlighting.
I will be happy to assist you on that.
Hi Hristo,
Thanks for the reply.
Is there a way I can use a css or any code snippet to check the checkbox when it come to visible area atleast? (guess we can use the rowsrendered event to do this)
Actually in row changing event we are just selecting the rows based on Ids.
preSelectGridRows =function ($grid, idsToBeSelected) {var dataView = $grid.data('igGrid').dataSource.dataView();
var matchedRowIndexes = [];
var key = $grid.igGrid("option", "primaryKey");
if (idsToBeSelected.length > 0) {
$.each(dataView,function (rowIndex, dataRow) {
$.each(idsToBeSelected,function (index, id) {
if (dataRow[key] === id) {
$grid.igGridSelection("selectRow", rowIndex);
}
});
},
Now the only issue with the sample is we are unable to check the checkboxes even if the row is selected.
Actually virtualization here should not be an issue since the selection is not applied to the DOM elements of the grid, but rather to the widget's collection of rows. If you want to see the selected rows when you open the grid, I suggest to do this in the Rendered event. The code will look like this ( I just slightly modified your function, and have predefined id's stored in the idsToBeSelected array):
I used RowSelectors to have checkboxes rendered on the grid and selecting a row also checks the RowSelector checkbox. Please refer to my sample for a demonstration how this is achieved.
I hope it works for your scenario. If I misunderstood you or if you have any further questions regarding this issue, please let me know, I will be glad to help.
We tried adding the code in Rendered event as well. One thing what I observed is "var dataView = grid.dataSource.dataView();" this will be [], so will not be able to get the actual grid data. I have attached a zip folder for reference. In that sample Please try keying in the value 70 in textbox and click on the Show Departments button.
You can see a popup screen where the departments are loaded, here when we scroll down to the row having department 70. you can see the row selected but the checkbox is not is checked state.
Please let me know if you require any additional information.
Thanks in advance for your support.
Regards,
Thank you for your sample.
Regarding the Rendered event - in your current configuration the grid is initialized and rendered without binding to a data source, setting the datasource and binding comes later when you call the _loadAndBindData function. This is why in the rendered event you get returned an empty array.
Could you please clarify why do data bind the grid in the _loadAndBindData function ? If you just set the dataSource of the grid when you initialize it and then call the _checkPreSelectedDepartments function right after the _intializeDepartmentsGrid function, it works as expected.
Please check the modified sample I have attached and let me know if it fits your requirements this way.