New to Telerik UI for ASP.NET Core? Download free 30-day trial
ASP.NET Core Grid Filter Row
- EXAMPLE
- VIEW SOURCE
-
Change Theme
defaultDefault Theme
- Main
- Main Dark
- Nordic
- Ocean Blue
- Ocean Blue A11Y
- Purple
- Turquoise
Bootstrap Theme- Main
- Bootstrap 3
- Bootstrap 3 Dark
- Main Dark
- Nordic
- Turquoise
- Turquoise Dark
- Urban
- Vintage
Material Theme- Main
- Arctic
- Lime Dark
- Main Dark
- Nova
Classic Theme- Main
- Green
- Green Dark
- Lavender
- Lavender Dark
- Main Dark
- Metro
- Metro Dark
- Moonlight
- Opal
- Opal Dark
- Silver
- Silver Dark
- Uniform
Fluent Theme- Main
Also available for:
CLIENT-SIDE API SERVER-SIDE APIDescription
The Telerik UI for ASP.NET Core Grid supports a row filter feature, which allows you to configure a row that will be used for filtering by the contained content in the respective column.
This demo shows how to implement a filter row in the header by setting the Filterable
Mode
property of the Data Grid to Row
—.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
. Then, based on the data type of the underlying columns data, the Grid will render textboxes for string values, and numeric text boxes or date-pickers for filtering in its column headers.
Additionally, you can specify a default filter operator that will be applied when the user enters some value in the filter textbox and presses Tab
or Enter
. To achieve this scenario, use the .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
attribute of the corresponding column, as shown for the Ship Name and Freight columns.
For more information about the filtering capabilities, refer to the official Telerik UI for ASP.NET Core Data Grid product documentation on the available fltering approaches.