How to customize select all checkbox behavior in grid header
This Knowledge base explains how to customize the behavior of the header checkbox when checkbox selection is used.
Solution:
We have achieved this using rowSelecting and actionComplete events of ejGrid. By default, when the header checkbox is checked all the rows of the Grid will be selected.
If we need to select only specific rows based on some condition then we need to prevent the default behavior of the header checkbox in the rowSelecting event and bind a click event to the header checkbox.
The following code example demonstrates how to select only specific rows when header checkbox is checked.
1.Render the Grid control.
HTML
<div id="Grid"></div>
JavaScript
<script>
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
rowSelecting:"rowSelecting",
actionComplete:"complete",
columns: [
{type:"checkbox",width:50},
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 75, textAlign: ej.TextAlign.Right },
{ field: "CustomerID", headerText: "Customer ID",textAlign: ej.TextAlign.Right, width: 90 },
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "Verified", headerText: "Verified",textAlign: ej.TextAlign.Right, width: 100 },
]
});
});
</script>
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.ClientSideEvents(eve => eve.RowSelecting("rowSelecting").ActionComplete("complete"))
.Columns(col =>
{
col.Type("checkbox").Width(50).Add();
col.Field("OrderID").HeaderText("Order ID").Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(90).Add();
col.Field("Verified").HeaderText("Verified").Width(100).Add();
}))
ASPX
<ej:Grid runat="server" ID="Grid" AllowPaging="true">
<ClientSideEvents RowSelecting="rowSelecting" ActionComplete="complete"/>
<Columns>
<ej:Column Type="checkbox" Width="50" />
<ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" Width="75" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" TextAlign="Right" Width="90" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="90" />
<ej:Column Field="Verified" HeaderText="Verified" TextAlign="Right" Width="100" />
</Columns>
</ej:Grid>
ASP.NET CORE
<ej-grid id="FlatGrid" datasource="ViewBag.datasource" allow-paging="true" row-selecting="rowSelecting" action-complete="complete">>
<e-columns>
<e-column type="checkbox" width="50"></e-column>
<e-column field="OrderID" header-text="Order ID" text-align="Right" width="75" is-primary-key="true"></e-column>
<e-column field="CustomerID" header-text="Customer ID" text-align="Right" width="90"></e-column>
<e-column field="EmployeeID" header-text="EmployeeID" text-align="Right" width="90"></e-column>
<e-column field="Verified" header-text="Verified" text-align="Right" width="100"></e-column>
</e-columns>
</ej-grid>
2. In rowSelecting event we prevent the default behavior of header checkbox by defining args.cancel as true and bind the click event to the header checkbox.
In the click event of header checkbox select the rows based on the required condition using selectRows method.
To maintain the selection in all the pages we need to call the header checkbox click handler in the actionComplete event.
JS
<script>
var Checked;
var flag = true;
function rowSelecting(args) {
if (flag || args.target)
Checked = args.target[0].checked;
if (args.target && args.target.hasClass("e-checkselectall") && Checked == false)
args.cancel = true;
}
function complete(args) {
if (args.requestType == "paging") {
if (Checked == false) {
selectall();
}
}
}
$(function () {
$(".e-checkselectall").on("click", selectall);
})
function selectall(args) {
var indexes = [];
var obj = $(".e-grid").ejGrid("instance");
var data = obj.model.currentViewData;
if (Checked == false) {
for (var i = 0; i < data.length; i++) {
if (data[i].Verified == true) {
flag = false;
indexes.push(i);
}
}
obj.selectRows(indexes);
setTimeout(function () {
$(".e-checkselectall")[0].checked = true;
}, 1);
}
}
</script>
Result:
Conclusion
