Select Filter
Select path filter is used to show or hide HTML elements depending on their path and user selection.
<select data-grid-control="select-filter">
<option data-path="">Filter by property type</option>
<option data-path=".property-type-cottage">Cottage</option>
<option data-path=".property-type-apartment">Apartment</option>
<option data-path=".property-type-villa">Villa</option>
</select>
Data Attribute | Value | Description | Required |
data-grid-control | select-filter | This attribute defines the control type. | Required |
data-id | any alphanumeric string | This attribute may be used in the deep-link, local storage, or complex filter logic. | Optional |
Data Attribute | Value | Description |
data-path | any CSS selector | It defines the path to the item that should be sorted. |
data-inverted | false (default), true | This attribute inverts the filter. |
If the
data-value attribute is specified, the filter will look for this text value in the provided data-path. In this case, the following data attributes may be specified:Data Attribute | Value | Description | Required |
data-value | any text | The filter will look for this text in the given data-path | Optional |
data-mode |
| Filter mode. The default value is "equal". | Optional |
data-skip | [^a-zA-Z0-9]+ | Defines a regex of characters that should be skipped. | Optional |
The selected option should be marked with the selected attribute.
Last modified 2yr ago