Button Filter

Button path filter is used to show or hide HTML elements depending on their path and user selection.

<a 
    href="#"  
    data-grid-control="button-filter" 
    data-path=".red">Red</a>

It also can be a button:

<button 
    type="button" 
    data-grid-control="button-filter" 
    data-path=".red">Red</button>

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:

.dg-checked{
    color: red;
}

Last updated