Hello,
I'm using IgGrid with the "enableCheckBoxes: true" parameter.My goal is to define rows that will be checked at initialization.I would only allow selection click on the checkbox and not click on the line.
{ name: "Selection", mode: "row", multipleSelection: true, activation: false, //Avoid the selection by clicking the row rowSelectionChanging:function(evt, ui) { return false; },},
{ name: "Paging", type: "local", pageSize: 7, /* I check first row programatically */ pagerRendering: function (evt, ui) { $("#grid1").igGridSelection("selectRow", 0); }},
The first row is checked and selected. But when I click on the checkbox already checked by default, the row does not deselect.Therefore, if I check the second line, I see the first 2 rows checked and selected instead of the first one only.
Please find an image to illustrate my issue and the jquery sample in the attached archive.
Thank you for your help,
Olivier Hélin
Thanks so much..
The above snippet of disabling any action on row selection helped me a lot..Appreciate your help.
But all these should be part of Infragistics help. Wondering whether it is not covered.
Hello Olivier,
Thank you for your replies.
In case of rebinding the grid, is there a reason why you cannot directly select the desired rows immediately after calling DataBind on the grid ?
I am attaching a slightly modified version of Stamen's sample illustrating this.
Hope this helps.
Hello Stamen,
My grid is bound several times and event rendered is called only once. What do you advise me to initialize the state of the checkboxes in this case?Thank you,Olivier
Hello Petar,
Thank you for your sample, but how to use it with pagination? I modified your sample by adding functionality such as:
...{ name: "Paging", type: "local", pageSize: 4}],...
Only the first page is "checked", that's why I tried to use the event pagerRendering
In addition, the event "rendered" is called once and my grid can be rebind several times (Json data source).
Rgds,Olivier
Thank you for posting in the community.
In this case, I suggest handling the rendered event of the grid in order to check and select all rows initially. As you have noted, rowSelectionChanging can be cancelled and in order to deselect rows on unchecking a checkbox, thecheckBoxStateChangedevent of the RowSelectors feature may be used. For instance:
$(function () { $('#grid1').igGrid({ virtualization: false, autoGenerateColumns: false, width: '500px', height: '500px', columns: [ { headerText: "Product ID", key: "ProductID", width: "100px", dataType: "number" }, { headerText: "Units in Stock", key: "UnitsInStock", width: "150px", dataType: "number" }, { headerText: "Product Description", key: "ProductDescription", width: "150px", dataType: "string" }, { headerText: "Unit Price", key: "UnitPrice", width: "100px", dataType: "string" } ], features: [ { name: "RowSelectors", enableCheckBoxes: true, checkBoxStateChanged: function (evt, ui) { if (ui.state === "off") { $("#grid1").igGridSelection("deselectRow", ui.rowIndex); } } }, { name: "Selection", mode: "row", multipleSelection: true, activation: false, rowSelectionChanging: function (evt, ui) { return false; } }], rendered: function (evt, ui) { //check and select all rows var datasource = $("#grid1").igGrid("option", "dataSource"); for (var i = 0; i < datasource.length; i++) { $("#grid1").igGridSelection("selectRow", i); } }, dataSource: namedData }); });
Attached is a small sample illustrating this in practice.
Please let me know if this helps.