New to Kendo UI for jQueryStart a free 30-day trial

Change the Default Filter Operator

Environment

ProductProgress® Kendo UI® Grid for jQuery
Product VersionCreated 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-v4",
              transport: {
                read: "https://demos.telerik.com/service/v2/odata/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
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support