Using Filter Row

The filter row allows users to enter a value for each column and filter grid data by those values. To display the filter row, set the filterRow.visible property to true. If you need to disable a filter row cell for a specific column, set the column's allowFiltering property to false.

Depending on a column's dataType, its filter row cell contains different editors:

dataType	Editor
"string", "number", "object"	Text box
"boolean"	Drop-down list
"date"	Date picker
"datetime"	Date and time picker

In this demo, the Hire Date column's filter row cell contains a date picker. Other filter row cells contain text boxes.

The TreeList supports a specific set of filterOperations for each data type. Users can click a magnifying glass icon in each filter row cell to specify the selectedFilterOperation.

A column's filter value is stored in the filterValue property. You can use this property to set the filter value in code.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Thank you for your interest in our ASP.NET Core product libraries and UI component suite. We are moving ASP.NET Core-related demos and content to DevExpress.com. Please make sure to update your bookmarks with our new URL.

View Demo