Edit this page

Filter all columns with single textbox

Environment

Product Grid for ProgressĀ® Kendo UIĀ®
Progress Kendo UI version Created with version 2017.3.1026

Description

I want the users to search through all columns of the grid using one single input field.

Solution

Within the input event handler of the text box, build a filter query using the value of the textbox. Then filter the data source using the filter method.


 <div id="example">

      Filter all fields:
      <input id='filter' class='k-textbox'/>
      <div id="grid"></div>

      <script>        

        function isNumeric(n) {
          return !isNaN(parseFloat(n)) && isFinite(n);
        }

        $(document).ready(function () {
          var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
              dataSource = new kendo.data.DataSource({
                transport: {
                  read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                  },
                  update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    dataType: "jsonp"
                  },
                  destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                  },
                  create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    dataType: "jsonp"
                  },
                  parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                      return {models: kendo.stringify(options.models)};
                    }
                  }
                },
                batch: true,
                pageSize: 20,
                schema: {
                  model: {
                    id: "ProductID",
                    fields: {
                      ProductID: { editable: false, nullable: true },
                      ProductName: { type:"string", validation: { required: true } },
                      UnitPrice: { type: "number", validation: { required: true, min: 1} },
                      Discontinued: { type: "boolean" },
                      UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                  }
                }
              });

          $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            columns: [
              "ProductName",
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
              { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
              { field: "Discontinued", width: "120px"}]
          });

          $('#filter').on('input', function (e) {
            var grid = $('#grid').data('kendoGrid');
            var columns = grid.columns;


            var filter = { logic: 'or', filters: [] };
            columns.forEach(function (x) {
              if (x.field) {
                debugger
                var type = grid.dataSource.options.schema.model.fields[x.field].type;
                if (type == 'string') {
                  filter.filters.push({
                    field: x.field,
                    operator: 'contains',
                    value: e.target.value
                  })
                }
                else if (type == 'number') {
                  if (isNumeric(e.target.value)) {
                    filter.filters.push({
                      field: x.field,
                      operator: 'eq',
                      value: e.target.value
                    })

                  }              


                } else if (type == 'date') {
                  var date = new Date(e.target.value)

                  if (!isNaN(date.getTime()) ) {
                    filter.filters.push({
                      field: x.field,
                      operator: 'eq',
                      value: date
                    })
                  }
                }
              }

            })
            grid.dataSource.filter(filter);
          })
        });

      </script>
    </div>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy