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.

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.

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