Блог

Я хотел бы выполнить поиск в datagrid в Kendo UI во время ввода в поле ввода над сеткой.

Как я могу это сделать?

Спасибо за любые советы.

Вот пример столбцов:

    $("#grid").kendoGrid({
            dataSource: dataPacket,
            filterable: true,
            pageSize: 10,
            pageable: true,
            sortable: true,
            reorderable: true,
            resizable: true,
            columnMenu: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: ["id", 
                      "username", 
                      "name",
                      "surname", 
                      "email", 
                      {
                          field :"created", 
                          title : "Created at",
                          format: "{0:M/d/yyyy}",
                          parseFormats: ["dd-MM-yyyy"],
                          type: "date"
                      }, 
  

Kendo делает это действительно простым для вас, все, что нужно, это создать фильтр и передать его в источник данных. http://docs .telerik.com/kendo-ui/api/framework/datasource#methods-filter

Однако эту проблему следует разделить на две разные задачи:

а) Зафиксируйте ключевые события в окне поиска, отрегулируйте его и запустите поиск «операция».

б) Создайте фильтр и передайте его источнику данных.

Итак, для регулирования событий клавиатуры нам нужен тайм-аут. Или используйте функцию дроссельной заслонки из underscorejs. Почему? Мы не хотим запускать операцию поиска при каждом нажатии клавиши. Только 250 миллисекунд (это число зависит от вас) после последнего нажатия клавиши.

Вот ваш образец HTML

 <input type="text" id="search" /> 
  

Вот ваш пример сценария. Я оборачиваю все как самозваную функцию, поскольку вы не хотите создавать беспорядок, объявляя глобальные переменные.

 (function($, kendo){

    // ID of the timeout "timer" created in the last key-press
    var timeout = 0;

    // Our search function 
    var performSearch = function(){

        // Our filter, an empty array mean "no filter"
        var filter = [];

        // Get the DataSource
        var dataSource = $('#grid').data('kendoGrid').dataSource;

        // Get and clean the search text.
        var searchText = $.trim($('#search').val());

        // Build the filter in case the user actually enter some text in the search field
        if(searchText){

            // In this case I wanna make a multiple column search so the filter that I want to apply will be an array of filters, with an OR logic. 
            filter.push({
                logic: 'or',
                filters:[
                    { field: 'username', operator: 'contains', value: searchText },
                    { field: 'name', operator: 'contains', value: searchText },
                    { field: 'surname', operator: 'contains', value: searchText },
                    { field: 'email', operator: 'contains', value: searchText }
                ]                  
            });               
        }

        // Apply the filter.
        dataSource.filter(filter); 
    };

    // Bind all the keyboard events that we wanna listen to the search field.
    $('#search').on('keyup, keypress, change, blur', function(){

          clearTimeout(timeout);
          timeout = setTimeout(performSearch, 250);
    });

})(window.jQuery, window.kendo);
  

Итог: убедитесь, что вы используете правильную конфигурацию источника данных.

Если вы настроили serverFiltering = true, эта логика фильтрации будет частью вашего Ajax-запроса, поэтому вашему серверу придется интерпретировать и выполнять фильтрацию на стороне сервера.

В случае, если вы настроили serverFiltering = false, вся эта логика фильтрации будет оцениваться на стороне клиента с использованием JavaScript (чертовски быстро!). И в этом случае схема (какой тип данных ожидается в каждом столбце) также должна быть хорошо настроена.