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)

I tried using the logic operator however it does not work...$("#grid").data("kendoGrid").dataSource.filter({ logic: "or", filters: [ {field: "ProductName", operator: "ne", value: "fee"}, {field: "ProductName", operator: "ne", value: "fi"} ] }); — BlueBird, Dec 18 '12 at 20:29

OnaBai · Accepted Answer · 2012-12-18T22:37:37.303

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.

TroySteven · Answer 2 · 2013-11-27T21:30:09.870

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 });
    });

That's exactly what I did, but also now I am trying to filter hidden columns, that only exist in the datasource, so now I will probably have to change to another approach — Ferran Salguero, Feb 25 '14 at 12:56
Great work Mat.. I want to shift to Kendo UI grid as well from Datatables grid, But this common search feature was stopping me from doing so all these days. Now this helps me to completely transit to Kendo UI grid. thanks for your work — Rajshekar Reddy, Jan 08 '16 at 07:08

score 4 · Answer 3 · answered Jan 31 '14 at 23:59

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({});
    }

});

Search All Columns in KendoUI Grid

3 Answers3

Linked