Hello! The client wants the following functionality: There are 2 JS iggrids in the page,- one that is with rowSelectors' checkboxes and ( let's called it "selected features grid" )- the other is filled (on load, and also on every click) with the row data from the the first one' checked rows, as we trigger click event on the checkboxes on 'iggridrendered' event in this way: $(editFeaturesSelector + " span.ui-igcheckbox-normal:eq(" + checkIndex + ")>span").trigger('click');and then we use the "checkBoxStateChanging" event to push/remove the checked/unchecked row's data in the "selected features grid".So we have 2 problems:
- The main one is:
When the checkbox grid has more than one page, we cannot trigger click on the checkboxes, because they're not rendered in the DOM. Is there alternative way to do this, so that we can trigger also the "checkBoxStateChanging" event, or if you have suggestions for different approach I'm open to hear them?- The second problem is:
Let's say you have checked several checkboxes and filled the "selected features grid" with some data. And then you click on another row, but not on the checkbox but on another cell (selection is in "row" mode) or a bit off the checkbox but in the same cell ( by the way I set the "activation" to "false" ) and then all the selected checkboxes become unchecked, but no "checkBoxStateChanging" event is triggered?I'm looking forward to your answer.Best Regards,Georgi Tsvetkov
Hello Georgi,
Thank you for using the Infragistics forums!
About your first issue - there are multiple ways of achieving this but they are not supported by the Row Selectors feature, therefore you'll either need to do some additional coding or use one of the widget's private fields. Unfortunately, neither will produce you a checkBoxStateChanging event as there are simply no checkboxes rendered for other pages.
Assuming you actually need the row's data for that checkbox, you can extract it from the data source (unless you are using server-side paging).
To put it together, instead of actually checking a checkbox on another page you would do:
var rs = $("#grid1").data("igGridRowSelectors");if (!rs._pSelection[pageIndex]) { rs._pSelection[pageIndex] = [];}rs._pSelection[pageIndex][rowIndex] = true;
This will mark the specified checkbox as checked internally and when you go to that page you'll see it checked and the row selected. Alternatively you can store the checkbox states by index in your code and toggle the checkboxes on the pageIndexChanged event thrown by the Paging feature. Both solutions should work but the second one may require some additional effort managing the list of checkbox states.
As mentioned above, you won't get any data about the row from either of the solutions upfront. You will need to extract it from the grid's data source.
$("#grid1").igGrid("dataSourceObject");
The code above will provide you with the whole data source object to play with, unless you have server-side paging in which case you'll need to get the data needed from the server.
As for the second issue - this is done to prevent a swarm of checkBoxStateChanging events firing as a lot of checkboxes are getting unchecked in the same time. To get an indication this happens you should also bind to the rowSelectionChanged event of the Selection feature. In the handler (if I understood your use case correctly) you will have to clear the second grid from all records and then add the record that's newly selected. Please refer to the documentation for details about the event arguments passed by rowSelectionChanged.
http://help.infragistics.com/jQuery/2012.1/ui.iggridselection
Please, let me know if you need any additional help!
Best regards,
Stamen Stoychev
We decided to list all the records without paging so the first issue is not actual for now, but I'll try it and tell you later if it worked, thank you!
For the second issue I want to just disable unchecking of the checkboxes when you change selection, how can I do that?
Thanks a lot! This is really what I wanted :)
Hi,
What comes to my mind is cancelling the rowSelectionChanging event. It'll however disable any selection made outside the checkboxes. To achieve it you have to bind to the rowSelectionChanging event of the Selection feature and return false.
$("#grid1").bind("iggridselectionrowselectionchanging", function (event, ui) { return false; });
Hope this helps!