Removing AutoComplete Popup from Kendo UI Grid Filter Row
Description
I want to use a filter box in the Kendo UI Grid filter row but without the AutoComplete popup feature. Is there a straightforward method to achieve this?
This knowledge base article also answers the following questions:
- How can I disable the AutoComplete popup in the Kendo UI Grid filter row?
- Can I prevent the AutoComplete popup from appearing in the filter row of a Kendo UI Grid?
Environment
| Product | Progress® Kendo UI® jQuery AutoComplete, Progress® Kendo UI® jQuery Grid |
Solution
To disable the AutoComplete popup in the filter row of the Kendo UI Grid, bind the open event of the AutoComplete to prevent its default action. This can be achieved within the dataBound event of the Grid. The following example demonstrates how to accomplish this:
dataBound: function (e) {
$('.k-filtercell [title="Ship Name"].k-input-inner')
.data("kendoAutoComplete")
.bind("open", function (e) {
e.preventDefault();
});
},
This code snippet finds the AutoComplete widget used within the filter row of the Grid (identified by the title attribute) and binds an event handler to its open event. By calling e.preventDefault() within the event handler, the opening of the AutoComplete suggestion box is prevented, allowing the use of a simple filter box without the popup.
For a practical demonstration, refer to this example: [
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataBound: function (e) {
$('.k-filtercell [title="Ship Name"].k-input-inner')
.data("kendoAutoComplete")
.bind("open", function (e) {
e.preventDefault();
});
},
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,
},
height: 550,
filterable: {
mode: "row",
},
pageable: true,
columns: [
{
field: "OrderID",
width: 225,
filterable: {
cell: {
showOperators: false,
},
},
},
{
field: "ShipName",
width: 500,
title: "Ship Name",
filterable: {
cell: {
operator: "contains",
suggestionOperator: "contains",
},
},
},
{
field: "Freight",
width: 255,
filterable: {
cell: {
operator: "gte",
},
},
},
{
field: "OrderDate",
width: 255,
title: "Order Date",
format: "{0:MM/dd/yyyy}",
},
],
});
});
</script>