Hi I have a kendo dropdown as follows:
@(Html.Kendo().DropDownList()
.Name("ddlRoleID")
.OptionLabel("Select Role")
.HtmlAttributes(new { @style = " float: left; text-align: left; width: 59%;" })
.DataTextField("RoleName")
.DataValueField("RoleID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("BindRole", "WebUser");
});
})
)
the data is populated using ajax request and the datas are shown also as this:
var ddl = $('#ddlRoleID').data("kendoMultiSelect");
$.ajax({
url: "/WebUser/BindRole",
type: "Post",
async: true,
success: function (listItems) {
ddl.setDataSource(listItems);
ddl.refresh();
}
});
The controller method is as this:
public JsonResult BindRole()
{
using (myEntities ObjEntities = new InternalDashboardEntities())
{
var roleList = ObjEntities.WebUserRole.Select(id => new { id.RoleID, id.RoleName }).AsEnumerable()
.Select(x => new
{
RoleID = x.RoleID,
RoleName = x.RoleName
});
return Json(roleList.ToList(), JsonRequestBehavior.AllowGet);
}
}
The dropdown is populated but when I do F12, i can see the error saying cannot read setDataSource. Is this issue arising due to incorrect jquery resources listed in layout file or something else. Your help would be appreciated.
Thanks
What I have tried:
jquery in layout has this strucutre.
<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2016.1.406/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2016.1.406/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>