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,
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.
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.
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.