Search

The FlexGridSearch control provides a simple UI for performing full-text searches on FlexGrid controls.

It filters the data and highlights matches on the grid as you type.

The same FlexGrid control can be filtered by the FlexGridSearch control and FlexGridFilter component at the same time.

import { FlexGrid } from '@mescius/wijmo.grid';
import { FlexGridSearch } from '@mescius/wijmo.grid.search';

// create the grid
var theGrid = new FlexGrid('#theGrid', {
    itemsSource: getData()
});

// create the grid search box
new FlexGridSearch('#theSearch', {
    placeholder: 'FlexGridSearch',
    grid: theGrid
});

By default, we convert each row of data into a space-separated string for search matching, which in some cases (such as when the cell data itself contains spaces) may not yield the expected results. In such situations, you can enable exactMatch to perform precise matching for each cell.

import { FlexGridSearch } from '@mescius/wijmo.grid.search';
new FlexGridSearch('#theSearch', {
    exactMatch: true // enable extra matching
});

The search is performed immediately after entering the search criteria by default. You can enable isSubmitOnChange to stop the immediate search, and press the Enter key to execute the search when you are ready to confirm the search content.

import { FlexGridSearch } from '@mescius/wijmo.grid.search';
new FlexGridSearch('#theSearch', {
    isSubmitOnChange: true // stop the immediate search
});