Edit this page

Create a filter widget with multiple filter criterion

Environment

Product Progress Kendo UI Grid
Progress Kendo UI version 2018.1.117

Description

How can I create a filter widget with multiple filter criterion?

Solution

Within the filterMenuInit event handler add the required number of inputs and when the click event of the submit button is clicked build the filter query and filter the data source using the flter method.

    <h1>Ship Name column has custom filte UI</h1>
    <div id="example">
      <div id="grid"></div>
      <script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShipCity: { type: "string" }
                  }
                }
              },
              pageSize: 20,
              serverPaging: true,
              serverFiltering: true,
              serverSorting: true
            },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [{
              field:"OrderID",
              filterable: false
            },
                      "Freight",
                      {
                        field: "OrderDate",
                        title: "Order Date",
                        format: "{0:MM/dd/yyyy}"
                      }, {
                        field: "ShipName",
                        title: "Ship Name"
                      }, {
                        field: "ShipCity",
                        title: "Ship City"
                      }
                     ],
            filterMenuInit:onFilterMenuInit
          });

          function onFilterMenuInit(e){
            if(e.field == 'ShipName'){
              e.container.html('');
              $('<div id="logic">')
                .appendTo(e.container)
                .kendoDropDownList({
                dataTextField:'name',
                dataValueField:'value',
                dataSource: [{name:'AND',value:'and'},{name:'OR',value:'or'}],

              })

              for(var i = 0; i < 3; i++){
                $('<div id="operator'+i+'">')
                  .appendTo(e.container)
                  .kendoDropDownList({
                  dataTextField:'name',
                  dataValueField:'value',
                  dataSource: [
                    {name:'Is equal to',value:'eq'},
                    {name:'Is not equal to',value:'neq'},
                    {name:'Contains',value:'contains'}

                  ],

                })

                $('<input class="k-textbox" id="value'+i+'">')
                  .appendTo(e.container)
              }


              var submit = $('<button type="submit" class="k-button k-primary">Filter</button>') 

              $('<div >')
                .append(submit)
                .append('<button type="reset" class="k-button">Clear</button>')
                .appendTo(e.container)

              submit.on('click', function(){
                var grid =  $('#grid').data('kendoGrid');
                var logic = $('#logic').data('kendoDropDownList').value();
                var filterQuery =grid.dataSource.filter();

                if(filterQuery){
                  removeFiltersForField(filterQuery,'ShipName')
                }else{
                  filterQuery= {logic:'and', filters:[]};
                }

                var shipNameFilter = {logic:logic, filters:[]};

                for(var i =0; i < 3; i++){
                  shipNameFilter.filters.push({
                    field:'ShipName',
                    operator: $('operator'+i).data('kendoDropDownList').value(),
                    value: $('value'+i).val()
                  })
                }

                filterQuery.filters.push(shipNameFilter)

                grid.dataSource.filter(filterQuery);


              })

            }}
        });

        function removeFiltersForField(expression, field) {
          if (expression.filters) {
            expression.filters = $.grep(expression.filters, function(filter) {
              removeFiltersForField(filter, field);
              if (filter.filters) {
                return filter.filters.length;
              } else {
                return filter.field != field;
              }
            });
          }
        }
      </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