syidaxgrid
Home Pricing Settings

GRID FEATURE

Conditions for each column

Column filters apply conditions to individual columns. Text, numbers, and dates use different inputs and comparisons; conditions across columns narrow results together.

Markdown source Features

How it works and when to use it

Distinguish filter UI drafts from the applied model. For asynchronous behavior such as custom filters, await the report returned by setFilterModel.

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. Product name and quantity inputs

Enable basic filters appropriate to each column type.

javascript
grid.headerFilterRow = true;
grid.columnDefs = [{ field: 'product', headerName: 'Product', filter: 'text' },
  { field: 'quantity', headerName: 'Quantity', filter: 'number' }];

Verify the result: Search product names with text conditions and quantities with numeric conditions. Verify source types so string 100 and numeric 100 do not produce unintended differences.

Example 2. Save user filters

Store the applied model and restore it with the same column definitions.

javascript
const saved = await grid.getFilterModel();
const report = await grid.setFilterModel(saved);
console.log(report);

Verify the result: Restoration requires compatible model structure and column types. Inspect unapplied entries in the returned report.

Example 3. Reset conditions

Clear all filter families when search results are empty.

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

Verify the result: null clears the global filter model. To clear one column while preserving other conditions, use the setColumnFilterModel contract.

Combining features and troubleshooting

Test handling of empty strings, null, and numeric strings. Date conditions also require consistent time zones and storage formats.

Column filters, quick search, external filters, and advanced conditions may overlap. When results are sparse, inspect each remaining condition.

Related reading