📔
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?

Filter AND/OR Logic [NEW]

PreviousMultiple DataGrids on PageNextHow To Sort Table in JavaScript

Last updated 2 years ago

Was this helpful?

By default, all filter controls, such as , , and so on, use AND logic. The AND logic means that the result list meets all criteria within a set of filter and path rules.

But it is possible to change this behavior with a customFilter property like this:

datagrid({
    customFilter: `
        { location } and { place-title } and
        ({ exclusive } or { parking } or { delivery }) and
        ({ family } or { romantic } or { party })`,

    // ... any other DataGrid setting ....
});

You can use any combination of and, or, and parentheses.

Each parenthesized token, such as { location }, corresponds to a filter control. The value inside parentheses matches data-id property of the control.

There is only one exception: in the case of the , the name property is used instead of data-id.

data-id may contain English letters, numbers, dashes or underscores only.

For example:
<!-- text filter control: data-id="location" -->
<input
        type="text"
        placeholder="Filter by location"
        data-grid-control="text-filter"
        data-path=".my-path-to-filter"
        data-id="location" />

<!-- radio button control uses name instead of data-id -->
<input
        type="radio"
        name="color-radio"
        data-grid-control="radio-filter"
        data-path=".color-red"
/>

You can find working examples in the downloaded archive under /main/6-filters-and-or-logic/.

Text Filter
Checkbox Filter
Radio Button Filter control