Hi rani,
Check this example. Now please take its reference and correct your code.
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", IsActive = true });
employees.Add(new Employee { ID = 2, Name = "Andrew Fuller", IsActive = false });
employees.Add(new Employee { ID = 3, Name = "Janet Leverling", IsActive = false });
employees.Add(new Employee { ID = 4, Name = "Margaret Peacock", IsActive = true });
return Json(employees, JsonRequestBehavior.AllowGet);
}
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public bool IsActive { get; set; }
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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 () {
var checkedRows = [];
$("#tblEmployees").kendoGrid({
dataSource: {
transport: { read: "/Home/GetEmployees/" },
pageSize: 5
},
pageable: { refresh: true, pageSizes: [2, 25, 50] },
groupable: false,
sortable: true,
columns: [
{
field: "Is Active",
width: 20,
template: "#if(IsActive == false) {#<div><input type='checkbox' onclick='onChange(this)' id='target' ></div>#}"
+ "if(IsActive == true) {#<div><input type='checkbox' onclick='onChange(this)' id='target' checked></div>#}"
+ "if(IsActive == null) {#<div><input onclick='onChange(this)' type='checkbox' id='target'></div>#}#"
},
{ field: "ID", title: "ID", width: 20 },
{ field: "Name", title: "Name", width: 30 }
]
});
$('#btnCheckedRows').on('click', function () {
var message = "Id\tName\n";
$.each($(".k-grid-content tbody tr"), function () {
if ($(this).find('input[type=checkbox]').is(':checked')) {
var id = $(this).find('td').eq(1).html();
var name = $(this).find('td').eq(2).html();
message += id + "\t" + name + "\n"
}
});
alert(message);
});
});
function onChange(ele) {
var id = $(ele).closest('tr').find('td').eq(1).html().trim();
var isChecked = $(ele).is(":checked");
//alert("Id : " + id + "\nChecked : " + isChecked);
}
</script>
</head>
<body>
<div id="tblEmployees"></div><br />
<input type="button" id="btnCheckedRows" value="Get Checked Rows" />
</body>
</html>
Screenshot
