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.
Hristo,
As per your suggestion opened a new thread with the issues we are encountering while making the checkbox checked when virtualization enabled.
Link to new post : IGGrid with vitualization and checkbox feature
Kiran
Hello Kiran,
I would like to ask you to open a new thread regarding this issue. Our company's policy is to keep the requests separate from each other, which leads to better tracking of issues and fast responses. It will also make search easier and it is our community members who would be able to benefit from this.
After you are done posting a new thread in the community please be that kind to inform me here.
Thank you.
This workaround will not help us as we have some 900+ rows and the layout is fixed so that it should fit in one page. Similar issue we are also encountering while doing text search on department name field. As the text to be searched is not coming in visible area.
Please suggest if we can try any other alternative with Virtualization, preselecting the rows and checkboxes, search for the department name on IE10 browser.
Hello Irshad,
I was using Chrome and it is okay, but I did see under IE it is not the same behavior.
The reason is that when using virtualization the DOM renders only the visible rows and some browsers have issues with this. Because the visible rows number is defined by the height of the grid, you can change the height of the grid. In my sample it is 380px, but give it try for example with 480px and it will work as expected.
I hope this helps.
Thanks for your quick response.
I tried with your latest sample and the problem still persists. After row number 88 the pre-selected row doesn't have the checkbox checked.
I am using Internet Explorer 10. Are you using the same? Just a thought if it has anything to do with the browser version.
Irshad