Kendo Grid Cascading Using ASP.NET WEB API

1. GET: api/department
2. 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,

JavaScript

1. $(document).ready(function () {
2. var test=1;
4. function onChange() {
5. if(this.select())
6. {
7. var selected = $.map(this.select(), function (item) {
8. return $(item).text();
9. });
10. test = selected.join(",");
11. var grid = $('#grid1').data('kendoGrid');
12. grid.dataSource.transport.options.read.url = "/api/Employees/" + test
14. grid.dataSource.read();
15. grid.refresh();
17. }
19. else
20. alert("fail")
21. }
23. $("#grid").kendoGrid({
24. dataSource: {
25. transport: {
26. read: {
27. url: "/api/Departments",
28. dataType: "json"
29. }
30. },
31. pageSize: 20
32. },
33. height: 350,
34. change: onChange,
35. selectable: "multiple cell",
36. pageable: true,
37. sortable: true,
38. columns: [
39. {
40. field: "DepartmentID",
41. title: "Department ID"
42. },
43. {
44. field: "DepartmentName",
45. title: "Department Name",
47. },
49. ]
50. });
52. $("#grid1").kendoGrid({
53. dataSource: {
54. transport: {
55. read: {
56. url: "/api/Employees/" + test,
57. dataType: "json"
58. }
59. },
60. pageSize: 20
61. },
62. height: 350,
63. change: onChange,
64. selectable: "multiple cell",
65. pageable: true,
66. sortable: true,
67. columns: [
68. {
69. field: "EmployeeID",
70. title: "Employee ID"
71. },
72. {
73. field: "FirstName",
74. title: "First Name",
76. },
77. {
78. field: "LastName",
79. title: "Last Name",
81. },
82. {
83. field: "Department.DepartmentName",
84. title: "Department Name",
86. },
87. ]
88. });
89. });

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

I hope you have enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.