How do I bind multiselect kendo dropdown with values for department after I select company

See more:

jQuery

Kendo

Hi Guys,
I was trying to bind department multiselect kendo ui with company selected. Here is what I have done.


this is my company dropdown populated with menus from db

<ul class="dropdown-menu" id="company-dropdown-menu"></ul>

$.ajax({
            url: "GetAllCompanies",
            type: "Get",
            async: true,
            success: function (data) {
                $("#company-dropdown-menu").append(data);
            }
        });

public JsonResult GetAllCompanies()
        {
            var companies = cmnObj.GetAllCompany();

            string dynamicCompanyList = "";
            foreach (var company in companies)
            {
                dynamicCompanyList += "<li><a id=" + company.CompanyID + ">" + company.CompanyDesc + "</a><li>";
            }

            return Json(dynamicCompanyList, JsonRequestBehavior.AllowGet);
        }

Now after I select company and try to bind departments in kendo multiselect, I can't bind to it.

$("#company-dropdown-menu").on("click", "li a", function () {
            var companyID = $(this).attr('id');
            //assigning the value of selected company to the chosen company span tag
            $("#btnChosenCompany").text($(this).text());

            var ddl = $('#Department_dropdown').data("kendoMultiSelect");

            $.ajax({
                url: "GetDepartment",
                type: "Get",
                async: true,
                data: { CompanyId: companyID },
                success: function (listItems) {
                    ddl.setDataSource(listItems);
                    ddl.refresh();
                }
            });
        });

public JsonResult GetDepartments(string CompanyId)
{
    List<Department> AllDepartments = new List<Department>();
    int CompanyID = int.Parse(CompanyId);
    if (CompanyID > 0)
    {
        AllDepartments = cmnObj.GetDepartmentsByCompany(CompanyID);
    }

    return Json(AllDepartments, JsonRequestBehavior.AllowGet);
}

the kendo multiselect looks like this

@(Html.Kendo().MultiSelectFor(id => id.DepartmentIdsFk)
.Name("DepartmentIdsFk")
.HtmlAttributes(new { @style = " float: left; text-align: left; width:500px;", @id = "Department_dropdown" })
.DataTextField("DepartmentName")
.DataValueField("DepartmentID")
.Placeholder("Select Department..")
.AutoBind(true)
.BindTo(Model.Departments.Select(id => new { id.DepartmentName, id.DepartmentID }))
)


can someone help me with this.

thanks

What I have tried:

@(Html.Kendo().MultiSelectFor(id => id.DepartmentIdsFk)
.Name("DepartmentIdsFk")
.HtmlAttributes(new { @style = " float: left; text-align: left; width:500px;", @id = "Department_dropdown" })
.DataTextField("DepartmentName")
.DataValueField("DepartmentID")
.Placeholder("Select Department..")
.AutoBind(true)
.BindTo(Model.Departments.Select(id => new { id.DepartmentName, id.DepartmentID }))
)