Cascading Dropdown List using Asp.Net and Kendo UI

In this blog you will learn about Cascading Dropdown Lists using ASP.Net and the 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();
}