Setting the Default Search Filter in Telerik UI Grid
Description
When selecting a search filter in the Grid, it defaults to 'Equal To'. I want to change the default to 'Contains'. This KB article also answers the following questions:
- How can I set 'Contains' as the default search filter in the Grid?
- Is it possible to change the default search filter from 'Equal To' to 'Contains'?
- What steps should I follow to modify the default search filter behavior in the Grid?
Solution
To change the default search filter from 'Equal To' to 'Contains', use the Grid's FilterMenuOpen event. In the event handler, implement a delay to ensure the filter popup has opened. Then, for the desired field (e.g., "ShipName"), find the Operator DropDownList and select the 'Contains' option. Finally, trigger the DropDownList's Change event.
Below is an example demonstrating this approach:
- Define the Grid with the
FilterMenuOpenEvent:
.Events(e => e.FilterMenuOpen("onFilterMenuOpen"))
<kendo-grid name="grid" on-filter-menu-open="onFilterMenuOpen">
</kendo-grid>
- Add the event handler function:
function onFilterMenuOpen(e) {
if (e.field === "ShipName") {
setTimeout(function () {
var operatorDropDown = $(e.container).find("[data-role='dropdownlist']").first().data("kendoDropDownList");
operatorDropDown.select(3); // Index of 'Contains' option
operatorDropDown.trigger("change");
}, 100);
}
}
This method ensures that whenever the filter menu opens for the specified field, 'Contains' will be the default search filter.