Cannot read property 'setdatasource' of undefined

See more:

jQuery

Kendo

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:

//this is to bind role when the page is loaded first
           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>