How do i search all columns of kendo grid at the same time?

Question

I have tried what this person has done, and it works flawlessly, thank you for this post:

Search All Columns in KendoUI Grid

however, the problems I am having now is that when you try to search more than one column at a time, as soon as you space to a new word it no longer works as well.

how do I tell it to ignore the spaces and keep searching contains?

so if you search "Verizon LTE" when I search by itself, "Verizon" or "LTE" it works to search like it should, but when they're together, it returns zero results, instead of including both items.

this is my current search, and is the same style as the link above

$(document).ready(function () {



//change event
$("#search").keyup(function () {
    var val = $('#search').val();
    $("#grid").data("kendoGrid").dataSource.filter({
        logic: "or",
        filters: [
            {
                field: "ServiceProviderName",
                operator: "contains",
                value: val
            },
            {
                field: "ManufacturerName",
                operator: "contains",
                value: val
            },
            {
                field: "ModelNumber",
                operator: "contains",
                value: val
            },
            {
                field: "ModelName",
                operator: "contains",
                value: val
            },
            {
                field: "Technology",
                operator: "contains",
                value: val
            },
            {
                field: "OSTypeName",
                operator: "contains",
                value: val
            }
        ]
    });


});
});

is this a limitation of Kendo grid filtering?

Answer 1

When you filter, by default KendoUI is trying to match the entire phrase that you type. So if you put in "Verizon" it will match anything that contains "Verizon". If you put in "LTE" it will match anything that contains "LTE". However, when you put in "Verizon LTE" it will match anything containing "Verizon LTE", whereas it seems like you want it to match "Verizon", "LTE", and "Verizon LTE" (which will happen anyway when it matches on the first two.

In order for this type of filtering to happen, you will need to pre-process val in your filtering function in order to create an array of search terms, using space as the token splitter, and then perform your filter on each member of the array and return the aggregate result.

So, in order to split your search term up by spaces:

var val = $("#search").val().split(" ");

This will make val an array rather than a literal value, so you'll need to generate your filter array based on each value in this array. There are a number of ways you could do it, but here's one approach:

filters: getFieldFilter("ServiceProviderName", "contains", val)
.concat(getFieldFilter("ManufacturerName", "contains", val))
.concat(...);

...where getFieldFilter might look like this:

function getFieldFilter(field, operator, values) {
   var ret = [];
   for(var i = 0; i < values.length; i++) {
      ret.push(
          {
             field: field,
             operator: operator,
             value: values[i]
          });
    }
    return ret;
}