Post
Ask Question

Cascading Dropdown List using Asp.Net and Kendo UI

For this, we first need to create 2 model classes, one for Department and another for Designation as below:

  1. public class Department    
  2. {    
  3.         public int DeptCode { get; set; }    
  4.         public string DeptName { get; set; }    
  5. }    
  6.     
  7.     
  8. public class Designation    
  9. {    
  10.         public int DesigCode { get; set; }    
  11.         public string DesigDesc { get; set; }    
  12.         public int DeptCode { get; set; }    
  13.  }   
We must then provide the controller code for these. Here first the  department dropdown is populated. And after selecting a specific department, the  related designation will be populated in the designation dropdown.
  1. public JsonResult GetDeptList()      
  2. {      
  3.     List<Department> lstDept = DeptList();      
  4.     return Json(lstDept, JsonRequestBehavior.AllowGet);      
  5. }      
  6.   
  7. public List<Department> DeptList()      
  8. {      
  9.     List<Department> lstDept = new List<Department>();      
  10.     lstDept.Add(new Department { DeptCode = 1, DeptName = "Account" });      
  11.     lstDept.Add(new Department { DeptCode = 2, DeptName = "Sales" });      
  12.     lstDept.Add(new Department { DeptCode = 3, DeptName = "Marketing" });      
  13.     lstDept.Add(new Department { DeptCode = 4, DeptName = "Admin" });      
  14.     lstDept.Add(new Department { DeptCode = 5, DeptName = "HR" });      
  15.     return lstDept;      
  16. }      
  17.   
  18. public JsonResult GetDesigList(int? DeptCode)      
  19. {      
  20.     List<Designation> lstDesig = DesigList().Where(s => s.DeptCode == DeptCode).ToList();      
  21.     return Json(lstDesig, JsonRequestBehavior.AllowGet);      
  22. }      
  23.   
  24. public List<Designation> DesigList()      
  25. {      
  26.     List<Designation> lstDesig = new List<Designation>();      
  27.     lstDesig.Add(new Designation { DesigCode = 1, DesigDesc = "Accountant", DeptCode = 1 });      
  28.     lstDesig.Add(new Designation { DesigCode = 2, DesigDesc = "Sr. Accountant", DeptCode = 1 });      
  29.     lstDesig.Add(new Designation { DesigCode = 3, DesigDesc = "Sales Man", DeptCode = 2 });      
  30.     lstDesig.Add(new Designation { DesigCode = 4, DesigDesc = "Manager", DeptCode = 3 });      
  31.     lstDesig.Add(new Designation { DesigCode = 5, DesigDesc = "HR Executive", DeptCode = 5 });      
  32.     return lstDesig;      
  33. }  
Here the GetDesig() methods takes the department code as input parameter and returns the desired designation list.

The following is the code for the view:
  1. @{    
  2.     ViewBag.Title = "DropDown List";    
  3.     Layout = "~/Views/Shared/_Layout.cshtml";    
  4. }    
  5.     
  6. <h2>Index</h2>    
  7.     
  8. <div>    
  9.     <h2>Employee Work Details</h2>    
  10.     <p>    
  11.         <label for="Department">Department:</label>    
  12.         @(Html.Kendo().DropDownList()    
  13.               .Name("cmdDept")    
  14.               .HtmlAttributes(new { style = "width:300px" })    
  15.               .OptionLabel("Select Department...")    
  16.               .DataTextField("DeptName")    
  17.               .DataValueField("DeptCode")    
  18.               .DataSource(source =>    
  19.               {    
  20.                   source.Read(read =>    
  21.                   {    
  22.                       read.Action("GetDeptList", "Custom");    
  23.                   });    
  24.               })    
  25.         )    
  26.     </p>    
  27.     <p>    
  28.         <label for="Designation">Designation:</label>    
  29.         @(Html.Kendo().DropDownList()    
  30.               .Name("cmbDesig")    
  31.               .HtmlAttributes(new { style = "width:300px" })    
  32.               .OptionLabel("Select Designation...")    
  33.               .DataTextField("DesigDesc")    
  34.               .DataValueField("DesigCode")    
  35.               .DataSource(source =>    
  36.               {    
  37.                   source.Read(read => { read.Action("GetDesigList", "Custom").Data("filterDesig"); }).ServerFiltering(true);    
  38.               })    
  39.               .Enable(false)    
  40.               .AutoBind(false)    
  41.               .CascadeFrom("cmdDept")    
  42.         )    
  43.         <script>    
  44.             function filterDesig() {    
  45.                 return {    
  46.                     deptcode: $("#cmdDept").val()    
  47.                 };    
  48.             }    
  49.         </script>    
  50.     </p>    
  51.     
  52.     <p>    
  53.         @(Html.Kendo().DropDownList()    
  54.                       .Name("cmbFilter")    
  55.                       .HtmlAttributes(new { style = "width:90px" })    
  56.                       .OptionLabel("")    
  57.                       .DataTextField("Text")    
  58.                       .DataValueField("Value")    
  59.                       .BindTo(new List<SelectListItem>()    
  60.                       {    
  61.                           new SelectListItem() { Text="All", Value="ALL", Selected=true },    
  62.                           new SelectListItem() { Text="Approved", Value="A" },    
  63.                           new SelectListItem() { Text="On Approval", Value="OA" }    
  64.                       })    
  65.         )    
  66.     </p>    
  67. </div>    
For calling the view, the following is the code for the controller:
  1. public ActionResult DropDownList()    
  2. {    
  3.             return View();    
  4. }