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>

Select data attributes

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

Option elements data attributes

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

  • contains

  • startsWith

  • endsWith

  • equal

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.