v7.3.0

Search
Feature

Feature that allows the user to search the entire grid. Navigate between hits using the keyboard, F3 or Ctrl/Cmd + G moves to next, also pressing Shift moves to previous.

Note that this feature does not include a UI, please build your own and call appropriate methods in the feature. For a demo implementation, see Search example.

This feature is disabled by default.

Keyboard shortcuts

This feature has the following default keyboard shortcuts:

Keys Action Action description
F3 goToNextHit Move focus to next search hit
Shift+F3 goToPrevHit Move focus to previous search hit
Ctrl+G goToNextHit Move focus to next search hit
Ctrl+Shift+G goToPrevHit Move focus to previous search hit
Please note that Ctrl is the equivalent to Command and Alt is the equivalent to Option for Mac users

For more information on how to customize keyboard shortcuts, please see our guide

// enable Search
let grid = new Grid({
  features : {
    search : true
  }
});

// perform search grid.features.search.search('steve');

When Store has lazyLoad, this feature will only work on locally available data.

See also

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isSearch : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of Search class, or subclass thereof.

Functions

Functions are methods available for calling on the class
    • clear( )

      Clears search results.

    • gotoFirstHit( )
      ASYNC

      Go to the first hit.

    • gotoLastHit( )
      ASYNC

      Go to the last hit.

    • gotoNextHit( )
      ASYNC

      Select the next hit, scrolling it into view. Triggered with F3 or Ctrl/Cmd + G.

    • gotoPrevHit( )
      ASYNC

      Select the previous hit, scrolling it into view. Triggered with Shift + F3 or Shift + Ctrl/Cmd + G.

    • renderCell( )
      private

      Called from SubGrid when a cell is rendered. Highlights search hits.

    id: search

    Source path

    Grid/feature/Search.js

    Demo

    examples/search

    Contents