Search All Columns in KendoUI Grid

Question

I am trying to create a search box for a kendoUI grid. I have been able to get a start on doing a search based on one field however I would like the value in my search box to search all columns in the grid.

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

        }

See js fiddle example

I tried using the or logic operator here: jsfiddle.net however I can't seem to get it to work.... (see or logic button)

Answer 1

I think that you should say eq to fee or eq to fi if you want to match one of the two conditions.

I´ve slightly modified your fiddle to show it. If you type on the search box you will filter records matching either ProductName column or 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
            }
        ]
    });
});

IMPORTANT: I have had to update jQuery version to 1.8.2 for making it work and just in case I have updated KendoUI, as well, to the latest version.

Answer 2

If you don't want to have to worry about column names you can use this code instead. It will work on any grid and will search all columns that are marked as filterable without specifying hard coded column names. Also, I added additional events so that if someone were to copy and paste a search query the event would be called. (This also requires jQuery 1.83 or higher). I created this code after I switched from jQuery Datatables plugin to Kendo UI Grid. I love Kendo but really missed the global search textbox offered by DataTables. I include this code on all my Kendo Grids.

     $("#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 });
    });

Answer 3

OnaBai's answer doesnt work like dataTables does data tables treats spaces as and across fields. In the fiddle if you type "chef 36" it show no results dataTables search would show the row that has a productid of 5 since it has chef in one column and the 36 in another. the correct code would look like this 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({});
    }

});