📔
DataGrid Documentation
  • Getting Started
  • Buy DataGrid on CodeCanyon
  • Controls
    • Text Filter
    • Sort DropDown Control
    • Sort Button Control
    • Checkbox Filter
    • Radio Button Filter
    • Select Filter
    • Button Filter
    • Pagination
    • Page Size Control
    • Label Control
    • Reset Button
  • Multiple version of the same control (data-id attribute)
  • Languages Support
  • Special Classes
  • Deep Links
  • Storage
  • Multiple DataGrids on Page
  • Filter AND/OR Logic [NEW]
  • How To
    • How To Sort Table in JavaScript
    • HTML Table with Sortable Headers
    • How to Filter HTML Table By Multiple Columns
    • Double Sort (Multiple Column Ordering)
Powered by GitBook
On this page

Was this helpful?

  1. Controls

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;
}
PreviousSelect FilterNextPagination

Last updated 4 years ago

Was this helpful?