New to Kendo UI for jQuery? Download free 30-day trial

    Search Panel with Multiple Values

    Environment

    Product Progress® Kendo UI® Grid for jQuery

    Description

    This sample demonstrates how you can use multiple values in the built-in Search Panel of the Grid, achieving multi-column and multi-value filtering with a single textbox input.

    The separation logic of the different values can be controlled the following variable:

    var separator = ",";

    Solution

    Open In Dojo
    
        <div id="grid"></div>
        <script>
    
          kendo.ui.Grid.fn._toolbarOrg = kendo.ui.Grid.fn._toolbar;
          kendo.ui.Grid.fn._toolbar = function(){
            this._toolbarOrg();
    
            var that = this;
            var container = this.wrapper.find(".k-grid-toolbar");
            container.off("input",".k-grid-search input").on("input",".k-grid-search input",function(e) {
    
              var input = e.currentTarget;
              clearTimeout(that._searchTimeOut);
              that._searchTimeOut = setTimeout(function () {
                that._searchTimeOut = null;
                var options = that.options;
                var searchFields = options.search ? options.search.fields : null;
                var expression = { filters:[], logic:"or" };
                var separator = ",";
                var values = input.value.split(separator);
    
                if (!searchFields) {
                  searchFields = getColumnsFields(options.columns);
                }
    
                if (that.dataSource.options.endless) {
                  that.dataSource.options.endless = null;
                  that._endlessPageSize = that.dataSource.options.pageSize;
                }
    
                if (values.length) {
                  for (var i = 0; i < searchFields.length; i++) {
    
                    for (var k = 0; k < searchFields.length; k++) {
                      if(values[k] && values[k].trim()){
                        expression.filters.push({ field: searchFields[i], operator: "contains", value: values[k].trim() });
                      }
                    }
                  }
                } else {
                  expression = {};
                }
    
                that.dataSource.filter(expression);
    
              }, 300);
            });
          };
    
          $("#grid").kendoGrid({
            columns: [
              { field: "name" },
              { field: "age" },
              { field: "country"}
            ],
            dataSource: [ { name: "Jane", age: 30, country: "Germany" }, { name: "John", age: 33, country: "Germany" }],
            toolbar:["search"],
            search: {
              fields: ["name", "age", "country"] // Or, specify multiple fields by adding them to the array, e.g ["name", "age"]
            }
          });
    
          function getColumnsFields(columns) {
            return $.map(columns, function(column){
              return column.field;
            });
          }
        </script>
    
    In this article