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();
}