Search any kendo grid field regardless of it's column name

Question

Is it possible to search all columns without listing them individually? My problem is new columns will be added on a regular basis and I don't want to have to come back and add the column header each time. For example in the code below instead of listing "Name", "Phone", "Email", ... etc. is there some code I could use to basically say if the column exists to include it in the filter?

Thanks in advance!

$(document).ready(function () {
    $("#FieldFilter1").keyup(function () {

        var value = $("#FieldFilter1").val();
        grid = $("#UnclaimedLeadsGrid").data("kendoGrid");

        if (value) {
            grid.dataSource.filter({
                logic: "or",
                filters: [
                    { field: "Name", operator: "contains", value: value },
                    { field: "Phone", operator: "contains", value: value },
                    { field: "Email", operator: "contains", value: value },
                    { field: "Address", operator: "contains", value: value },
                    { field: "City", operator: "contains", value: value },
                    { field: "State", operator: "contains", value: value },
                    { field: "ZipCode", operator: "contains", value: value },
                    { field: "Subject", operator: "contains", value: value },
                    { field: "Message", operator: "contains", value: value },
                    { field: "FirstName", operator: "contains", value: value },
                    { field: "LastName", operator: "contains", value: value }
                ]
            });
        } else {
            grid.dataSource.filter({});
        }
    });
});

Answer 1

This sounds like a job for the Search Panel.

You add the Search Panel as a toolbar option to the grid:

toolbar: ["search"]

The search box will appear in the top right of the grid. The search will run a "contains" filter on all of the columns in your grid.

Here is the example from the demo page linked above:

<script>
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: 550,
            toolbar: ["search"],
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                template: "<div class='customer-photo'" +
                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                    "<div class='customer-name'>#: ContactName #</div>",
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });
    });
</script>