Kendo Grid Cascading Using ASP.NET WEB API

Gowtham K
8y
4.3k
0
1

Article

Before proceeding, please go through my previous articles:

To explain how to cascade the kendo grid, I’m going to use the following API's which I created from my previous article ASP.NET WEB API with Entity Framework 6 code first technique - Part 2 (link given above).

GET: api/department
api/employees/{department id}

GET: api/department response as shown in figure 1.

GET:api/employees/{department id} response as shown in figure 2.

From the above images you can observe that api/department API gives the detail about the department and api/employees/{department id} API gives the details about the employee by relating employees and department entity which is achieved by DTO's. Please refer the following again,

ASP.NET WEB API with Entity Framework 6 code first technique - Part 2 (link given above) article for more details. Now, let us design the UI to use these API's.

HTML design

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div >
<div id="grid"></div>
<div id="grid1"></div>
</div>
</body>
</head>
</html>

JavaScript

$(document).ready(function () {
var test=1;
function onChange() {
if(this.select())
{
var selected = $.map(this.select(), function (item) {
return $(item).text();
});
test = selected.join(",");
var grid = $('#grid1').data('kendoGrid');
grid.dataSource.transport.options.read.url = "/api/Employees/" + test
grid.dataSource.read();
grid.refresh();
}
else
alert("fail")
}
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/api/Departments",
dataType: "json"
}
},
pageSize: 20
},
height: 350,
change: onChange,
selectable: "multiple cell",
pageable: true,
sortable: true,
columns: [
{
field: "DepartmentID",
title: "Department ID"
},
{
field: "DepartmentName",
title: "Department Name",
},
]
});
$("#grid1").kendoGrid({
dataSource: {
transport: {
read: {
url: "/api/Employees/" + test,
dataType: "json"
}
},
pageSize: 20
},
height: 350,
change: onChange,
selectable: "multiple cell",
pageable: true,
sortable: true,
columns: [
{
field: "EmployeeID",
title: "Employee ID"
},
{
field: "FirstName",
title: "First Name",
},
{
field: "LastName",
title: "Last Name",
},
{
field: "Department.DepartmentName",
title: "Department Name",
},
]
});
});

From the above code you can observe, in the onChange event we are fetching the selected value of the department grid and read the data source of the Employee grid to populate the Employee grid based on department selected in Department grid.

The result in browser