syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

Condition trees

Combine conditions across columns in an AND/OR tree to express business rules, such as large APAC orders or orders for a particular product.

Markdown source Features

How it works and when to use it

Condition trees differ from UI input values. ConditionGroup has op and children, while leaf conditions contain rules appropriate to their filter type. Invalid models may not be applied.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Provide a condition builder

Enable a tool that lets users choose columns and comparisons without writing code.

javascript
grid.conditionBuilder = true;

Verify the result: The condition builder appears. Regular column filters and quick search may also apply, so inspect all active conditions.

Example 2. Save and reapply conditions

Read a user-created condition tree and restore the same structure.

javascript
const condition = await grid.getConditionFilter();
console.log(condition);
await grid.setConditionFilter(condition);

Verify the result: Preserve the grouping of AND and OR expressions. (A AND B) OR C produces different results from A AND (B OR C).

Example 3. Clear only advanced conditions

Remove the advanced condition tree without clearing every filter.

javascript
await grid.setConditionFilter(null);
grid.addEventListener('conditionFilterChanged', event => console.log(event.detail));

Verify the result: Advanced conditions are cleared, but other search conditions may remain. Show remaining conditions alongside the empty-results state.

Combining features and troubleshooting

For server queries, the server must interpret the condition tree with the same meaning. Client callbacks cannot simply be serialized and sent to the server.

Give saved conditions readable names to make them easier to reuse. Inspect restoration results when saved conditions reference deleted columns.

Related reading