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.
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.
Hello,I am still following your case. Have you been able to resolve the issue using the suggested ?If you have any concerns or questions, please feel free to contact me, I will be glad to help you.Thank you for choosing Infragistics components!
I am working on the same code as veena posted. I tried the sample you have sent with the earlier post, binding the dataSource at grid initialization itself.
This still seems to be not working for higher number of rows. I added 10 more rows to the sample data and tried. The check box seems to be not checked for the selected row for row numbers >=90. Hope you will be able to provide a solution.
Thanks in anticipation!
Regards,
Irshad
Hello Irshad,
I have tested the sample attached in my last post with higher number of rows and it works as expected. I attach it again for you to check it.
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.
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.
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.