Hi alya14,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class EmployeeModel
{
public int Id { get; set; }
public string Name { get; set; }
public string City { get; set; }
public string Country { get; set; }
public bool IsSelected { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
var model = new EmployeeModel();
return View(model);
}
public JsonResult GetEmployees()
{
NorthwindEntities entities = new NorthwindEntities();
var result = entities.Employees
.Select(x => new EmployeeModel
{
Id = x.EmployeeID,
Name = x.FirstName + " " + x.LastName,
City = x.City,
Country = x.Country,
IsSelected = false
});
return Json(result, JsonRequestBehavior.AllowGet);
}
public JsonResult GetSelectedEmployees(List<EmployeeModel> employees)
{
int count = 0;
if (employees != null)
{
foreach (EmployeeModel employee in employees)
{
count++;
}
}
return Json(count);
}
}
View
@model KendoGrid_Checked_Row_MVC.Models.EmployeeModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script type="text/javascript">
$(document).ready((function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Home/GetEmployees/",
dataType: "json"
}
},
batch: true,
pageSize: 5,
autoSync: true,
schema: {
model: {
id: "Id",
fields: {
IsSelected: { type: "boolean" },
Id: { editable: false, nullable: true },
Name: { type: "string", editable: false },
City: { type: "string", editable: false },
Country: { type: "string", editable: false }
}
}
}
});
var grid = $("#tblEmployees").kendoGrid({
dataSource: dataSource,
columnMenu: {
filterable: false
},
pageable: {
refresh: true,
pageSizes: [2, 25, 50]
},
groupable: false,
sortable: true,
persistSelection: true,
columns: [
{
template: function (dataItem) {
return "<input type='checkbox' id='" + dataItem.Id + "' class='k-checkbox row-checkbox'>" +
"<label class='k-checkbox-label' for= '" + dataItem.Id + "' ></label > ";
},
headerTemplate: "<input type='checkbox' id='header-chb' class='k-checkbox header-checkbox'>" +
"<label class='k-checkbox-label' for='header-chb'></label>",
width: 40
},
{ field: "Id", title: "Id" },
{ field: "Name", title: "Name" },
{ field: "City", title: "City" },
{ field: "Country", title: "Country" }
]
});
grid.data("kendoGrid").table.on("click", ".row-checkbox", selectRow);
var checkedDatas = [];
function selectRow() {
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#tblEmployees").data("kendoGrid"),
dataItem = grid.dataItem(row);
if (checked) {
// Condition for checking.
if (dataItem.Country == 'USA') {//|| dataItem.Country.indexOf("@@")) {
alert('Country required');
row.removeClass("k-state-selected");
$(row).find('.row-checkbox')[0].checked = false;
dataItem.IsSelected = false;
checkedDatas.pop(dataItem);
$("#header-chb")[0].checked = false;
} else {
row.addClass("k-state-selected");
var checkHeader = true;
$.each(grid.items(), function (index, item) {
if (!($(item).hasClass("k-state-selected"))) {
checkHeader = false;
}
});
$("#header-chb")[0].checked = checkHeader;
dataItem.IsSelected = checked;
checkedDatas.push(dataItem);
}
} else {
row.removeClass("k-state-selected");
$("#header-chb")[0].checked = false;
dataItem.IsSelected = false;
checkedDatas.pop(dataItem);
}
}
$('#header-chb').change(function (ev) {
var checked = ev.target.checked;
$('.row-checkbox').each(function (idx, item) {
if (checked) {
if (!($(item).closest('tr').is('.k-state-selected'))) {
$(item).click();
}
} else {
if ($(item).closest('tr').is('.k-state-selected')) {
$(item).click();
}
}
});
});
$('#btnSend').on('click', function () {
$.ajax({
type: "POST",
url: "/Home/GetSelectedEmployees",
data: JSON.stringify(checkedDatas),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r + " record(s) inserted.");
}
});
});
}));
</script>
</head>
<body>
<div id="tblEmployees"></div><br />
<input type="button" class="btn btn-lg btn-danger ml-5" value="Send" id="btnSend" />
</body>
</html>
