How to perform multiple selection by using the checkbox in JS Grid?
You can populate the Grid data via the angular by using the datasource property and the selection can be done by enabling the allowselection property in the Grid.
By default, the multiple selection is performed by using the ctrl key. You can also perform multiple selection by using the Checkboxes that are bound to the Grid rows.
The following code example explains how to populate the Grid data via the angular and the multiple selection by using the checkboxes.
HTML
<html lang="en" ng-app="listCtrl"> . . . . . <body ng-controller="PhoneListCtrl"> <div id="Grid" ej-grid e-datasource="data" e-allowselection="true" e-selectiontype="multiple" e-allowpaging="true" e-create="create" e-actioncomplete="complete" e-recordclick="recordClick" > <div e-columns> <div e-column e-headertext="Checkbox Column" e-template="true" e-templateid="#checkboxTemplate" e-textalign="center" e-width="90"></div> <div e-column e-field="OrderID" e-headertext="Order ID" e-textalign="right" e-width="90"></div> <div e-column e-field="CustomerID" e-headertext="Customer ID" e-textalign="left" e-width="90"></div> <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="left" e-width="90"></div> <div e-column e-field="Freight" e-headertext="Freight" e-textalign="left" e-width="90"></div> <div e-column e-field="ShipName" e-headertext="Ship Name" e-textalign="left" e-width="90"></div> </div> </div>
JS
angular.module('listCtrl', ['ejangular'])
.controller('PhoneListCtrl', function ($scope) {
$scope.data = window.gridData; //binding dataSource to Grid
//window.gridData is referred from jsondata.min.js
});
Render the check Box to column by using the template property in the Grid columns.
<script type="text/x-jsrender" id="checkboxTemplate"> <input type="checkbox" class="rowCheckbox" /> </script>
Multiple row selection through checkbox can be achieved by using the Grid client side events. In Create and actionComplete events of the Grid, the change event of the checkbox is triggered.
$scope.create = function (args) {
$("#Grid .rowCheckbox").ejCheckBox({ "change": $scope.checkChange });
}
$scope.complete = function (args) {
if (args.requestType == "paging")
$("#Grid .rowCheckbox").ejCheckBox({ "change": $scope.checkChange });
}
$scope.checkChange = function (e) {
gridObj = $("#Grid").data("ejGrid");
gridObj.multiSelectCtrlRequest = true;//For MultiSelection using Checkbox
}
In the recordClick event of the Grid, the selected records are cleared and the checkboxes corresponding to the selected records are unchecked.
$scope.recordClick= function (args) {
if (this.multiSelectCtrlRequest == false) {
for (var i = 0; i < $("#Grid .rowCheckbox").length; i++)
$($("#Grid .rowCheckbox")[i]).ejCheckBox({ "checked": false }) //To clear checkbox when you select row by recordclick rather than checkbox
this.clearSelection();
}
}
The following screenshot displays the result.
Figure 1: Multiple selection in Angular Grid using Checkboxes
Conclusion
I hope you enjoyed learning on how to perform multiple selection by using the checkbox in JS Grid.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript TreeGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
