Hi alya14,
Check the below example and modify your code accordingly.
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployees()
{
List<Employee> employees = new List<Employee>();
employees.Add(new Employee { ID = 1, Name = "Nancy Davolio" });
employees.Add(new Employee { ID = 2, Name = "Andrew Fuller" });
employees.Add(new Employee { ID = 3, Name = "Janet Leverling" });
employees.Add(new Employee { ID = 4, Name = "Margaret Peacock" });
return Json(employees, JsonRequestBehavior.AllowGet);
}
public JsonResult GetSelectedEmployees(List<Employee> employees)
{
return Json(employees);
}
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
}
}
View
@{
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">
$(function () {
$("#tblEmployees").kendoGrid({
dataSource: {
transport: { read: "/Home/GetEmployees/" },
pageSize: 5
},
pageable: { refresh: true, pageSizes: [2, 25, 50] },
groupable: false,
sortable: true,
persistSelection: true,
columns: [
{ selectable: true, width: 10 },
{ field: "ID", title: "ID", width: 20 },
{ field: "Name", title: "Name", width: 30 }
]
});
$('#btnCheckedRows').on('click', function () {
var grid = $("#tblEmployees").data("kendoGrid");
var selected = [];
grid.select().each(function () {
selected.push(grid.dataItem(this));
});
$.ajax({
type: "POST",
url: "/Home/GetSelectedEmployees",
data: JSON.stringify(selected),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r + " record(s) inserted.");
}
});
});
});
</script>
</head>
<body>
<div id="tblEmployees"></div><br /><br />
<input type="button" id="btnCheckedRows" value="Get Checked Rows" />
</body>
</html>
Screenshots
KendoGrid with selected rows
Selected rows in Controller
