Post
Ask Question

Kendo Grid Cascading Using ASP.NET WEB API

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).
  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, 

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
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  8.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  11.     <title></title>  
  12.     <meta charset="utf-8" />  
  13. </head>  
  14. <body>  
  15.     <div >  
  16.   
  17.         <div id="grid"></div>  
  18.         <div id="grid1"></div>  
  19.   
  20. </div>  
  21. </body>  
  22. </head>  
  23. </html>  
JavaScript
  1. $(document).ready(function () {  
  2.                 var test=1;  
  3.                
  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  
  13.                      
  14.                     grid.dataSource.read();  
  15.                     grid.refresh();  
  16.                          
  17.                     }  
  18.   
  19.                     else  
  20.                         alert("fail")  
  21.                 }  
  22.                  
  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",  
  46.   
  47.                             },  
  48.   
  49.                         ]  
  50.                     });  
  51.                  
  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",  
  75.   
  76.                             },  
  77.                                {  
  78.                                    field: "LastName",  
  79.                                    title: "Last Name",  
  80.   
  81.                                },  
  82.                                {  
  83.                                    field: "Department.DepartmentName",  
  84.                                    title: "Department Name",  
  85.   
  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. 


Similar Articles