I am trying to bind a list of SelectList
Items to a Kendo dropdown in jquery using dropDown.setDataSource(result)
event. But the issue is, the data displayed in the drop-down is showing as [object object]
.
$(document).ajaxStop(function () {
var exportTypeDropDown = $("#exportTypeDropDown").data("kendoDropDownList");
if (dropDownLoaded == false && exportTypeDropDown!=null) {
dropDownLoaded = true;
var url = "@Url.Action("GetExportTypes", UiControls.ControllerName)";
$.ajax({
url: url,
type: "POST",
traditional: true,
success: function (result) {
exportTypeDropDown.setDataSource(result);
}
});
}
});
Try this,
This is just example,
@Html.DropDownList("CustomerId", (SelectList)ViewBag.CustomerNameID, "--Select--")
@(Html.Kendo().DropDownList()
.Name("ddlSearchPNResults")
.DataTextField("Text")
.DataValueField("Value")
.AutoBind(false)
.CascadeFrom("CustomerId"))
Script
$(document).ready(function () {
$("#CustomerId").change(function () {
var ddl = $('#ddlSearchPNResults').data("kendoDropDownList");
var Id = $("#CustomerId").val();
$.ajax({
url: '@Url.Action("GetCustomerNameWithId", "Test")',
type: "Post",
data: { CustomerNameId: Id },
success: function (listItems) {
ddl.setDataSource(listItems);
}
});
});
});
Controller
public JsonResult GetCustomerNameWithId(string CustomerNameId)
{
int _CustomerNameId = 0;
int.TryParse(CustomerNameId, out _CustomerNameId);
var listItems = GetCustomerNameId(_CustomerNameId).Select(s => new SelectListItem { Value = s.CID.ToString(), Text = s.CustomerName }).ToList<SelectListItem>();
return Json(listItems, JsonRequestBehavior.AllowGet);
}
It's perfectly working.
That is because kendo doesn't know which property of SelectListItem
s object you want to bind with dropdown Value
and Text
.
$('#exportTypeDropDown').kendoDropDownList({
dataTextField: "Text",
dataValueField: "Value",
autoBind: false
});
Make sure you are doing this before setting its dataSource
.