Radio button filter is used to show or hide HTML elements depending on their path, value and user selection.
1
<label>
2
<input
3
type="radio"
4
name="my-radio"
5
data-grid-control="radio-filter"
6
data-path=".color-red"
7
/> Red
8
</label>
9
10
<label>
11
<input
12
type="radio"
13
name="my-radio"
14
data-grid-control="radio-filter"
15
data-path=".color-blue"
16
/> Blue
17
</label>
18
19
<label>
20
<input
21
type="radio"
22
name="my-radio"
23
data-grid-control="radio-filter"
24
data-path=""
25
/> All
26
</label>
Copied!
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.