Cascade Multi Select Kendo Dropdown on change of another Multi Select Kendo Dropdown

Question

I have a situation where I have two multi select Kendo dropdowns and on select of first multi select dropdown I wants to populate another multi select dropdown.

1st MultiSelect Kendo DD:

@(Html.Kendo().MultiSelect()
   .Name("FirstDropDown").Placeholder("-- Select --")
   .BindTo(new SelectList(Model.BusinessData, "Id", "Name"))
   .Enable(true)
   .AutoBind(false).Events(e => e.Change("onFirstDropDownChange"))
   .HtmlAttributes(new { style = "width: 300px" })
 )

2nd MultiSelect Kendo DD:

 @(Html.Kendo().MultiSelect()
   .Name("project")
   .Placeholder("-- Select --")
   .DataTextField("ProjectName")
   .DataValueField("Id")
   .Filter(FilterType.Contains)
   .DataSource(source =>
    {
       source.Read(read =>
       {
          read.Action("GetProjectByBu", "Reports").Data("filterProjects");
       })
    .ServerFiltering(true);
    })
   .Enable(true)
   .AutoBind(false).Events(e => e.Change("onProjectChange"))
   .HtmlAttributes(new { style = "width: 300px" })
 )

JS Code:

function filterProjects() {
    return {
        buID: $("#FirstDropDown").data("kendoMultiSelect").input.val()
    };
}

What I have tried:

I was trying to make AJAX call in onFirstDropDownChange function but that was not working as DataSource is not binding with 2nd dropdown.

Constraints:

1. I doesn't want to load data on both dropdowns at first.
2. Values of 2nd dropdown is dependent upon 1st dropdown, means all values selected in 1st dorpdown will be sent to database through MVC Controller and fetch the data from there.

What I wants to do:

When I will select any value in 1st multi select dropdown my 2nd multi select dropdown will be populated as per values selected in 1st dropdown.

Answer 1

I have resolve this problem by using AJAX call, below are the detailed steps:

1. First, I have attached one JavaScript function onFirstDropDownChange on FirstDropDown.
2. Then in onFirstDropDownChange js function, I get all selected values in first dropdown and make an synchronous AJAX call and bind data in 2nd drop down, below is code for same.

var multiselect = $("#FirstDropDown").data("kendoMultiSelect");

var i; var stringArray = new Array();
    for (i = 0; i < multiselect.dataItems().length; i++)
    {
        stringArray[i] = parseInt(multiselect.dataItems()[i].Value,32);
    }

var postedData = { businessIds: stringArray };
var projectDataSource;

jQuery.ajaxSettings.traditional = true;

//AJAX Call
$.ajax({
    url: '/Reports/GetProjectByBu',
    dataType: 'json',
    data: postedData,
    type: "GET",
    contentType: 'application/json; charset=utf-8',
    async: false,
    traditional: true,
    success: function (data) {
        projectDataSource = data;
    }
});

//Update DataSource of 2nd dropdown
$("#project").data("kendoMultiSelect").setDataSource(new kendo.data.DataSource({ data: projectDataSource }));

Hope this will help you, if you are trying to looking for similar kind of solution.