Filtering and sorting


Add data-search to an input element to get automatich search. As long as the input element is located inside a binding-scope you will (when typing in the searchbox) get a filter-string saying that 'SearchColumn like '%searchfor%', and a dsDataSource.refreshDataSource(); will be executed.

Filter builder

All data grids has data-items-info or data-items-info2 control, which comes with built in paging and filter builder. More about items info control: pagination

There is an option to define lookup for filter builder value input. All options attached to field will be transformed to data attribute and pass parameters to lookup. All available parameters can be checked under lookups article.

If lookup is used on the field in the article it will auto generate lookup for filter builder as well. 

Field filter 2

Typically data-field-filter2 is used in grids. But they can be used outside also.

Add data-field-filter2-link to have filter as link, instead of input

When data-field-filter2-link is clicked it will show distinct list, if distinct option used, calendar, if date type is date, else it will just show operator dropdown to filter for null and not null values

Do not use distinct option on date fields. Currently this option does not work properly.
  • ManyMembers:
I d Established Website Genre Members Many memebers

Available options

  • data-operator- used to select the default operator for filter. Operator definition depends on field type. Existing operators:
    • String: equals notequals beginswith endswith contains notcontains isnull isnotnull inlist notinlist
    • Number: equals notequals greaterthanorequal greaterthan lessthanorequal lessthan isnull isnotnull inlist notinlist
    • Date: dateequals notdatequals dategreaterthan dategreaterthanorequal datelessthan datelessthanorequal datebetween datenotbetween isnull isnotnull
    • Boolean, Bit: istrue isfalse clear
    • Uniqueidentifier: equals notequals isnull isnotnull

Date Expressions

There is posibility to use limited number of devexpress date expressions in filters.

  • "Now()":"LocalDateTimeNow()"
  • "Yesterday()": "LocalDateTimeYesterday()"
  • "DayAfterTomorow()": "LocalDateTimeDayAfterTomorrow()"
  • "LastWeek()": "LocalDateTimeLastWeek()"
  • "NextMonth()": "LocalDateTimeNextMonth()"
  • "NextWeek()": "LocalDateTimeNextWeek()"
  • "NextYear()": "LocalDateTimeNextYear()"
  • "ThisMonth()": "LocalDateTimeThisMonth()"
  • "ThisWeek()": "LocalDateTimeThisWeek()"
  • "ThisYear()": "LocalDateTimeThisYear()"
  • "Tomorrow()": "LocalDateTimeTomorrow()"
  • "TwoWeeksAway()": "LocalDateTimeTwoWeeksAway()"
  • 'AddMonths(LocalDateTimeThisMonth(), 2)': "AddMonths(LocalDateTimeThisMonth(), 2)"
  • 'AddYears(LocalDateTimeThisYear(), 2)': 'AddYears(LocalDateTimeThisYear(), 2)'
  • "LastYear()": 'AddYears(LocalDateTimeThisYear(), -1)'
  • "LastMonth()": 'AddMonths(LocalDateTimeThisMonth(), -1)'

Field Popups

If you require your users to filter or sort data, there is a handy little component available. You activate this component by adding the data-field-popup='MyField' to an element (typically column headers in tables). If you would like a distinct list of values listed inside the popup, just include distinct behind the fieldname data-field-popup='MyField|distinct.

Name Genre

To show two fields together just add a comma and one more fieldname data-field-popup='code, description'. Please note that the filtering will be based on the first field only.

Autofilter Row

If you would like to have an autofilter row in a table, this can be achieved by marking up inputs with data-filter-field='MyField'. If you type into this field now, you wil automatically set a filterstring and issue a refreshDatSource action. Also when a filter i set from another component (for example a field-popup), this input will be updated to reflect the active filterstring.

Name Genre

Where clause

Use data-where-clause="Criteria" to change data object's where clause and refresh data source. When clicking on element it will remove active class from siblings and add it to clicke element.

Filter by genre: Rock | Pop | Jazz
Name Genre


To have sorting in data use data-sort-by="FieldName" When sorting, it will remove and add corresponding asc or desc classes. Use data-sort-by="FieldName:desc" to have first default sort in descending order.

Sort by name

Group by filter

To filter by groups data-filter-groupby="Field" can be used. It will render grouped values with counters. For field values data-filter-groupby-field="Field" tag should be used and data-filter-groupby-count for grouped element count. Comma can be used to iclude more fields data-filter-groupby="Field1,Field2" Clicking on rendered element will add element to filter string

  • ( )
Filter string:
Name Genre

Related articles

Placeholder "LocalizeWeb2016" failed