Каскадное раскрывающееся меню кендо с множественным выбором при смене другого раскрывающегося списка кендо с множественным выбором

У меня есть ситуация, когда у меня есть два раскрывающихся списка Kendo с несколькими вариантами выбора, и при выборе первого раскрывающегося списка с несколькими вариантами выбора я хочу заполнить еще один раскрывающийся список с несколькими вариантами выбора.

Первый 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" })
 )

2-й 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:

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

Что я пробовал:

Я пытался выполнить вызов AJAX в функции onFirstDropDownChange, но это не сработало, поскольку DataSource не привязан ко второму раскрывающемуся списку.

Ограничения:

  1. Сначала я не хочу загружать данные в оба раскрывающихся списка.
  2. Значения 2-го раскрывающегося списка зависят от 1-го раскрывающегося списка, это означает, что все значения, выбранные в 1-м раскрывающемся списке, будут отправлены в базу данных через контроллер MVC и будут извлекать данные оттуда.

Что я хочу делать:

Когда я выберу любое значение в первом раскрывающемся списке с множественным выбором, мой второй раскрывающийся список с множественным выбором будет заполнен в соответствии со значениями, выбранными в первом раскрывающемся списке.


jquery asp.net-mvc kendo-ui kendo-asp.net-mvc kendo-multiselect
person Geeky Ninja    schedule 15.06.2017    source источник
comment
Вы уже читали документы здесь: docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/? Можете ли вы показать функцию JS внутри onFirstDropDownChange & onSecondDropDownChange?   -  person Tetsuya Yamamoto    schedule 15.06.2017
comment
Я отредактировал свой второй раскрывающийся код, в котором я пытаюсь получить данные с помощью AJAX, но проблема в том, что этот код срабатывает при загрузке страницы, и в это время 1-й раскрывающийся список не имеет никакого значения, поэтому данные не извлекаются из. В onFirstDropDownChange я хочу вызвать вызов ajax или хочу обновить часть моей веб-страницы, где есть второй раскрывающийся список. И да, я уже прошел по ссылке Telerik, в этом примере данные предварительно заполнены в обоих раскрывающихся списках, что мне не нужно.   -  person Geeky Ninja    schedule 15.06.2017
comment
Если для autoBind установлено значение false, раскрывающийся список должен ждать, пока не будет щелкнуть раскрывающийся список или пока не будет запущено read() вручную для источника данных. Возможно, вам придется отключить второй множественный выбор до тех пор, пока выбор не будет сделан в первом, тогда в вашей функции change onFirstDropDownChange вы можете включить второй множественный выбор и вызвать _ 5_. (secondMultiselect.dataSource.read();)   -  person Sandman    schedule 15.06.2017
comment
Кроме того, вам необходимо объявить второй DDL dataSource клиентской функцией, например. var projectDataSource = new kendo.data.DataSource({ type: "odata", serverFiltering: true, transport: { read: { url: "@Url.Action(...)", }, }}); Поскольку автоматическая привязка отключена, источники данных для обоих DDL следует связывать и читать вручную во время click или change событий.   -  person Tetsuya Yamamoto    schedule 15.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я решил эту проблему с помощью вызова AJAX, ниже приведены подробные инструкции:

  1. Во-первых, я прикрепил одну функцию JavaScript onFirstDropDownChange к FirstDropDown.
  2. Затем в функции 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 }));

Надеюсь, это поможет вам, если вы пытаетесь найти подобное решение.

person Geeky Ninja    schedule 04.07.2017