GRID FEATURE

Search across columns

Quick search looks for text across searchable columns without specifying a column. It is a useful starting point when users do not know whether a term is a product name or a region.

How it works and when to use it

Find navigates to matching cells; Quick filter hides nonmatching rows. Present them according to these distinct purposes.

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. Pass a global search term

Connect your app's search input to quickFilterText.

javascript
grid.quickFilter = true;
grid.quickFilterText = 'Platform';

Verify the result: Only matching rows remain in the current data. To search data not yet loaded, pass the term in remote requests.

Example 2. Multiple-word conditions

Compare searches requiring both words with searches allowing either word.

javascript
grid.quickFilterMode = 'and';
grid.quickFilterText = 'Platform APAC';
// To show rows matching either word:
// grid.quickFilterMode = 'or';

Verify the result: Word combinations change the results. Explain the condition relationship in the search input's guidance.

Example 3. Tune input frequency and clear search

Adjust the delay to avoid expensive calculations or server requests on every keystroke.

javascript
grid.quickFilterDebounce = 200;
grid.quickFilterText = '';

Verify the result: An empty string clears the search term. If your app enables regular expressions, also test invalid and overly broad patterns.

Combining features and troubleshooting

Do not assume search includes every property of the source object. Check column configuration, display rules, and access rules together.

Previous results may remain briefly between search changes and server responses. Distinguish loading from no results.

Related reading