Set the Default Filter Operator in the Grid
Environment
Product | Progress® Kendo UI® Grid for jQuery |
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
- On the
dataBound
event of the grid, find the filter dropdown andselect()
the desired default filter option. - 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>