[]
DEMOS DOCS API
DOWNLOAD NEED HELP? BOOK DEMO
(Showing Draft Content)

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.

Key Combination

Action

ESC

Clear search criteria.

Printable Characters

Search for items that contain the text typed.

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
});

image


By default, the search is performed immediately after entering the search criteria. 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 { FlexGrid } from '@mescius/wijmo.grid';
import { FlexGridSearch } from '@mescius/wijmo.grid.search';

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

new FlexGridSearch('#theSearch', {
    grid: theGrid,
    isSubmitOnChange: true // stop the immediate search
});