Поиск всех столбцов в сетке KendoUI

Я пытаюсь создать окно поиска для сетки kendoUI. Мне удалось начать поиск по одному полю, но я хотел бы, чтобы значение в моем поле поиска искало все столбцы в сетке.

function() {
            grid.data("kendoGrid").dataSource.filter({
                field: "ProductName",
                operator: "contains",
                value: $('#category').val()
            });

        }

См. пример js скрипка

Я попытался использовать логический оператор здесь: jsfiddle.net, однако я не могу заставить его работать... ( см. или логическую кнопку)

Ответ 1

Я думаю, что вы должны сказать eq до fee или eq до fi, если вы хотите соответствовать одному из двух условий.

Я немного изменил ваш fiddle, чтобы показать его. Если вы введете в поле поиска, вы будете фильтровать записи, соответствующие столбцу ProductName или QuantityPerUnit.

//change event
$("#category").keyup(function () {
    var val = $('#category').val();
    $("#grid").data("kendoGrid").dataSource.filter({
        logic  : "or",
        filters: [
            {
                field   : "ProductName",
                operator: "contains",
                value   : val
            },
            {
                field   : "QuantityPerUnit",
                operator: "contains",
                value   : val
            }
        ]
    });
});

ВАЖНО: мне пришлось обновить версию jQuery до версии 1.8.2, чтобы она работала, и на всякий случай я обновил KendoUI и до последней версии.

Ответ 2

Если вы не хотите беспокоиться о именах столбцов, вы можете использовать этот код. Он будет работать в любой сетке и будет искать все столбцы, помеченные как фильтруемые, без указания имен жестко закодированных столбцов. Кроме того, я добавил дополнительные события, чтобы, если кто-то должен был скопировать и вставить поисковый запрос, событие будет вызываться. (Для этого также требуется jQuery 1,83 или выше). Я создал этот код после того, как переключился с плагина JQuery Datatables на Kendo UI Grid. Я люблю Kendo, но действительно пропустил текстовое поле глобального поиска, предлагаемое DataTables. Я включаю этот код во все мои сетки Кендо.

     $("#category").on("keypress blur change", function () {
        var filter = { logic: "or", filters: [] };
        $searchValue = $(this).val();
        if ($searchValue) {
            $.each($("#grid").data("kendoGrid").columns, function( key, column ) {
                if(column.filterable) { 
                    filter.filters.push({ field: column.field, operator:"contains", value:$searchValue});
                }
            });
        }
        $("#grid").data("kendoGrid").dataSource.query({ filter: filter });
    });

Ответ 3

Ответ OnaBai не работает, как dataTables. Таблицы данных обрабатывают пробелы как поля, так и поля. В скрипке, если вы наберете "шеф-повар 36", он не будет показывать результаты поиска данных. Таблицы показывают строку, которая имеет productid из 5, поскольку у нее есть шеф-повар в одном столбце, а 36 в другом. правильный код будет выглядеть следующим образом http://jsfiddle.net/Naka3/38/.

    $("#category").keyup(function () {
    var selecteditem = $('#category').val();
    var kgrid = $("#grid").data("kendoGrid");
    selecteditem = selecteditem.toUpperCase();
    var selectedArray = selecteditem.split(" ");
    if (selecteditem) {
        //kgrid.dataSource.filter({ field: "UserName", operator: "eq", value: selecteditem });
        var orfilter = { logic: "or", filters: [] };
        var andfilter = { logic: "and", filters: [] };
        $.each(selectedArray, function (i, v) {
            if (v.trim() == "") {
            }
            else {
                $.each(selectedArray, function (i, v1) {
                    if (v1.trim() == "") {
                    }
                    else {
                        orfilter.filters.push({ field: "ProductName", operator: "contains", value:v1 },
                                              { field: "QuantityPerUnit", operator: "contains", value:v1});
                        andfilter.filters.push(orfilter);
                        orfilter = { logic: "or", filters: [] };
                    }

                });
            }
        });
        kgrid.dataSource.filter(andfilter);
    }
    else {
        kgrid.dataSource.filter({});
    }

});