Radio Button Filter

Radio button filter is used to show or hide HTML elements depending on their path, value and user selection.

<label>
<input
type="radio"
name="my-radio"
data-grid-control="radio-filter"
data-path=".color-red"
/> Red
</label>
​
<label>
<input
type="radio"
name="my-radio"
data-grid-control="radio-filter"
data-path=".color-blue"
/> Blue
</label>
​
<label>
<input
type="radio"
name="my-radio"
data-grid-control="radio-filter"
data-path=""
/> All
</label>

Data Attribute

Value

Description

Required

data-grid-control

radio-filter

This attribute defines the control type.

Required

data-path

any CSS selector

It defines the path to the item

that should be filtered.

Optional

data-inverted

false (default), true

This attribute inverts the filter.

Optional

checked

​Content

A Boolean attribute indicating whether or not

this radio button is checked by default.

Optional

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

In radio button path filter control, the name attribute is used instead of data-id attribute.