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:

public class Department
{
        public int DeptCode { get; set; }
        public string DeptName { get; set; }
}


public class Designation
{
        public int DesigCode { get; set; }
        public string DesigDesc { get; set; }
        public int DeptCode { get; set; }
 }

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.

public JsonResult GetDeptList()
{
    List<Department> lstDept = DeptList();
    return Json(lstDept, JsonRequestBehavior.AllowGet);
}

public List<Department> DeptList()
{
    List<Department> lstDept = new List<Department>();
    lstDept.Add(new Department { DeptCode = 1, DeptName = "Account" });
    lstDept.Add(new Department { DeptCode = 2, DeptName = "Sales" });
    lstDept.Add(new Department { DeptCode = 3, DeptName = "Marketing" });
    lstDept.Add(new Department { DeptCode = 4, DeptName = "Admin" });
    lstDept.Add(new Department { DeptCode = 5, DeptName = "HR" });
    return lstDept;
}

public JsonResult GetDesigList(int? DeptCode)
{
    List<Designation> lstDesig = DesigList().Where(s => s.DeptCode == DeptCode).ToList();
    return Json(lstDesig, JsonRequestBehavior.AllowGet);
}

public List<Designation> DesigList()
{
    List<Designation> lstDesig = new List<Designation>();
    lstDesig.Add(new Designation { DesigCode = 1, DesigDesc = "Accountant", DeptCode = 1 });
    lstDesig.Add(new Designation { DesigCode = 2, DesigDesc = "Sr. Accountant", DeptCode = 1 });
    lstDesig.Add(new Designation { DesigCode = 3, DesigDesc = "Sales Man", DeptCode = 2 });
    lstDesig.Add(new Designation { DesigCode = 4, DesigDesc = "Manager", DeptCode = 3 });
    lstDesig.Add(new Designation { DesigCode = 5, DesigDesc = "HR Executive", DeptCode = 5 });
    return lstDesig;
}

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:

@{
    ViewBag.Title = "DropDown List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<div>
    <h2>Employee Work Details</h2>
    <p>
        <label for="Department">Department:</label>
        @(Html.Kendo().DropDownList()
              .Name("cmdDept")
              .HtmlAttributes(new { style = "width:300px" })
              .OptionLabel("Select Department...")
              .DataTextField("DeptName")
              .DataValueField("DeptCode")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetDeptList", "Custom");
                  });
              })
        )
    </p>
    <p>
        <label for="Designation">Designation:</label>
        @(Html.Kendo().DropDownList()
              .Name("cmbDesig")
              .HtmlAttributes(new { style = "width:300px" })
              .OptionLabel("Select Designation...")
              .DataTextField("DesigDesc")
              .DataValueField("DesigCode")
              .DataSource(source =>
              {
                  source.Read(read => { read.Action("GetDesigList", "Custom").Data("filterDesig"); }).ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("cmdDept")
        )
        <script>
            function filterDesig() {
                return {
                    deptcode: $("#cmdDept").val()
                };
            }
        </script>
    </p>

    <p>
        @(Html.Kendo().DropDownList()
                      .Name("cmbFilter")
                      .HtmlAttributes(new { style = "width:90px" })
                      .OptionLabel("")
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(new List<SelectListItem>()
                      {
                          new SelectListItem() { Text="All", Value="ALL", Selected=true },
                          new SelectListItem() { Text="Approved", Value="A" },
                          new SelectListItem() { Text="On Approval", Value="OA" }
                      })
        )
    </p>
</div>

For calling the view, the following is the code for the controller:

public ActionResult DropDownList()
{
            return View();
}