How to select multiple rows

[Edgar Ricardez Peralta]

Hi

It is possible add checkbox to header column ejGrid HTML5/Javascript for checking and unchecking all rows?

How to setup column for select multiple rows with checkbox?

How to keep the selected rows when changing page?

How to identify all rows selected for multiple pages?

Thanks

[Sellappandi Ramu]

Hi Edgar Ricardez,

Thanks for using Syncfusion products.

Please find the response in below table.

Query	Response
1. It is possible add checkbox to header column ejGrid HTML5/Javascript for checking and unchecking all rows?	We have already logged the requirement “Multiple selection using checkbox” as feature in our database.   As of now, your requirement can be achieved by using the following workaround solution, where we have used headerTemplate to render the check box in the header column and template column to render the check box in grid content. Please refer the following example code. <script type="text/x-jsrender" id="checkboxTemplate">         <input type="checkbox" class="rowCheckbox" />     </script>     <div id="checkboxheader">         <input type="checkbox" class="rowCheckbox" />     </div>     <div id="Grid"></div>     <script type="text/javascript">         $(function () {// Document is ready.             $("#Grid").ejGrid({                 dataSource: window.gridData,                 allowSelection: true,                 selectionType: "multiple",                 allowPaging: true,                 columns: [                           { headerTemplateID: "#checkboxheader", template: true, templateID: "#checkboxTemplate", textAlign: ej.TextAlign.Center, width: 50 },//The checkbox column is bound to the grid using template property                           ….                 ],                             });         });
2. How to setup column for select multiple rows with checkbox?	This requirement can be achieved by using check box change event. In this event we are selecting the row dynamically. Please refer the following example code. function create(args) {             window.selectedItems = [];             $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "change": checkChange });             $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ "change": checkHeaderChange });         } function checkChange(e) {             var trueCheckBox = $("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='true']").parent("td");             var falseCheckBox = $("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='false']").parent("td");             trueCheckBox.addClass("e-selectionbackground e-active");             trueCheckBox.siblings().addClass("e-selectionbackground e-active");             falseCheckBox.removeClass("e-selectionbackground e-active");             falseCheckBox.siblings().removeClass("e-selectionbackground e-active");             if ($("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='false']").length == 0)                 $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ "checked": true });             else                 $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ "checked": false });         } function checkHeaderChange(e) {             gridObj = $("#Grid").data("ejGrid");             if (e.isChecked) {                 $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "checked": true });                 gridObj.selectRows(0, gridObj.model.pageSettings.pageSize - 1);             }             else {                 $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "checked": false });                 gridObj.clearSelection();             }         }
3. How to keep the selected rows when changing page?	By default, the grid selected rows will be removed while performing the paging operation. So, we used actionBegin and actionComplete events to store the selected row index in local storage (window.selectedItems) to maintain that selection. Please refer the following example code. function begin(args) {             if (args.requestType == "paging") {                 var proxy = this;                 var selectedRows = $("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='true']").parents("tr");                 var selectedRowIndex = [];                 $.grep(selectedRows, function (value) {                     if ($.inArray(value, proxy.getRows()) != -1)                         selectedRowIndex.push($.inArray(value, proxy.getRows()));                 });                 for (var i = 0; i < window.selectedItems.length; i++) {                     if (window.selectedItems[i].page == args.previousPage) {                         window.selectedItems.splice(i, 1)                         break;                     }                 }                 window.selectedItems.push({ page: args.previousPage, selectedIndex: selectedRowIndex });             }         } function complete(args) {             if (args.requestType == "paging") {                 $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "change": checkChange });                 obj = $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox("instance");                 if (obj.isChecked()) {                     $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "checked": true });                     this.selectRows(0, gridObj.model.pageSettings.pageSize - 1);                     window.selectedItems = [];                 }                 else if (window.selectedItems.length != 0)                     for (var i = 0; i < window.selectedItems.length; i++) {                         if (window.selectedItems[i].page == args.currentPage) {                             for (var j = 0; j < window.selectedItems[i].selectedIndex.length; j++)                                 $($("#Grid .e-templatecell .rowCheckbox")[window.selectedItems[i].selectedIndex[j]]).ejCheckBox({ "checked": true });                         }                     }                 else {                     $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "checked": false });                     window.selectedItems = [];                     this.clearSelection();                 }                 checkChange();             }         }
4. How to identify all rows selected for multiple pages?	We can identify the data by using the local storage (window.selectedItems). All the selected row index are stored in window.selectedItems.

Please refer the following online playground sample.

Sample Link: http://jsplayground.syncfusion.com/iis3lqsc

We have attached the online KB link in below for your reference.

KB Link: http://www.syncfusion.com/kb/3180/how-to-perform-multiple-row-selection-using-checkbox-in-a-grid

Note: The above KB link we have rendered check box in content alone to select the rows.

Please try the above sample and get back to us if you have any concerns.

Regards,
Sellappandi R