Kendo UI Grid With Checkbox & get Checked Value from grid.
var gbSelectiveEmpArray = [];
var gbRemovedEmpArray = [];
$(document).ready(function () {
TestHelper.GenerateEmpGrid();
TestHelper.EmployeeGridChangeEvent();
});
var TestManager = {
gridDataSource: function () {
var gridDataSource = new kendo.data.DataSource({
type: "json",
serverPaging: true,
serverSorting: true,
serverFiltering: true,
allowUnsort: true,
pageSize: 10,
transport: {
read: {
url: '../KendoUI/GetEmployeeSummary/',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: {
data: "Items", total: "TotalCount",
model: {
fields: {
}
}
}
});
return gridDataSource;
},
};
var TestHelper = {
GenerateEmpGrid: function () {
$("#grdEmpInfo").kendoGrid({
dataSource: TestManager.gridDataSource(),
pageable: {
refresh: true,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
columns: TestHelper.GenerateColumns(),
navigatable: true,
selectable: "row"
});
},
GenerateColumns: function () {
return columns = [
{
field: "check_row", title: "", width: 20, filterable: false, sortable: false,
template: '#= TestHelper.CheckedEmp(data) #',
headerTemplate: "<input type='checkbox' id='checkAll'/>"
},
{ field: "EmpId", hidden: true },
{ field: "EmpName", title: "Name", width: 50 },
{ field: "Salary", title: "Salary", width: 50 },
{ field: "EmpTypeName", title: "Type", width: 50 }
];
},
CheckedEmp: function (data) {
if (gbSelectiveEmpArray.length > 0) {
var result = gbSelectiveEmpArray.filter(function (obj) {
return obj.EmpId == data.EmpId;
});
if (result.length > 0) {
return '<input id="check_row" class="check_row" type="checkbox" checked="checked"/>';
}
else {
return '<input id="check_row" class="check_row" type="checkbox"/>';
}
}
else {
return '<input id="check_row" class="check_row" type="checkbox"/>';
}
},
=============== Kendo Grid Change Event for get Checked Data==============
EmployeeGridChangeEvent: function () {
$("#grdEmpInfo").on("click", ".check_row", function () {
var $cb = $(this);
var gridSummary = $("#grdEmpInfo").data("kendoGrid");
var selectedItem = gridSummary.dataItem(gridSummary.select());
var dataItem = gridSummary.dataItem($(this).closest('tr'));
if ($cb.is(":checked")) {
if (selectedItem != null) {
for (var i = 0; i < gbRemovedEmpArray.length; i++) {
if (gbRemovedEmpArray[i].EmpId == dataItem.EmpId) {
gbRemovedEmpArray.splice(i, 1);
break;
}
}
gbSelectiveEmpArray.push(selectedItem);
}
else {
$cb.prop('checked', false);
}
} else {
for (var j = 0; j < gbSelectiveEmpArray.length; j++) {
if (gbSelectiveEmpArray[j].EmpId == dataItem.EmpId) {
gbSelectiveEmpArray.splice(j, 1);
break;
}
}
}
});//Indivisual row selection
$('#grdEmpInfo').on('change', '#checkAll', function (e) {
gbSelectiveEmpArray = [];
gbRemovedEmpArray = [];
var gridSummary = $("#grdEmpInfo").data("kendoGrid");
var selectAll = document.getElementById("checkAll");
if (selectAll.checked == true) {
$("#grdEmpInfo tbody input:checkbox").prop("checked", this.checked);
$("#grdEmpInfo table tr").addClass('k-state-selected');
var gridData = gridSummary.dataSource.data();
for (var i = 0; i < gridData.length; i++) {
var obj = gridData[i];
gbSelectiveEmpArray.push(obj);
}
}
else {
$("#grdEmpInfo tbody input:checkbox").removeAttr("checked", this.checked);
$("#grdEmpInfo table tr").removeClass('k-state-selected');
gbSelectiveEmpArray = [];
var gridDatarv = gridSummary.dataSource.data();
for (var k = 0; k < gridDatarv.length; k++) {
if (gridDatarv[k].EmpId > 0) {
gbRemovedEmpArray.push(gridDatarv[k]);
}
}
}
});// All Row Selection
},
};
0 Comments