QuickFind

Feature that allows the user to search in a column by focusing a cell and typing. Navigate between hits using the keyboard, [f3] or [ctrl]/[cmd] + [g] moves to next, also pressing [shift] moves to previous.

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
Ctrl+Shift+F3 showFilterEditor Shows the filter editor
Escape clearSearch Removes the search completely
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 QuickFind
let grid = new Grid({
  features: {
    quickFind: true
  }
});

// navigate to next hit programmatically
grid.features.quickFind.gotoNextHit();

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

Quick find
//<code-header>
fiddle.title = 'Quick find';
//</code-header>
targetElement.innerHTML = '<p>Select a cell and start typing to search in that column. Go to next hit using F3 or CMD+g</p>';
const grid = new Grid({
    appendTo : targetElement,

    // makes grid as high as it needs to be to fit rows
    autoHeight : true,

    features : {
        // enable quickfind
        quickFind : true
    },

    data : DataGenerator.generateData(10),

    columns : [
        { field : 'name', text : 'Name', flex : 1 },
        { field : 'city', text : 'City', flex : 1 }
    ]
});

Configs

10

Common

disabledInstancePlugin
listenersEvents

Other

keyMap: Object<String, KeyMapConfig>

See Keyboard shortcuts for details

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents
callOnFunctionsEvents
clientInstancePlugin
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable

Properties

17

Common

disabledInstancePlugin

Class hierarchy

isQuickFind: Boolean= truereadonly
Identifies an object as an instance of QuickFind class, or subclass thereof.
isQuickFind: Boolean= truereadonlystatic
Identifies an object as an instance of QuickFind class, or subclass thereof.
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable

Other

found: StoreSearchResult[]readonly

Found results (as returned by Store#findByField), an array in format { index: x, data: record }

foundCount: Numberreadonly

Number of results found

catchEventHandlerExceptionsEvents

Lifecycle

configBase
isConstructingBase
isDestroyedBase
isDestroyingBase

Misc

callOnFunctionsEvents
clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Functions

35

Other

clear

Clears and closes QuickFind.

gotoFirstHit

Go to the first hit.

gotoHit

Go to specified hit.

ParameterTypeDescription
indexNumber
gotoLastHit

Go to the last hit.

gotoNextHit

Select the next hit, scrolling it into view. Triggered with [f3] or [ctrl]/[cmd] + [g].

gotoPrevHit

Select the previous hit, scrolling it into view. Triggered with [shift] + [f3] or [shift] + [ctrl]/[cmd] + [g].

addListenerEvents
hasListenerEvents
LstaticLocalizable
onEvents
relayAllEvents
removeAllListenersEvents
removeListenerEvents
resumeEventsEvents
suspendEventsEvents
triggerEvents
unEvents

Configuration

applyDefaultsstaticBase

Events

detachListenersBase

Lifecycle

constructBase
constructorBase
destroystaticBase
doDestroyBase
setConfigBase

Misc

animatePropertyBase
callbackBase
doDisableInstancePlugin
downloadTestCaseBase
initClassstaticBase
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable
resolveCallbackBase
updateLocalizationLocalizable

Events

5
beforeDestroyEvents
catchAllEvents
destroyEvents
disableInstancePlugin
enableInstancePlugin

Event handlers

5
onBeforeDestroyEvents
onCatchAllEvents
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

1

CSS variables

3
NameDescription
--b-quick-find-header-insetInset (position) for the quick find header "text field"
--b-quick-find-hit-paddingPadding for the quick find hit text highlight
--b-quick-find-header-badge-colorColor for the quick find hit count indicator shown in the header