Filter AND/OR Logic [NEW]

By default, all filter controls, such as Text Filter, Checkbox Filter, 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: 
1
datagrid({
2
    customFilter: `
3
        { location } and { place-title } and
4
        ({ exclusive } or { parking } or { delivery }) and
5
        ({ family } or { romantic } or { party })`,
6
​
7
    // ... any other DataGrid setting ....
8
});
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 Radio Button Filter control, the name property is used instead of data-id.
data-id may contain English letters, numbers, dashes or underscores only.
For example:
1
<!-- text filter control: data-id="location" -->
2
<input
3
        type="text"
4
        placeholder="Filter by location"
5
        data-grid-control="text-filter"
6
        data-path=".my-path-to-filter"
7
        data-id="location" />
8
​
9
<!-- radio button control uses name instead of data-id -->
10
<input
11
        type="radio"
12
        name="color-radio"
13
        data-grid-control="radio-filter"
14
        data-path=".color-red"
15
/>
You can find working examples in the downloaded archive under /main/6-filters-and-or-logic/.
​
Last modified 2mo ago