Button Filter
Button path filter is used to show or hide HTML elements depending on their path and user selection.
1
<a
2
href="#"
3
data-grid-control="button-filter"
4
data-path=".red">Red</a>
Copied!
It also can be a button:
1
<button
2
type="button"
3
data-grid-control="button-filter"
4
data-path=".red">Red</button>
Copied!
Data Attribute
Value
Description
Required
data-grid-control
button-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
data-id
any alphanumeric string
This attribute may be used in the deep-link,
local storage, or complex filter logic.
Optional
data-checked
false (default), true
Indicate whether or not
this button should be 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
If the button is checked, it has dg-checked CSS class. This way it's possible to add styles to the selected button:
1
.dg-checked{
2
color: red;
3
}
Copied!
Last modified 11mo ago
Copy link