Search Panel
Out of the box, the Grid enables the users to search through its data by using the search panel.
Under the hood, the search panel uses filtering to show only the relevant records in the Grid.
Getting Started
To enable the search panel functionality, include the Search option to the toolbar configuration.
@(Html.Kendo().Grid<CustomerViewModel>()
.Name("Grid")
.ToolBar(t => t.Search()) // Enable the Search panel.
...
)
<kendo-grid name="grid">
<toolbar>
<toolbar-button name="search"></toolbar-button>
</toolbar>
...
</kendo-grid>
You can also customize which fields to search through the data when a value is entered in the search input.
@(Html.Kendo().Grid<CustomerViewModel>()
.Name("Grid")
.ToolBar(t => t.Search())
.Search(s=>
{
s.Field(c => c.ContactName);
s.Field(c => c.CompanyName);
})
...
)
<kendo-grid name="grid">
<toolbar>
<toolbar-button name="search"></toolbar-button>
</toolbar>
<search fields="@(new string[] { "ContactName", "Country"})"></search>
...
</kendo-grid>
Specify the Filter Operator
As of Kendo UI 2021 R3 SP1, you can specify filter operators for each filter type. With this update, you can filter non-string types.
The following example demonstrates how to specify which fields to include in the search
.Search(s => {
s.Field(o => o.OrderID, "eq");
s.Field(o => o.Freight, "gt");
s.Field(o => o.ShipName, "contains");
s.Field(o => o.ShipCity, "contains");
})
<search fields-extended="@(new object[]
{
new {Name = "OrderID", Operator = "eq"},
new {Name = "ShipName", Operator = "contains"},
new {Name = "ShipCity", Operator = "contains"}
})">
</search>
The code snippets from above can be seen in action in the following demo:
Modify the Default Search Panel Message
The default search panel message is Search.... You can modify it by using the Text() method in the toolbar configuration.
@(Html.Kendo().Grid<CustomerViewModel>()
.Name("Grid")
.ToolBar(t => t.Search().Text("Search username..."))
...
)
<kendo-grid name="grid">
<toolbar>
<toolbar-button name="search" text="Search username..."></toolbar-button>
</toolbar>
...
</kendo-grid>
Known Limitations
- When filtering is enabled, the filter textboxes for all Grid columns will be populated with the value entered in the search textbox.