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

Question

我有两个 multi select Kendo 下拉菜单，在第一个 multi select 下拉菜单的 select 上，我想填充另一个 multi select 下拉列表。

第一个多选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" })
 )

第二次多选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代码：

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

我试过的：

我试图在 onFirstDropDownChange 函数中进行 AJAX 调用，但它不起作用，因为 DataSource 未与第二个下拉列表绑定。

约束条件：

我不想一开始就在两个下拉菜单上加载数据。
第二个下拉列表的值取决于第一个下拉列表，这意味着在第一个 dorpdown 中编辑的所有值 select 将通过 MVC 控制器发送到数据库并从那里获取数据。

我想做的事情：

当我 select 第一个多 select 下拉列表中的任何值时，我的第二个多 select 下拉列表将根据第一个下拉列表中 selected 的值填充。

Answer 1

我已经使用 AJAX 调用解决了这个问题，下面是详细步骤：

首先，我在 FirstDropDown 上附加了一个 JavaScript 函数 onFirstDropDownChange。
然后在 onFirstDropDownChange js 函数中，我在第一个下拉列表中获取所有选定的值并进行同步 AJAX 调用并在第二个下拉列表中绑定数据，下面是相同的代码。

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 }));

如果您正在寻找类似的解决方案，希望这对您有所帮助。

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

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

jquery

asp.net-mvc

kendo-ui

kendo-asp.net-mvc

kendo-multiselect