Пользовательский интерфейс Kendo: как получить ввод текста из Multiselect

Я пытаюсь использовать Kendo UI MultiSelect для выбора некоторых вещей из API. API не вернет все элементы, потому что их слишком много. Он вернет только те, которые содержат searchTerm.

Я пытаюсь понять, как отправить вводимый текст в мультиселект пользовательского интерфейса Kendo. Когда я говорю вводимый текст, я имею в виду то, что пользователь ввел перед тем, как выбрать что-либо из списка. Этот текст должен быть передан в параметр dataSource transport.read.

См. этот Codepen, чтобы понять https://codepen.io/emzero/pen/NYPQWx?editors=1011

Примечание. В приведенном выше примере фильтрация не выполняется. Но если вы наберете «bre», консоль должна вывести searching bre.


person empz    schedule 10.03.2018    source источник
comment
Не могли бы вы сообщить мне, решит ли предоставленный ответ вашу проблему?   -  person David Lebee    schedule 12.03.2018


Ответы (1)


Используйте свойство данных в параметрах транспорта чтения, это позволяет вам изменить отправляемый запрос, возвращая объект, который позже будет сериализован в запросе.

по умолчанию чтение - это запросы GET, поэтому они будут добавлены к строке запроса вашего указанного URL-адреса.

Если бы это был POST, он был бы добавлен к значениям POST.

<div id="multiselect"></div>
  <script>
    $('#multiselect').kendoMultiSelect({
        dataTextField: 'first_name',
        dataValueField: 'id',
        filter: "startswith",
        dataSource: {
          serverFiltering: true, // <-- this is important to enable server filtering
          schema: {
                data: 'data'
          },
            transport: {
            read: {
                url: 'https://reqres.in/api/users',
              // this callback allows you to add to the request.
              data: function(e) {
                // get your widget.
                let widget = $('#multiselect').data('kendoMultiSelect');
                // get the text input
                let text = widget.input.val(); 
                // what you return here will be in the query string
                return {
                    text: text
                };
              }
           }
          }
        }
    });
  </script>
person David Lebee    schedule 11.03.2018
comment
Я не знаю, почему это делается через данные, а не через parameterMap, но вот ссылка на read.data - docs.telerik.com/kendo-ui/api/javascript/data/datasource/ - person jaycer; 13.03.2018
comment
@jaycer kendo использует карту параметров для других преобразований, и я полагаю, что они вызывают обработчик данных во время карты параметров. Если вы посмотрите на свойство типа dataSourceTransport, вы увидите, что они используют карту параметров для изменения запросов, исходящих от транспорта: { odata: { parameterMap: function (options, type, useVersionFour) { var params, value, option, dataType; опции = опции || {}; // больше кода здесь. } } } - person David Lebee; 14.03.2018