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. }
  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. }
  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. }
  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. }
  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. }
  6. <h2>Index</h2>
  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>
  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. }