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

Change the Default Filter Operator

Environment

Product Progress Kendo UI Grid
Progress Kendo UI version Created with the 2017.3.1026 version

Description

How can I change the default filter operator of the Grid?

Solution

Within filterMenuInit, change the value of the DropDownList by using the value method and trigger the change event to reflect this internally.

    <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) {
          var firstValueDropDown = e.container.find('[data-bind="value: filters[0].operator"]').data('kendoDropDownList');
          firstValueDropDown.value("neq");
          firstValueDropDown.trigger("change");

          var secondValueDropDown = e.container.find('[data-bind="value: filters[1].operator"]').data('kendoDropDownList');
          secondValueDropDown.value("neq");
          secondValueDropDown.trigger("change");
        }

      </script>
    </div>
In this article
Not finding the help you need? Improve this article