function bindGrid() {
var filterContain = {
cell: {
showOperators: false,
operator: "contains",
suggestionOperator: "contains"
}
}
var DataColumn =
[
{ title: "<input id='chkAll' class='checkAllCls' type='checkbox'/>", width: "35px", template: "<input type='checkbox' class='check-box-inner' />", filterable: false },
{ field: "ID", title: "ID", width: "10%", filterable: filterContain },
{ field: "First_Name", title: "First Name", width: "10%", filterable: filterContain },
{ field: "Last_Name", title: "Last Name", width: "10%", filterable: filterContain },
{ field: "EmailID", title: "Email ID", width: "10%", filterable: filterContain },
{ field: "Mobile", title: "Mobile", width: "10%", filterable: filterContain },
];
$("#grd").kendoGrid({
selectable: "multiple",
dataSource: {
schema: {
model: {
fields: {
ID: { type: "string" },
First_Name: { type: "string" },
Last_Name: { type: "string" },
EmailID: { type: "string" },
Mobile: { type: "string" },
}
}
},
pageSize: 100,
},
height: 800,
filterable: {
mode: "row"
},
groupable: false,
scrollable: true,
pageable: true,
sortable: true,
columns: DataColumn,
});
$("#grd tbody").on("click", "tr", function (e) {
var rowElement = this;
var row = $(rowElement);
var grid = $("#grdC").getKendoGrid();
if (row.hasClass("k-state-selected")) {
row.removeClass('k-state-selected');
row.find('[type=checkbox]').prop('checked', false);
e.stopPropagation();
} else {
grid.select(row)
row.find('[type=checkbox]').prop('checked', true);
e.stopPropagation();
}
});
$(".checkAllCls").on("click", function () {
var ele = this;
var state = $(ele).is(':checked');
var grid = $('#grd').data('kendoGrid');
if (state == true) {
$('.check-box-inner').prop('checked', true).closest('tr').addClass('k-state-selected');
}
else {
$('.check-box-inner').prop('checked', false).closest('tr').removeClass('k-state-selected');
}
});
}
