Set the Default Filter Operator in the Grid

Environment

Product Progress Kendo UI Grid

Description

The Grid automatically selects the first filter operator in the dropdown.

How can I change the default filter operator and select to display a different one?

Solution

  1. On the dataBound event of the grid, find the filter dropdown and select() the desired default filter option.
  2. On the filter event of the Grid, if the filter is cleared, select the desired default filter option.

    <div id="grid"></div>
          <script>
            $(document).ready(function() {
              var grid = $("#grid").kendoGrid({
                dataSource: {
                  type: "odata",
                  transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                  },
                  schema: {
                    model: {
                      fields: {
                        OrderID: { type: "number" },
                        OrderDate: { type: "date" },
                        ShippedDate: { type: "date" }
                      }
                    }
                  },
                  pageSize: 20,
                  serverPaging: true,
                  serverFiltering: true,
                },
                height: 550,
                filterable: {
                  mode: "row"
                },
                pageable: true,
                columns:
                [{
                  field: "OrderID",
                  width: 50,
                  filterable: {
                    cell: {
                      showOperators: false
                    }
                  }
                },{
                  field: "OrderDate",
                  title: "Order Date",
                  format: "{0:MM/dd/yyyy}",
                  width:200
                }],
                filter: function(e){
                  if(!e.filter){
                    if(e.field === "ShippedDate" || e.field === "OrderDate"){
                      var filterCell = e.sender.thead.find(".k-filtercell[data-field='" + e.field + "']");
                      var filterDropDown = filterCell.find("[data-role='dropdownlist']").data("kendoDropDownList")
                      filterDropDown.select(3);
                      filterDropDown.trigger("change");
                    }
                  }
                }
                }).data("kendoGrid");

              grid.one("dataBound", function(e){
                var filterCell = e.sender.thead.find(".k-filtercell[data-field='OrderDate']");
                var filterDropDown = filterCell.find("[data-role='dropdownlist']").data("kendoDropDownList");
                filterDropDown.select(3);
                filterDropDown.trigger("change");
              });
            });
          </script>

In this article
Not finding the help you need? Improve this article