SYIDAX / DATA GRID

Condition trees PRO

Combine conditions across columns with AND and OR for advanced searches.

Condition treesSample order data

120 rows

Loading Grid…

Options

Changes below update the Grid and code immediately.

Advanced filterPRO

Latest result

Advanced filtering is enabled in this example. Choose a column in the Grid's condition builder.

View code

Current preview

Combine conditions such as region APAC and a minimum quantity. AND and OR define their relationships.

Find the condition builder
Advanced filtering is enabled in this example. Choose a column in the Grid's condition builder.
Create the first condition
Select Region and comparison value APAC. Apply it to inspect orders from that region.
Add and remove conditions
Add a quantity condition with AND or OR. Finally clear conditions and verify the full list returns.

Expected results

Orders change according to the combined conditions. Read the model from condition-change events.

This example focuses on the condition builder. If results are empty, check comparison types and AND/OR relationships.

Using this feature in your product requires the Pro runtime and a valid license.

Other properties1

Attribute / Property	Type / Default	Description
PRO conditionBuilder	`boolean`Default: false	show the grid-level condition builder panel: an AND/OR tree of cross-column conditions ("name contains X AND (score > 50 OR …)") applied on top of the per-column filters. The programmatic surface (`setConditionFilter` / `getConditionFilter`) works regardless of this flag. Default `false`.

Events2

Events	Detail type	Description
PRO	`{ model: ConditionNode \| null }`	fires when the grid-level condition tree changes (builder Apply/Clear or `setConditionFilter`). `model: null` = cleared.
PRO	`{ presets: Array<{ name: string; json: string }> }`	fires when the named preset list changes (save/delete in the panel). Hosts persist the payload and feed it back on startup via `setConditionPresets`.

Methods4

Method / Arguments	Return type	Description
PRO model: ConditionNode \| null	`Promise<void>`	apply/replace the grid-level condition tree programmatically (`null` clears it). The model is validated (`validateConditionNode`) and deep-copied; invalid models are rejected with a console warning and no state change. The builder panel reflects every scalar condition; set leaves still filter but are not editable in the initial panel (see `treeToBuilderDraft`).
PRO	`Promise<ConditionNode \| null>`	read the applied condition tree (deep copy, `null` = none).
PRO presets: ReadonlyArray<{ name: string; json: string }>	`Promise<void>`	replace the named preset list (host persistence hook: read with , persist wherever you like, and feed back on startup). Malformed entries are dropped; JSON payloads are validated with the tree parser.
PRO	`Promise<Array<{ name: string; json: string }>>`	read the named preset list (defensive copy).