In this article I will explain how to Bind
data to a Dropdown list using Kendo UI controls with MVC 4.
Binding data to a drop down list using
kendo UI controls and MVC (Model View Controller) architecture
@(Html.Kendo().DropDownList()
.Name("ddlEmployeeDetails")
.HtmlAttributes(new { style = "width:150px" })
.OptionLabel("Select
EmployeeName")
.DataTextField("EmployeeName")
.DataValueField("RegistrationID")
.Events(events => events.Change("DealerSelectChangeInTeleCaller"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAllEmployeeDetails", "Reports");
})
.ServerFiltering(true);
})
)
The data source defines the
source from where we bind the data to drop down list.
In read.Action the name “GetAllEmployeeDetails” is the name of the method.
“Reports” is the controller where the method is defined.
//An event in controller which binds the
data to Dropdown list
public ActionResult GetAllTheEmployeesIntoGrid([DataSourceRequest] DataSourceRequest request)
{
SSV_Entities2 northwind = new SSV_Entities2();
return
Json(northwind.GetAllEmployeeDetails().ToList().ToDataSourceResult(request));
}
Cascading drop down list
@(Html.Kendo().DropDownList()
.Name("ddlpaymentState")
.HtmlAttributes(new { style = "width:200px" })
.OptionLabel("Select State..")
.DataTextField("StateName")
.DataValueField("StateID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("StateName", "Home");
});
})
)
<script>
function filterDistrictsPayment() {
return {
ddlState: $("#ddlPaymentState").val()
};
}
</script>
This is the first drop down
list. We will write a selected change event to this dropdown list
The StateName method of this
dropdown list is
public JsonResult StateName()
{
SSV_Entities2 northwind = new SSV_Entities2();
return Json(northwind.tblStateDetails.Select(c
=> new { StateID = c.StateID, StateName =
c.StateName }), JsonRequestBehavior.AllowGet);
}
The second drop down list is
@(Html.Kendo().DropDownList()
.Name("ddlPaymentDistricts")
.HtmlAttributes(new { style = "width:150px" })
.OptionLabel("Select
District...")
.DataTextField("DistrictName")
.DataValueField("DistrictID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadeDistrict", "Home")
.Data("filterDistrictsPayment");
})
.ServerFiltering(true);
})
.Events(e => e.Change("OnChangeInTelecallerDistrict"))
.Enable(false)
.AutoBind(false)
.CascadeFrom("ddlpaymentState")
)
<script>
function filterDistrictsPayment() {
return {
ddlState: $("#ddlPaymentState").val()
};
}
</script>
The districts appear in this dropdown
list based on the selection made in the state list.
public JsonResult GetCascadeDistrict(string ddlState)
{
SSV_Entities2 northwind = new SSV_Entities2();
var d = from c in northwind.tblDistrictDetails orderby c.DistrictName select c;
var District = d.AsQueryable();
if (!string.IsNullOrEmpty(ddlState))
{
int cat = Convert.ToInt32(ddlState);
District = District.Where(p
=> p.StateID == cat);
}
return Json(District.Select(p => new { DistrictID = p.DistrictID,
DistrictName = p.DistrictName }), JsonRequestBehavior.AllowGet);
}
This method is used to bind
the data to the drop down list
Nice note for beginners....
ReplyDelete