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.

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 usedata-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 groupsdata-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