GridBase
Widget

A thin base class for Grid. Does not include any features by default, allowing smaller custom-built bundles if used in place of Grid. Use GridBase when you want to minimize bundle size and only include the specific features you need.

NOTE: In most scenarios you probably want to use Grid instead of GridBase.

import GridBase from 'lib/Grid/view/GridBase.js';
import Sort from 'lib/Grid/feature/Sort.js';

const grid = new GridBase({
    appendTo : document.body,
    features : {
        sort : true  // Only this feature is included in the bundle
    },
    columns : [
        { field : 'name', text : 'Name' }
    ],
    data : [
        { name : 'Dan' },
        { name : 'Steve' }
    ]
});

Useful configs and functions

Member	Description
columns	Array of column definitions
store	Data store supplying rows
data	Inline data array (creates a store automatically)
features	Object to enable/configure grid features
subGridConfigs	Configure the locked/normal grid sections
rowHeight	Height of each row in pixels
scrollRowIntoView	Scrolls a row into the visible area
getCell	Returns cell element for a record and column

Configs

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

columns : ColumnStore/ColumnConfig/ColumnStoreConfig

Accepts column definitions for the grid during initialization. They will be used to create Column instances that are added to a ColumnStore.

At runtime it returns the ColumnStore.

Initialization using column config objects:

new Grid({
  columns : [
    { text : 'Alias', field : 'alias' },
    { text : 'Superpower', field : 'power' }
  ]
});

Also accepts a store config object:

new Grid({
  columns : {
    data : [
      { text : 'Alias', field : 'alias' },
      { text : 'Superpower', field : 'power' }
    ],
    listeners : {
      update() {
        // Some update happened
      }
    }
  }
});

Access the ColumnStore at runtime to manipulate columns:

grid.columns.add({ field : 'column', text : 'New column' });

Replacing the columns fully at runtime:

grid.columns = [{ field : 'column', text : 'New column' }];

Has a corresponding runtime columns property.

data : Object[]/Model[]

NON-LAZY-LOAD
Convenient shortcut to set data in grids store both during initialization and at runtime. Can also be used to retrieve data at runtime, although we do recommend interacting with Grids store instead using the store property.

Setting initial data during initialization:
```
const grid = new Grid({
    data : [
      { id : 1, name : 'Batman' },
      { id : 2, name : 'Robin' },
      ...
    ]
});
```
Setting data at runtime:
```
grid.data = [
    { id : 3, name : 'Joker' },
    ...
];
```
Getting data at runtime:
```
const records = store.data;
```
Note that a Store will be created during initialization if none is specified.

Has a corresponding runtime data property.
emptyText : String/EmptyTextDomConfigL{noRows}
Text or HTML, or a EmptyTextDomConfig block to display when there is no data to display in the grid. When using multiple Grid regions, provide the region property to decide where the text is shown. By default, it is shown in the first region.
```
new Grid({
    emptyText : {
        region : 'locked',
        text   : 'No data available'
    }
})
```
Has a corresponding runtime emptyText property.
features : Object

An object containing Feature configuration objects (or true if no configuration is required) keyed by the Feature class name in all lowercase.
keyMap : Object<String, KeyMapConfig>

See Keyboard shortcuts for details
preserveScroll : PreserveScrollOptions/Booleanfalse

Preserve the grid's vertical scroll position when changesets are applied, as in the case of remote changes, or when stores are configured with syncDataOnLoad.

Has a corresponding runtime preserveScroll property.
rowHeight : Number

Row height in pixels. This allows the default height for rows to be controlled. Note that it may be overridden by specifying a rowHeight on a per record basis, or from a column renderer.

When initially configured as null, an empty row will be measured and its height will be used as default row height, enabling it to be controlled using CSS

Has a corresponding runtime rowHeight property.
store : Store/StoreConfig
Store that holds records to display in the grid, or a store config object. If the configuration contains a readUrl, an AjaxStore will be created.

Note that a store will be created during initialization if none is specified.

Supplying a store config object at initialization time:
```
const grid = new Grid({
    store : {
        fields : ['name', 'powers'],
        data   : [
            { id : 1, name : 'Aquaman', powers : 'Decent swimmer' },
            { id : 2, name : 'Flash', powers : 'Pretty fast' },
        ]
    }
});
```
Accessing the store at runtime:
```
grid.store.sort('powers');
```
Has a corresponding runtime store property.
formulaProviders : Object<String, FormulaProviderConfig>
An object which names formula prefixes which will be applied to all columns configured with formula : true.

Each entry is keyed by a formula prefix, and each value is how to instantiate and configure a FormulaProvider when that prefix is used in the typed vale, eg: =XXX(

If the configured value contains a type property, that is used to determine a registered formula provider subclass to instantiate.
```
fields : [{
    name             : 'review',
    formulaProviders : {
       AI : {
         type : 'remote',
         url  : 'https://my-ai-service.com'
       },
       SUM : {
          type : 'sum'
       }
    }
}]
```
Formula providers may be added to dynamically:
```
// Enable registered MYFormula class to be used as a formula provider in the Grid
grid.store.modelClass.fieldMap.review.formulaProviders.MY = { ... };
```
transition : Object
Configure UI transitions for various actions in the grid.
- insertRecord : Boolean
  
  Transition record insertions
- removeRecord : Boolean
  
  Transition record removals
- toggleColumn : Boolean
  
  Transition column visibility changes
- expandCollapseColumn : Boolean
  
  Transition parent/group column expand/collapse
- toggleRegion : Boolean
  
  Transition region expand/collapse
- toggleTreeNode : Boolean
  
  Transition tree node expand/collapse
- toggleGroup : Boolean
  
  Transition group expand/collapse
- filterRemoval : Booleanfalse
  
  Transition row removals caused by filtering (under specific conditions)
Has a corresponding runtime transition property.
autoHeight : Booleanfalse

Automatically set grids height to fit all rows (no scrolling in the grid). In general you should avoid using autoHeight: true, since it will bypass Grids virtual rendering and render all rows at once, which in a larger grid is really bad for performance.
fillLastColumn : Booleantrue

Set to true to stretch the last column in a grid with all fixed width columns to fill extra available space if the grid's width is wider than the sum of all configured column widths.
fixedRowHeight : Boolean

Use fixed row height. Setting this to true will configure the underlying RowManager to use fixed row height, which sacrifices the ability to use rows with variable height to gain a fraction better performance.

Using this setting also ignores the getRowHeight function, and thus any row height set in data. Only Grids configured rowHeight is used.
getRowHeight : Function
A function called for each row to determine its height. It is passed a record and expected to return the desired height of that records row. If the function returns a falsy value, Grids configured rowHeight is used.

The default implementation of this function returns the row height from the records rowHeight field.

Override this function to take control over how row heights are determined:
```
new Grid({
   getRowHeight(record) {
       if (record.low) {
           return 20;
       }
       else if (record.high) {
           return 60;
       }

       // Will use grids configured rowHeight
       return null;
   }
});
```
NOTE: Height set in a Column renderer takes precedence over the height returned by this function.
Parameters
- record : Model
  
  Record to determine row height for
Returns

Number
:

Desired row height
minHeight : String/Number

Grid's min-height. Defaults to 10em to be sure that the Grid always has a height wherever it is inserted.

Can be either a String or a Number (which will have 'px' appended).

Note that reading the value will return the numeric value in pixels.
resizeToFitIncludesHeader : Booleantrue

Set to false to only measure cell contents when double-clicking the edge between column headers.
animateFilterRemovals : Booleanfalse

DEPRECATED

Deprecated:
7.0.0 Deprecated animateFilterRemovals. Use transition.filterRemoval instead

Set to true to animate row removals caused by filtering.
animateRemovingRows : Boolean

DEPRECATED

Deprecated:
7.0.0 Deprecated animateRemovingRows. Use transition.removeRecord instead

Controls if removing and inserting rows should be animated. Set to false to prevent those animations, removing the related delays.
cellEllipsis : Booleantrue

Set to false to crop text in grid cells without ellipsis (...). When enabled, cells containing pure use display : block, instead of display : flex to allow ellipsis to work. NOTE Only supported in browsers that support :has() CSS selector

Has a corresponding runtime cellEllipsis property.
columnLines : Booleantrue

Set to false to not show column lines. End result might be overruled by/differ between themes.

Has a corresponding runtime columnLines property.
contextMenuTriggerEvent : 'contextmenu'/'click'/'dblclick'contextmenu

Event which is used to show context menus. Available options are: 'contextmenu', 'click', 'dblclick'.
defaultRegion : Stringnormal

Region to which columns are added when they have none specified
destroyStore : Booleanfalse

Set to true to destroy the store when the grid is destroyed.
disableGridRowModelWarning : Booleanfalse

Set to true to not get a warning when using another base class than GridRowModel for your grid data. If you do, and would like to use the full feature set of the grid then include the fields from GridRowModel in your model definition.
enableSticky : Boolean

DEPRECATED

Deprecated:
7.3.0 Use features : { stickyCells : true } instead

Set to true to enable the StickyCells feature, which pins cell content to the top of the grid while rows scroll off the top but remain visible.
fullRowRefresh : Booleantrue

Refresh entire row when a record changes (true) or, if possible, only the cells affected (false).

When this is set to false, then if a column uses a renderer, cells in that column will still be updated because it is impossible to know whether the cells value will be affected.

If a standard, provided Column class is used with no custom renderer, its cells will only be updated if the column's field is changed.
hideFooters : Booleantrue

Set to true to hide the footer elements

Has a corresponding runtime hideFooters property.
hideHeaders : Booleanfalse

Set to true to hide the column header elements

Has a corresponding runtime hideHeaders property.
hideHorizontalScrollbar : Booleanfalse

Set to true to hide the Grid's horizontal scrollbar(s)
maskDefaults : MaskConfig

Grids change the maskDefaults to cover only their body element.
monitorResize : Booleantrue

Grid monitors window resize by default.
preserveFocusOnDatasetChange : Booleantrue

True to preserve focused cell after loading new data
preserveScrollOnDatasetChange : Booleanfalse

Specify true to preserve vertical scroll position after store actions that trigger a refresh event, such as loading new data and filtering.
readOnly : Booleanfalse

Set to true to make the grid read-only, by disabling any UIs for modifying data.

Note that checks MUST always also be applied at the server side.

Has a corresponding runtime readOnly property.
rowLines : Booleantrue

Set to false to not show row lines. End result might be overruled by/differ between themes.

Has a corresponding runtime rowLines property.
showDirty : Boolean/Objectfalse
Configure as true to have the grid show a red "changed" tag in cells whose field value has changed and not yet been committed.

Set showDirty.duringEdit to true to show the red tag while editing a cell
```
showDirty : {
    duringEdit : true
}
```
Set showDirty.newRecord to true to show the red tag for all the cells of the new record
```
showDirty : {
    newRecord : true
}
```
- duringEdit : Boolean
  
  Set to true to show the red tag while editing a cell
- newRecord : Boolean
  
  Set to true to show the red tag for all the cells of the new record

subGridConfigs : Object<String, SubGridConfig>

An object containing sub grid configuration objects keyed by a region property. By default, grid has a 'locked' region (if configured with locked columns) and a 'normal' region. The 'normal' region defaults to use flex: 1.

This config can be used to reconfigure the "built-in" sub grids or to define your own.

Redefining the default regions:

new Grid({
  subGridConfigs : {
    locked : { flex : 1 },
    normal : { width : 100 }
  }
});

const App = props => {
    const subGridConfigs = {
        locked : { flex : 1 },
        normal : { width : 100 }
    };

    return <bryntum-grid subGridConfigs={subGridConfigs} />
}

<bryntum-grid :sub-grid-configs="subGridConfigs" />

export default {
    setup() {
        return {
            subGridConfigs : [
                locked : { flex : 1 },
                normal : { width : 100 }
            ]
        };
    }
}

<bryntum-grid [subGridConfigs]="subGridConfigs"></bryntum-grid>

export class AppComponent {
     subGridConfigs = [
         locked : { flex : 1 },
         normal : { width : 100 }
     ]
 }

Defining your own multi region grid:

new Grid({
  subGridConfigs : {
    left   : { width : 100 },
    middle : { flex : 1 },
    right  : { width  : 100 }
  },

  columns : [
    { field : 'manufacturer', text: 'Manufacturer', region : 'left' },
    { field : 'model', text: 'Model', region : 'middle' },
    { field : 'year', text: 'Year', region : 'middle' },
    { field : 'sales', text: 'Sales', region : 'right' }
  ]
});

transitionDuration : Number500

Animation transition duration in milliseconds.

Has a corresponding runtime transitionDuration property.
scrollManager : ScrollManagerConfig/ScrollManager

Configuration values for the ScrollManager class on initialization. Returns the ScrollManager at runtime.

Has a corresponding runtime scrollManager property.
scrollable : Boolean/ScrollerConfig/Scroller
Configures whether the grid is scrollable in the Y axis. This is used to configure a Scroller. See the scrollerClass config option.

By default the grid is scrollable in the Y axis. If your platform shows scrollbars, they will appear when the content of the grid overflows.

To always show a scrollbar - even an empty one when there is no overflow - configure this as:
```
   scrollable : {
       overflowY : 'scroll'
   }
```
scrollerClass : Scroller

The class to instantiate to use as the scrollable. Defaults to Scroller.
enableTextSelection : Booleanfalse

Set to true to allow text selection in the grid cells. Note, this cannot be used simultaneously with the RowReorder feature.
disableGridColumnIdWarning : Booleanfalse

Set to true to not get a warning when calling getState when there is a column configured without an id. But the recommended action is to always configure columns with an id when using states.
animateTreeNodeToggle : Booleantrue

DEPRECATED

Deprecated:
7.0.0 Deprecated animateTreeNodeToggle. Use transition.toggleTreeNode instead

When the Tree feature is in use and the Store is a tree store, this config may be set to true to visually animate branch node expand and collapse operations.
This is not supported in Scheduler and Gantt

Has a corresponding runtime animateTreeNodeToggle property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isGridBase : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of GridBase class, or subclass thereof.

columns : ColumnStore/ColumnConfig/ColumnStoreConfig

Accepts column definitions for the grid during initialization. They will be used to create Column instances that are added to a ColumnStore.

At runtime it returns the ColumnStore.

Initialization using column config objects:

new Grid({
  columns : [
    { text : 'Alias', field : 'alias' },
    { text : 'Superpower', field : 'power' }
  ]
});

Also accepts a store config object:

new Grid({
  columns : {
    data : [
      { text : 'Alias', field : 'alias' },
      { text : 'Superpower', field : 'power' }
    ],
    listeners : {
      update() {
        // Some update happened
      }
    }
  }
});

Access the ColumnStore at runtime to manipulate columns:

grid.columns.add({ field : 'column', text : 'New column' });

Replacing the columns fully at runtime:

grid.columns = [{ field : 'column', text : 'New column' }];

Has a corresponding columns config.

data : Object[]/Model[]

NON-LAZY-LOAD
Convenient shortcut to set data in grids store both during initialization and at runtime. Can also be used to retrieve data at runtime, although we do recommend interacting with Grids store instead using the store property.

Setting initial data during initialization:
```
const grid = new Grid({
    data : [
      { id : 1, name : 'Batman' },
      { id : 2, name : 'Robin' },
      ...
    ]
});
```
Setting data at runtime:
```
grid.data = [
    { id : 3, name : 'Joker' },
    ...
];
```
Getting data at runtime:
```
const records = store.data;
```
Note that a Store will be created during initialization if none is specified.

Has a corresponding data config.
emptyText : String/EmptyTextDomConfigL{noRows}
Text or HTML, or a EmptyTextDomConfig block to display when there is no data to display in the grid. When using multiple Grid regions, provide the region property to decide where the text is shown. By default, it is shown in the first region.
```
new Grid({
    emptyText : {
        region : 'locked',
        text   : 'No data available'
    }
})
```
Has a corresponding emptyText config.
preserveScroll : PreserveScrollOptions/Booleanfalse

Preserve the grid's vertical scroll position when changesets are applied, as in the case of remote changes, or when stores are configured with syncDataOnLoad.

Has a corresponding preserveScroll config.
rowHeight : Number

Row height in pixels. This allows the default height for rows to be controlled. Note that it may be overridden by specifying a rowHeight on a per record basis, or from a column renderer.

When initially configured as null, an empty row will be measured and its height will be used as default row height, enabling it to be controlled using CSS

Has a corresponding rowHeight config.
store : Store/StoreConfig
Store that holds records to display in the grid, or a store config object. If the configuration contains a readUrl, an AjaxStore will be created.

Note that a store will be created during initialization if none is specified.

Supplying a store config object at initialization time:
```
const grid = new Grid({
    store : {
        fields : ['name', 'powers'],
        data   : [
            { id : 1, name : 'Aquaman', powers : 'Decent swimmer' },
            { id : 2, name : 'Flash', powers : 'Pretty fast' },
        ]
    }
});
```
Accessing the store at runtime:
```
grid.store.sort('powers');
```
Has a corresponding store config.
contentHeight : Number

private

READONLY

Returns content height calculated from row manager
transition : Object
Configure UI transitions for various actions in the grid.
- insertRecord : Boolean
  
  Transition record insertions
- removeRecord : Boolean
  
  Transition record removals
- toggleColumn : Boolean
  
  Transition column visibility changes
- expandCollapseColumn : Boolean
  
  Transition parent/group column expand/collapse
- toggleRegion : Boolean
  
  Transition region expand/collapse
- toggleTreeNode : Boolean
  
  Transition tree node expand/collapse
- toggleGroup : Boolean
  
  Transition group expand/collapse
- filterRemoval : Booleanfalse
  
  Transition row removals caused by filtering (under specific conditions)
Has a corresponding transition config.
isGridBase : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of GridBase class, or subclass thereof.
bodyHeight : Number

READONLY

Body height
footerHeight : Number

READONLY

Footer height
headerHeight : Number

READONLY

Header height
cellEllipsis : Booleantrue

Set to false to crop text in grid cells without ellipsis (...). When enabled, cells containing pure use display : block, instead of display : flex to allow ellipsis to work. NOTE Only supported in browsers that support :has() CSS selector

Has a corresponding cellEllipsis config.
columnLines : Booleantrue

Set to false to not show column lines. End result might be overruled by/differ between themes.

Has a corresponding columnLines config.
hideFooters : Booleantrue

Set to true to hide the footer elements

Has a corresponding hideFooters config.
hideHeaders : Booleanfalse

Set to true to hide the column header elements

Has a corresponding hideHeaders config.
readOnly : Booleanfalse

Set to true to make the grid read-only, by disabling any UIs for modifying data.

Note that checks MUST always also be applied at the server side.

Has a corresponding readOnly config.
rowLines : Booleantrue

Set to false to not show row lines. End result might be overruled by/differ between themes.

Has a corresponding rowLines config.
transitionDuration : Number500

Animation transition duration in milliseconds.

Has a corresponding transitionDuration config.
bottomRow : Row

private

READONLY

Get the Row currently displayed furthest down.
firstVisibleRow : Row

READONLY

Get the topmost visible grid row
lastVisibleRow : Row

READONLY

Get the last visible grid row
topRow : Row

private

READONLY

Get the Row that is currently displayed at top.
scrollManager : ScrollManagerConfig/ScrollManager

READONLY

Configuration values for the ScrollManager class on initialization. Returns the ScrollManager at runtime.

Has a corresponding scrollManager config.
animateTreeNodeToggle : Booleantrue

DEPRECATED

Deprecated:
7.0.0 Deprecated animateTreeNodeToggle. Use transition.toggleTreeNode instead

When the Tree feature is in use and the Store is a tree store, this config may be set to true to visually animate branch node expand and collapse operations.
This is not supported in Scheduler and Gantt

Has a corresponding animateTreeNodeToggle config.

Functions

Functions are methods available for calling on the class

captureScrollTargetRow( )

private

Remember scroll position when store is about to apply a changeset
doDestroy( )

private

Cleanup
measureRowHeight( )

private

Creates a fake subgrid with one row and measures its height. Result is used as rowHeight.
onThemeChange( )

private

Handler for global theme change event (triggered by shared.js). Remeasures row height.
populateCellMenu( options )

internal

Populates the cell context menu. Chained in features to add menu items.
populateHeaderMenu( options )

internal

Populates the header context menu. Chained in features to add menu items.
refreshVirtualScrollbars( )

private

Recalculates virtual scrollbars widths and scrollWidth
restoreScrollTargetRow( )

private

Restore scroll position. Go to the topmost row formerly in the view that is still present in the dataset.
setGridClassList( )

private

Adds extra classes to the Grid element after it's been configured. Also iterates through features, thus ensuring they have been initialized.
getRecordCoords( recordOrId )
: Object

private

Returns top and bottom for rendered row or estimated coordinates for unrendered.
getCell( cellContext )
: HTMLElement/null

Returns a cell if rendered or null if not found.
getColumnFromElement( element )
: Column

Searches up from specified element for a grid cell or a header and returns the column which the cell belongs to
getFooterElement( columnId )
: HTMLElement

Returns the footer element for the column (only relevant when using the Summary feature)
getHeaderElement( columnId )
: HTMLElement

Returns the header element for the column
getRecordFromElement( element )
: Model

Searches up from the specified element for a grid row and returns the record associated with that row.

highlightCells( options )

: Promise

ASYNC

Highlights the specified cells. If scroll is set to true (which it is by default), the highlighted cell closest to the viewport center will be scrolled into view.

By default, the highlighting will fade out non-highlighted cells. Use the mode option to change the highlight style to apply a background color to the highlighted cells instead.

// Highlight single cell (default fade mode)
grid.highlightCells({ cells : { id : 1, field : 'name' } });
// Highlight with background color
grid.highlightCells({ cells : { id : 1, field : 'name' }, mode : 'color' });
// Highlight multiple cells
grid.highlightCells({ cells : [{ id : 1, field : 'name' }, { id : 2, field : 'age' }] });
// Don't scroll to highlighted cell, and don't un-highlight on click
grid.highlightCells({ cells : { id : 1, field : 'name' }, scroll : false, unhighlightOnClick : false });
// Auto-unhighlight after 2 seconds
grid.highlightCells({ cells : { id : 1, field : 'name' }, unhighlightAfter : 2000 });

maskBody( loadMask )
: Mask
Show a load mask with a spinner and the specified message. When using an AjaxStore masking and unmasking is handled automatically, but if you are loading data in other ways you can call this function manually when your load starts.
```
myLoadFunction() {
  // Show mask before initiating loading
  grid.maskBody('Loading data');
  // Your custom loading code
  load.then(() => {
     // Hide the mask when loading is finished
     grid.unmaskBody();
  });
}
```
resumeAnimations( )

Resumes CSS transitions after a row / event has been updated
runWithTransition( fn )
: Promise

ASYNC

Runs a function with transitions enabled (row height, event size etc.). Useful if you want to alter the UI state with a transition.
suspendAnimations( )

Suspends CSS transitions after a row / event has been updated

Multiple calls to suspendAnimations stack up, and will require an equal number of resumeAnimations calls to actually resume animations.

unhighlightCells( options )

Removes highlighting from the specified cells. If no cells are passed, all highlighted cells will be un-highlighted.

grid.unhighlightCells({ cells : { id : 1, columnId : 'name' } }); // single cell
grid.unhighlightCells({ cells : [{ id : 1, columnId : 'name' }, { id : 2, columnId : 'age' }] }); // multiple cells
grid.unhighlightCells(); // all cells

unmaskBody( )

Hide the load mask.
refreshColumn( column, enableTransitionstrue )

Triggers a render of all the cells in a column.
refreshHeader( column )

Rerender a single grid header
refreshHeaders( )

Rerenders all grid headers
refreshRow( record )

Triggers a render of all the cells in the row for the passed record.

Since Grid uses virtualized rows, calling this method for a record that is not currently displayed in a row will not have any effect.

Manipulating records and Grid settings refreshes the Grid automatically. You should only need to call this function if you have outside data/settings unknown to the Grid that has changed and requires Grid to update the row to reflect the changes
refreshRows( records )

Triggers a render of all the cells in the rows for the passed records. Leave the argument out to refresh all rows.

Since Grid uses virtualized rows, calling this method for records that are not currently displayed in rows will not have any effect.

Manipulating records and Grid settings refreshes the Grid automatically. You should only need to call this function if you have outside data/settings unknown to the Grid that has changed and requires Grid to update rows to reflect the changes
renderContents( )

Rerenders the grids rows, headers and footers, completely replacing all row elements with new ones
renderFooter( footerContainer, element )

private

Called after footers have been rendered to the footerContainer. This does not do anything, it's just for Features to hook in to.
renderHeader( headerContainer, element )

private

Called after headers have been rendered to the headerContainer. This does not do anything, it's just for Features to hook in to.
renderRows( )

Rerenders all grid rows, completely replacing all row elements with new ones
resumeRefresh( triggertrue )

Resumes UI refreshes after updates to the underlying data.

Multiple calls to suspendRefresh stack up, and will require an equal number of resumeRefresh calls to actually resume UI refresh.

Specify false as the first param to not refresh if this call unblocked the refresh suspension.
suspendRefresh( )

Suspends UI refreshes after updates to the underlying data.

Multiple calls to suspendRefresh stack up, and will require an equal number of resumeRefresh calls to actually resume UI refresh.
getRow( index )
: Row

private

Get the Row at specified index. "Wraps" index if larger than available rows.
getRowById( recordOrId )
: Row

private

Get Row for specified record id.
getRowFor( recordOrId )
: Row

Get a Row for either a record, a record id or an HTMLElement
getRowFromElement( element )
: Row

private

Get a Row from an HTMLElement
disableScrollingCloseToEdges( subGrid )

Deactivates automatic scrolling of a subGrid when mouse is moved closed to the edges
enableScrollingCloseToEdges( subGrid )

Activates automatic scrolling of a subGrid when mouse is moved closed to the edges. Useful when dragging DOM nodes from outside this grid and dropping on the grid.
initScroll( )

private

Scroll syncing for normal headers & grid + triggers virtual rendering for vertical scroll

Triggers: scroll
onRowManagerRequestScrollChange( bottomMostRowY )

private

Responds to request from RowManager to adjust scroll position. Happens when jumping to a scroll position with variable row height.
restoreScroll( state )

Restore scroll state. If state is not specified, restores the last stored state.
scrollCellIntoView( cellContext )
: Promise

ASYNC

Scrolls a locally available record's cell into view (if it is not already).
scrollColumnIntoView( column, options )
: Promise

ASYNC

Scrolls a column into view (if it is not already)
scrollRowIntoView( recordOrId, options )
: Promise

ASYNC

Scrolls a locally available record's row into view. If row isn't rendered it tries to calculate position. Accepts the BryntumScrollOptionscolumn property
scrollToBottom( )
: Promise

ASYNC

NON-LAZY-LOAD

Scroll all the way down
scrollToTop( )
: Promise

ASYNC

Scroll all the way up
storeScroll( )
: Object

Stores the scroll state. Returns an objects with a scrollTop number value for the entire grid and a scrollLeft object containing a left position scroll value per sub grid.
bindStore( )

private

Hooks up data store listeners
onStoreAdd( )

private

Refreshes rows when data is added to the store
onStoreAfterRequest( )

private

Hides load mask after a load request ends either in success or failure
onStoreBeforeRequest( )

private

Shows a load mask while the connected store is loading
onStoreDataChange( )

private

Refreshes rows when data is changed in the store
onStoreException( )

private

Responds to exceptions signalled by the store
onStoreRecordIdChange( )

private

The hook is called when the id of a record has changed.
onStoreRemove( )

private

Animates removal of record.
onStoreRemoveAll( )

private

Rerenders grid when all records have been removed
onStoreUpdateRecord( )

private

Rerenders a cell if a record is updated in the store
fixSizes( )

private

Sets widths and heights for headers, rows and other parts of the grid as needed
refreshTotalHeight( height, immediatefalse )

private

Makes height of vertical scroller match estimated total height of grid. Called when scrolling vertically and when showing/hiding rows.
startEditing( cellContext )
: Promise

ASYNC

FROM-FEATURE

Start editing specified cell. If no cellContext is given it starts with the first cell of the first visible row. This function is exposed on Grid and can thus be called as grid.startEditing(...)

Added by the CellEdit feature, only available when that feature is enabled.

Triggers: startCellEdit
cancelEditing( silent )
: Boolean

FROM-FEATURE

Cancel editing, hides the editor. This function is exposed on Grid and can thus be called as grid.cancelEditing(...)

Added by the CellEdit feature, only available when that feature is enabled.

Triggers: cancelCellEdit
finishEditing( )
: Promise

ASYNC

FROM-FEATURE

Finish editing, update the underlying record and hide the editor. This function is exposed on Grid and can thus be called as grid.finishEditing(...)

Added by the CellEdit feature, only available when that feature is enabled.

Triggers: finishCellEdit
showContextMenu( event, alignSpec )
: Promise

ASYNC

Shows the context menu.
collapseAll( )

FROM-FEATURE

NON-LAZY-LOAD

Collapse all groups. This function is exposed on Grid and can thus be called as grid.collapseAll()

Added by the Group feature, only available when that feature is enabled.
expandAll( )

FROM-FEATURE

NON-LAZY-LOAD

Expand all groups. This function is exposed on Grid and can thus be called as grid.expandAll()

Added by the Group feature, only available when that feature is enabled.
copyRows( isCutfalse )
: Promise

ASYNC

FROM-FEATURE

Copy or cut selected rows to clipboard to paste later

Added by the RowCopyPaste feature, only available when that feature is enabled.

Triggers: beforeCopy, copy
pasteRows( record )
: Model[]

ASYNC

FROM-FEATURE

Paste rows below selected or passed record

Added by the RowCopyPaste feature, only available when that feature is enabled.

Triggers: beforePaste
expandRow( record )
: Promise

ASYNC

FROM-FEATURE

Tells the RowExpander that the provided record should be expanded. If or when the record is rendered into view, the record will be expanded.

Promise will resolve when the row gets expanded. Note that this can be much later than the actual expand call, depending on response times and if current record is in view or not.

Added by the RowExpander feature, only available when that feature is enabled.
collapseRow( record )
: Promise

ASYNC

FROM-FEATURE

Tells the RowExpander that the provided record should be collapsed. If the record is in view, it will be collapsed. If the record is not in view, it will simply not be expanded when rendered into view.

Added by the RowExpander feature, only available when that feature is enabled.
split( options )
: Promise

ASYNC

FROM-FEATURE
Split the grid into two or four parts.
- Splits into two when passed direction : 'vertical', direction : 'horizontal' or atColumn or atRecord.
- Splits into four when passed direction : 'both' or atColumn and atRecord.
```
// Split horizontally (at the row in the center of the grid)
await grid.split({ direction : 'horizontal' });

// Split both ways by a specific column and record
await grid.split({
   atRecord : grid.store.getById(10),
   atColumn : grid.columns.get('city')
});
```
To return to a single grid, call unsplit.

Note that this function is callable directly on the grid instance.

Added by the Split feature, only available when that feature is enabled.
unsplit( )
: Promise

ASYNC

FROM-FEATURE

Remove splits, returning to a single grid.

Note that this function is callable directly on the grid instance.

Added by the Split feature, only available when that feature is enabled.
toggleCollapse( idOrRecord, collapse )
: Promise

ASYNC

FROM-FEATURE

Collapse an expanded node or expand a collapsed. Optionally forcing a certain state. This function is exposed on Grid and can thus be called as grid.toggleCollapse()

Added by the Tree feature, only available when that feature is enabled.
collapse( idOrRecord )
: Promise

ASYNC

FROM-FEATURE

Collapse a single node. This function is exposed on Grid and can thus be called as grid.collapse()

Added by the Tree feature, only available when that feature is enabled.
expand( idOrRecord )
: Promise

ASYNC

FROM-FEATURE

Expand a single node. This function is exposed on Grid and can thus be called as grid.expand(idOrRecord)

Added by the Tree feature, only available when that feature is enabled.
expandTo( idOrRecord, scrollIntoViewtrue )
: Promise

ASYNC

FROM-FEATURE

Expands parent nodes to make this node "visible". This function is exposed on Grid and can thus be called as grid.expandTo()

Added by the Tree feature, only available when that feature is enabled.
group( levels )
: Promise

ASYNC

FROM-FEATURE

NON-LAZY-LOAD
Transforms the data according to the supplied levels.

Yields the same result as assigning to levels.
```
// Transform into a tree with two parent levels
grid.group('status', record => (record.percentDone % 10) * 10);
```
Added by the TreeGroup feature, only available when that feature is enabled.
clearGroups( )
: Promise

ASYNC

FROM-FEATURE

NON-LAZY-LOAD
Clears the previously applied transformation, restoring data to its initial state.

Yields the same result as assigning null to levels.
```
// Restore original data
grid.clearGroups();
```
Added by the TreeGroup feature, only available when that feature is enabled.
refreshGroups( )

private

FROM-FEATURE

NON-LAZY-LOAD
Refreshes the store tree grouping by re-applying the current transformation.
```
// Refresh groups
grid.refreshGroups();
```
Added by the TreeGroup feature, only available when that feature is enabled.
showPrintDialog( )
: Promise

ASYNC

Shows the print dialog
print( config )
: Promise

ASYNC

Starts the print process. Accepts a config object which overrides any default configs. NOTE Component should not be interacted with when print is in progress

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeColumnCollapseToggle

This event is triggered before a parent column is collapsed or expanded.
beforeRenderRow

Fires before a row is rendered.
beforeRenderRows

Grid rows are about to be rendered
columnCollapseToggle

This event is triggered after a parent column has been collapsed or expanded.
dataChange

Fired when data in the store changes.

Basically a relayed version of the store's own change event, decorated with a store property. See the store change event documentation for more information.
renderRow

Fires after a row is rendered.
renderRows

Grid rows have been rendered
scroll

Grid has scrolled vertically
subGridCollapse

Fires after a sub grid is collapsed.
subGridExpand

Fires after a sub grid is expanded.
copy

FROM-FEATURE

Fires on the owning Grid after a copy action is performed.

Added by the CellCopyPaste feature, only available when that feature is enabled.
beforeCopy

ASYNC

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before a copy action is performed, return false to prevent the action

Added by the CellCopyPaste feature, only available when that feature is enabled.
paste

FROM-FEATURE

Fires on the owning Grid after a paste action is performed.

Added by the CellCopyPaste feature, only available when that feature is enabled.
beforePaste

ASYNC

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before a paste action is performed, return false to prevent the action

Added by the CellCopyPaste feature, only available when that feature is enabled.
startCellEdit

FROM-FEATURE

Fires on the owning Grid when editing starts

Added by the CellEdit feature, only available when that feature is enabled.
beforeFinishCellEdit

FROM-FEATURE

Fires on the owning Grid before the cell editing is finished, return false to signal that the value is invalid and editing should not be finalized.

Added by the CellEdit feature, only available when that feature is enabled.
finishCellEdit

FROM-FEATURE

Fires on the owning Grid when cell editing is finished

Added by the CellEdit feature, only available when that feature is enabled.
beforeCancelCellEdit

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before the cell editing is canceled, return false to prevent cancellation.

Added by the CellEdit feature, only available when that feature is enabled.
cancelCellEdit

FROM-FEATURE

Fires on the owning Grid when editing is cancelled

Added by the CellEdit feature, only available when that feature is enabled.
beforeCellEditStart

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before editing starts, return false to prevent editing

Added by the CellEdit feature, only available when that feature is enabled.
beforeCellRangeEdit

PREVENTABLE

FROM-FEATURE

Fires for each selected record on the owning Grid before editing a range of selected cell values

Added by the CellEdit feature, only available when that feature is enabled.
beforeCellRangeDelete

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before deleting a range of selected cell values by pressing Backspace or Delete buttons while autoEdit is set to true. Return false to prevent editing.

Added by the CellEdit feature, only available when that feature is enabled.
contextMenuItem

This event fires on the owning widget when an item is selected in the context menu.
contextMenuToggleItem

This event fires on the owning widget when a check item is toggled in the context menu.
cellMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This event fires on the owning grid before the context menu is shown for a cell. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the CellMenu feature, only available when that feature is enabled.
cellMenuShow

FROM-FEATURE

This event fires on the owning grid after the context menu is shown for a cell.

Added by the CellMenu feature, only available when that feature is enabled.
cellMenuItem

FROM-FEATURE

This event fires on the owning grid when an item is selected in the cell context menu.

Added by the CellMenu feature, only available when that feature is enabled.
cellMenuToggleItem

FROM-FEATURE

This event fires on the owning grid when a check item is toggled in the cell context menu.

Added by the CellMenu feature, only available when that feature is enabled.
beforeColumnDragStart

PREVENTABLE

FROM-FEATURE

This event is fired prior to starting a column drag gesture. The drag is canceled if a listener returns false.

Added by the ColumnReorder feature, only available when that feature is enabled.
columnDragStart

FROM-FEATURE

This event is fired when a column drag gesture has started.

Added by the ColumnReorder feature, only available when that feature is enabled.
columnDrag

FROM-FEATURE

This event is fired when a column is being dragged, and you can set the valid flag on the context object to indicate whether the drop position is valid or not.

Added by the ColumnReorder feature, only available when that feature is enabled.
beforeColumnDropFinalize

PREVENTABLE

FROM-FEATURE

This event is fired when a column is dropped, and you can return false from a listener to abort the operation.

Added by the ColumnReorder feature, only available when that feature is enabled.
columnDrop

PREVENTABLE

FROM-FEATURE

This event is always fired after a column is dropped. The valid param is true if the operation was not vetoed and the column was moved in the column store.

Added by the ColumnReorder feature, only available when that feature is enabled.
beforeColumnResize

PREVENTABLE

FROM-FEATURE

This event is fired prior to starting a column resize gesture. The resize is canceled if a listener returns false.

Added by the ColumnResize feature, only available when that feature is enabled.
columnResizeStart

FROM-FEATURE

This event is fired when a column resize gesture starts.

Added by the ColumnResize feature, only available when that feature is enabled.
columnResize

FROM-FEATURE

This event is fired after a resize gesture is completed.

Added by the ColumnResize feature, only available when that feature is enabled.
beforeFillHandleDragStart

PREVENTABLE

FROM-FEATURE

Fired before dragging of the FillHandle starts, return false to prevent the drag operation.

Added by the FillHandle feature, only available when that feature is enabled.
fillHandleDragStart

PREVENTABLE

FROM-FEATURE

Fired when dragging of the FillHandle starts.

Added by the FillHandle feature, only available when that feature is enabled.
fillHandleDrag

FROM-FEATURE

Fired while dragging the FillHandle.

Added by the FillHandle feature, only available when that feature is enabled.
fillHandleBeforeDragFinalize

ASYNC

PREVENTABLE

FROM-FEATURE

Fired before the FillHandle dragging is finalized and values are applied to cells, return false to prevent the drag operation from applying data changes.

Added by the FillHandle feature, only available when that feature is enabled.
fillHandleDragEnd

FROM-FEATURE

Fired after a FillHandle drag operation.

Added by the FillHandle feature, only available when that feature is enabled.
fillHandleDragAbort

FROM-FEATURE

Fired when a FillHandle drag operation is aborted.

Added by the FillHandle feature, only available when that feature is enabled.
beforeToggleGroup

PREVENTABLE

FROM-FEATURE

Fired when a group is going to be expanded or collapsed using the UI. Returning false from a listener prevents the operation

Added by the Group feature, only available when that feature is enabled.
toggleGroup

FROM-FEATURE

Fired when one or more groups are expanded or collapsed

Added by the Group feature, only available when that feature is enabled.
headerMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This event fires on the owning Grid before the context menu is shown for a header. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the HeaderMenu feature, only available when that feature is enabled.
headerMenuShow

FROM-FEATURE

This event fires on the owning Grid after the context menu is shown for a header

Added by the HeaderMenu feature, only available when that feature is enabled.
headerMenuItem

FROM-FEATURE

This event fires on the owning Grid when an item is selected in the header context menu.

Added by the HeaderMenu feature, only available when that feature is enabled.
headerMenuToggleItem

FROM-FEATURE

This event fires on the owning Grid when a check item is toggled in the header context menu.

Added by the HeaderMenu feature, only available when that feature is enabled.
splitterDragStart

FROM-FEATURE

Fired by the Grid when a sub-grid resize gesture starts

Added by the RegionResize feature, only available when that feature is enabled.
splitterDragEnd

FROM-FEATURE

Fired by the Grid after a sub-grid has been resized using the splitter

Added by the RegionResize feature, only available when that feature is enabled.
splitterCollapseClick

PREVENTABLE

FROM-FEATURE

Fired by the Grid when the collapse icon is clicked. Return false to prevent the default collapse action, if you want to implement your own behavior.

Added by the RegionResize feature, only available when that feature is enabled.
splitterExpandClick

PREVENTABLE

FROM-FEATURE

Fired by the Grid when the expand icon is clicked. Return false to prevent the default expand action, if you want to implement your own behavior.

Added by the RegionResize feature, only available when that feature is enabled.
beforeStartRowEdit

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before editing starts, return false to prevent editing

Added by the RowEdit feature, only available when that feature is enabled.
startRowEdit

FROM-FEATURE

Fires on the owning Grid when editing starts

Added by the RowEdit feature, only available when that feature is enabled.
beforeFinishRowEdit

ASYNC

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before the row editing is finished, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be updated as soon as a field is changed, so this event would not prevent the record from being updated, only the editor being hidden.

Added by the RowEdit feature, only available when that feature is enabled.
finishRowEdit

ASYNC

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before the row editing is finished, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be updated as soon as a field is changed, so this event would not prevent the record from being updated, only the editor being hidden.

Added by the RowEdit feature, only available when that feature is enabled.
beforeCancelRowEdit

ASYNC

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before the row editing is canceled, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be reset to initial values on cancel of editing.

Added by the RowEdit feature, only available when that feature is enabled.
beforeRowExpand

ASYNC

PREVENTABLE

FROM-FEATURE

This event fires before row expand is started.

Returning false from a listener prevents the RowExpander to expand the row.

Note that this event fires when the RowExpander toggles the row, not when the actual row expander body is rendered. Most of the time this is synchronous, but in the case of a row that is not yet rendered into view by scrolling, it can happen much later.

Added by the RowExpander feature, only available when that feature is enabled.
beforeRowCollapse

ASYNC

PREVENTABLE

FROM-FEATURE

This event fires before row collapse is started.

Returning false from a listener prevents the RowExpander to collapse the row.

Note that this event fires when the RowExpander toggles the row, not when the actual row expander body is rendered. Most of the time this is synchronous, but in the case of a row that is not yet rendered into view by scrolling, it can happen much later.

Added by the RowExpander feature, only available when that feature is enabled.
rowExpand

FROM-FEATURE

This event fires when a row expand has finished expanding.

Note that this event fires when actual row expander body is rendered, and not necessarily in immediate succession of an expand action. In the case of expanding a row that is not yet rendered into view by scrolling, it can happen much later.

Added by the RowExpander feature, only available when that feature is enabled.
rowCollapse

FROM-FEATURE

This event fires when a row has finished collapsing.

Added by the RowExpander feature, only available when that feature is enabled.
gridRowBeforeDragStart

PREVENTABLE

FROM-FEATURE

Fired before dragging starts, return false to prevent the drag operation.

Added by the RowReorder feature, only available when that feature is enabled.
gridRowDragStart

FROM-FEATURE

Fired when dragging starts.

Added by the RowReorder feature, only available when that feature is enabled.
gridRowDrag

FROM-FEATURE

Fired while the row is being dragged, in the listener function you have access to context.insertBefore a grid / tree record, and additionally context.parent (a TreeNode) for trees. You can signal that the drop position is valid or invalid by setting context.valid = false;

Added by the RowReorder feature, only available when that feature is enabled.
gridRowBeforeDropFinalize

ASYNC

PREVENTABLE

FROM-FEATURE

Fired before the row drop operation is finalized. You can return false to abort the drop operation, or a Promise yielding true / false which allows for asynchronous abort (e.g. first show user a confirmation dialog).

Added by the RowReorder feature, only available when that feature is enabled.
gridRowDrop

FROM-FEATURE

Fired after the row drop operation has completed, regardless of validity

Added by the RowReorder feature, only available when that feature is enabled.
gridRowDragAbort

FROM-FEATURE

Fired when a row drag operation is aborted

Added by the RowReorder feature, only available when that feature is enabled.
split

FROM-FEATURE

Fires when splitting the Grid.

Added by the Split feature, only available when that feature is enabled.
unsplit

FROM-FEATURE

Fires when un-splitting the Grid.

Added by the Split feature, only available when that feature is enabled.
lockRows

FROM-FEATURE

Fires when row locking is enabled.

Added by the LockRows feature, only available when that feature is enabled.
unlockRows

FROM-FEATURE

Fires when row locking is disabled.

Added by the LockRows feature, only available when that feature is enabled.
collapseNode

FROM-FEATURE

Fired before a parent node record is collapsed.

Added by the Tree feature, only available when that feature is enabled.
expandNode

FROM-FEATURE

Fired after a parent node record is expanded.

Added by the Tree feature, only available when that feature is enabled.
toggleNode

FROM-FEATURE

Fired after a parent node record toggles its collapsed state.

Added by the Tree feature, only available when that feature is enabled.
beforeToggleNode

FROM-FEATURE

Fired before a parent node record toggles its collapsed state.

Added by the Tree feature, only available when that feature is enabled.
treeGroup

FROM-FEATURE

Fired on the owning Grid/Scheduler/Gantt after tree grouping levels change

Added by the TreeGroup feature, only available when that feature is enabled.
beforeCSVExport

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before CSV export starts. Return false to cancel the export.

Added by the ExcelExporter feature, only available when that feature is enabled.
beforeExcelExport

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before Excel export starts. Return false to cancel the export.

Added by the ExcelExporter feature, only available when that feature is enabled.
fileDrop

FROM-FEATURE

Fired when a file is dropped on the widget element

Added by the FileDrop feature, only available when that feature is enabled.
beforePdfExport

PREVENTABLE

FROM-FEATURE

Fires on the owning Grid before export started. Return false to cancel the export.

Added by the PdfExport feature, only available when that feature is enabled.
pdfExport

FROM-FEATURE

Fires on the owning Grid when export has finished

Added by the PdfExport feature, only available when that feature is enabled.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeColumnCollapseToggle

This event is called before a parent column is collapsed or expanded.
onBeforeRenderRow

Called before a row is rendered.
onBeforeRenderRows

Grid rows are about to be rendered
onColumnCollapseToggle

This event is called after a parent column has been collapsed or expanded.
onDataChange

Called when data in the store changes.

Basically a relayed version of the store's own change event, decorated with a store property. See the store change event documentation for more information.
onRenderRow

Called after a row is rendered.
onRenderRows

Grid rows have been rendered
onScroll

Grid has scrolled vertically
onSubGridCollapse

Called after a sub grid is collapsed.
onSubGridExpand

Called after a sub grid is expanded.
onCopy

FROM-FEATURE

Called on the owning Grid after a copy action is performed.

Added by the CellCopyPaste feature, only available when that feature is enabled.
onBeforeCopy

ASYNC

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before a copy action is performed, return false to prevent the action

Added by the CellCopyPaste feature, only available when that feature is enabled.
onPaste

FROM-FEATURE

Called on the owning Grid after a paste action is performed.

Added by the CellCopyPaste feature, only available when that feature is enabled.
onBeforePaste

ASYNC

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before a paste action is performed, return false to prevent the action

Added by the CellCopyPaste feature, only available when that feature is enabled.
onStartCellEdit

FROM-FEATURE

Called on the owning Grid when editing starts

Added by the CellEdit feature, only available when that feature is enabled.
onBeforeFinishCellEdit

FROM-FEATURE

Called on the owning Grid before the cell editing is finished, return false to signal that the value is invalid and editing should not be finalized.

Added by the CellEdit feature, only available when that feature is enabled.
onFinishCellEdit

FROM-FEATURE

Called on the owning Grid when cell editing is finished

Added by the CellEdit feature, only available when that feature is enabled.
onBeforeCancelCellEdit

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before the cell editing is canceled, return false to prevent cancellation.

Added by the CellEdit feature, only available when that feature is enabled.
onCancelCellEdit

FROM-FEATURE

Called on the owning Grid when editing is cancelled

Added by the CellEdit feature, only available when that feature is enabled.
onBeforeCellEditStart

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before editing starts, return false to prevent editing

Added by the CellEdit feature, only available when that feature is enabled.
onBeforeCellRangeEdit

PREVENTABLE

FROM-FEATURE

Called for each selected record on the owning Grid before editing a range of selected cell values

Added by the CellEdit feature, only available when that feature is enabled.
onBeforeCellRangeDelete

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before deleting a range of selected cell values by pressing Backspace or Delete buttons while autoEdit is set to true. Return false to prevent editing.

Added by the CellEdit feature, only available when that feature is enabled.
onContextMenuItem

This handler is called on the owning widget when an item is selected in the context menu.
onContextMenuToggleItem

This handler is called on the owning widget when a check item is toggled in the context menu.
onCellMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This handler is called on the owning grid before the context menu is shown for a cell. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the CellMenu feature, only available when that feature is enabled.
onCellMenuShow

FROM-FEATURE

This handler is called on the owning grid after the context menu is shown for a cell.

Added by the CellMenu feature, only available when that feature is enabled.
onCellMenuItem

FROM-FEATURE

This handler is called on the owning grid when an item is selected in the cell context menu.

Added by the CellMenu feature, only available when that feature is enabled.
onCellMenuToggleItem

FROM-FEATURE

This handler is called on the owning grid when a check item is toggled in the cell context menu.

Added by the CellMenu feature, only available when that feature is enabled.
onBeforeColumnDragStart

PREVENTABLE

FROM-FEATURE

This event is called prior to starting a column drag gesture. The drag is canceled if a listener returns false.

Added by the ColumnReorder feature, only available when that feature is enabled.
onColumnDragStart

FROM-FEATURE

This event is called when a column drag gesture has started.

Added by the ColumnReorder feature, only available when that feature is enabled.
onColumnDrag

FROM-FEATURE

This event is called when a column is being dragged, and you can set the valid flag on the context object to indicate whether the drop position is valid or not.

Added by the ColumnReorder feature, only available when that feature is enabled.
onBeforeColumnDropFinalize

PREVENTABLE

FROM-FEATURE

This event is called when a column is dropped, and you can return false from a listener to abort the operation.

Added by the ColumnReorder feature, only available when that feature is enabled.
onColumnDrop

PREVENTABLE

FROM-FEATURE

This event is always called after a column is dropped. The valid param is true if the operation was not vetoed and the column was moved in the column store.

Added by the ColumnReorder feature, only available when that feature is enabled.
onBeforeColumnResize

PREVENTABLE

FROM-FEATURE

This event is called prior to starting a column resize gesture. The resize is canceled if a listener returns false.

Added by the ColumnResize feature, only available when that feature is enabled.
onColumnResizeStart

FROM-FEATURE

This event is called when a column resize gesture starts.

Added by the ColumnResize feature, only available when that feature is enabled.
onColumnResize

FROM-FEATURE

This event is called after a resize gesture is completed.

Added by the ColumnResize feature, only available when that feature is enabled.
onBeforeFillHandleDragStart

PREVENTABLE

FROM-FEATURE

Called before dragging of the FillHandle starts, return false to prevent the drag operation.

Added by the FillHandle feature, only available when that feature is enabled.
onFillHandleDragStart

PREVENTABLE

FROM-FEATURE

Called when dragging of the FillHandle starts.

Added by the FillHandle feature, only available when that feature is enabled.
onFillHandleDrag

FROM-FEATURE

Called while dragging the FillHandle.

Added by the FillHandle feature, only available when that feature is enabled.
onFillHandleBeforeDragFinalize

ASYNC

PREVENTABLE

FROM-FEATURE

Called before the FillHandle dragging is finalized and values are applied to cells, return false to prevent the drag operation from applying data changes.

Added by the FillHandle feature, only available when that feature is enabled.
onFillHandleDragEnd

FROM-FEATURE

Called after a FillHandle drag operation.

Added by the FillHandle feature, only available when that feature is enabled.
onFillHandleDragAbort

FROM-FEATURE

Called when a FillHandle drag operation is aborted.

Added by the FillHandle feature, only available when that feature is enabled.
onBeforeToggleGroup

PREVENTABLE

FROM-FEATURE

Called when a group is going to be expanded or collapsed using the UI. Returning false from a listener prevents the operation

Added by the Group feature, only available when that feature is enabled.
onToggleGroup

FROM-FEATURE

Called when one or more groups are expanded or collapsed

Added by the Group feature, only available when that feature is enabled.
onHeaderMenuBeforeShow

PREVENTABLE

FROM-FEATURE

This handler is called on the owning Grid before the context menu is shown for a header. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

Added by the HeaderMenu feature, only available when that feature is enabled.
onHeaderMenuShow

FROM-FEATURE

This handler is called on the owning Grid after the context menu is shown for a header

Added by the HeaderMenu feature, only available when that feature is enabled.
onHeaderMenuItem

FROM-FEATURE

This handler is called on the owning Grid when an item is selected in the header context menu.

Added by the HeaderMenu feature, only available when that feature is enabled.
onHeaderMenuToggleItem

FROM-FEATURE

This handler is called on the owning Grid when a check item is toggled in the header context menu.

Added by the HeaderMenu feature, only available when that feature is enabled.
onSplitterDragStart

FROM-FEATURE

Called by the Grid when a sub-grid resize gesture starts

Added by the RegionResize feature, only available when that feature is enabled.
onSplitterDragEnd

FROM-FEATURE

Called by the Grid after a sub-grid has been resized using the splitter

Added by the RegionResize feature, only available when that feature is enabled.
onSplitterCollapseClick

PREVENTABLE

FROM-FEATURE

Called by the Grid when the collapse icon is clicked. Return false to prevent the default collapse action, if you want to implement your own behavior.

Added by the RegionResize feature, only available when that feature is enabled.
onSplitterExpandClick

PREVENTABLE

FROM-FEATURE

Called by the Grid when the expand icon is clicked. Return false to prevent the default expand action, if you want to implement your own behavior.

Added by the RegionResize feature, only available when that feature is enabled.
onBeforeStartRowEdit

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before editing starts, return false to prevent editing

Added by the RowEdit feature, only available when that feature is enabled.
onStartRowEdit

FROM-FEATURE

Called on the owning Grid when editing starts

Added by the RowEdit feature, only available when that feature is enabled.
onBeforeFinishRowEdit

ASYNC

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before the row editing is finished, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be updated as soon as a field is changed, so this event would not prevent the record from being updated, only the editor being hidden.

Added by the RowEdit feature, only available when that feature is enabled.
onFinishRowEdit

ASYNC

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before the row editing is finished, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be updated as soon as a field is changed, so this event would not prevent the record from being updated, only the editor being hidden.

Added by the RowEdit feature, only available when that feature is enabled.
onBeforeCancelRowEdit

ASYNC

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before the row editing is canceled, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be reset to initial values on cancel of editing.

Added by the RowEdit feature, only available when that feature is enabled.
onBeforeRowExpand

ASYNC

PREVENTABLE

FROM-FEATURE

This handler is called before row expand is started.

Returning false from a listener prevents the RowExpander to expand the row.

Note that this handler is called when the RowExpander toggles the row, not when the actual row expander body is rendered. Most of the time this is synchronous, but in the case of a row that is not yet rendered into view by scrolling, it can happen much later.

Added by the RowExpander feature, only available when that feature is enabled.
onBeforeRowCollapse

ASYNC

PREVENTABLE

FROM-FEATURE

This handler is called before row collapse is started.

Returning false from a listener prevents the RowExpander to collapse the row.

Note that this handler is called when the RowExpander toggles the row, not when the actual row expander body is rendered. Most of the time this is synchronous, but in the case of a row that is not yet rendered into view by scrolling, it can happen much later.

Added by the RowExpander feature, only available when that feature is enabled.
onRowExpand

FROM-FEATURE

This handler is called when a row expand has finished expanding.

Note that this handler is called when actual row expander body is rendered, and not necessarily in immediate succession of an expand action. In the case of expanding a row that is not yet rendered into view by scrolling, it can happen much later.

Added by the RowExpander feature, only available when that feature is enabled.
onRowCollapse

FROM-FEATURE

This handler is called when a row has finished collapsing.

Added by the RowExpander feature, only available when that feature is enabled.
onGridRowBeforeDragStart

PREVENTABLE

FROM-FEATURE

Called before dragging starts, return false to prevent the drag operation.

Added by the RowReorder feature, only available when that feature is enabled.
onGridRowDragStart

FROM-FEATURE

Called when dragging starts.

Added by the RowReorder feature, only available when that feature is enabled.
onGridRowDrag

FROM-FEATURE

Called while the row is being dragged, in the listener function you have access to context.insertBefore a grid / tree record, and additionally context.parent (a TreeNode) for trees. You can signal that the drop position is valid or invalid by setting context.valid = false;

Added by the RowReorder feature, only available when that feature is enabled.
onGridRowBeforeDropFinalize

ASYNC

PREVENTABLE

FROM-FEATURE

Called before the row drop operation is finalized. You can return false to abort the drop operation, or a Promise yielding true / false which allows for asynchronous abort (e.g. first show user a confirmation dialog).

Added by the RowReorder feature, only available when that feature is enabled.
onGridRowDrop

FROM-FEATURE

Called after the row drop operation has completed, regardless of validity

Added by the RowReorder feature, only available when that feature is enabled.
onGridRowDragAbort

FROM-FEATURE

Called when a row drag operation is aborted

Added by the RowReorder feature, only available when that feature is enabled.
onSplit

FROM-FEATURE

Called when splitting the Grid.

Added by the Split feature, only available when that feature is enabled.
onUnsplit

FROM-FEATURE

Called when un-splitting the Grid.

Added by the Split feature, only available when that feature is enabled.
onLockRows

FROM-FEATURE

Called when row locking is enabled.

Added by the LockRows feature, only available when that feature is enabled.
onUnlockRows

FROM-FEATURE

Called when row locking is disabled.

Added by the LockRows feature, only available when that feature is enabled.
onCollapseNode

FROM-FEATURE

Called before a parent node record is collapsed.

Added by the Tree feature, only available when that feature is enabled.
onExpandNode

FROM-FEATURE

Called after a parent node record is expanded.

Added by the Tree feature, only available when that feature is enabled.
onToggleNode

FROM-FEATURE

Called after a parent node record toggles its collapsed state.

Added by the Tree feature, only available when that feature is enabled.
onBeforeToggleNode

FROM-FEATURE

Called before a parent node record toggles its collapsed state.

Added by the Tree feature, only available when that feature is enabled.
onTreeGroup

FROM-FEATURE

Called on the owning Grid/Scheduler/Gantt after tree grouping levels change

Added by the TreeGroup feature, only available when that feature is enabled.
onBeforeCSVExport

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before CSV export starts. Return false to cancel the export.

Added by the ExcelExporter feature, only available when that feature is enabled.
onBeforeExcelExport

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before Excel export starts. Return false to cancel the export.

Added by the ExcelExporter feature, only available when that feature is enabled.
onFileDrop

FROM-FEATURE

Called when a file is dropped on the widget element

Added by the FileDrop feature, only available when that feature is enabled.
onBeforePdfExport

PREVENTABLE

FROM-FEATURE

Called on the owning Grid before export started. Return false to cancel the export.

Added by the PdfExport feature, only available when that feature is enabled.
onPdfExport

FROM-FEATURE

Called on the owning Grid when export has finished

Added by the PdfExport feature, only available when that feature is enabled.

Type definitions

PreserveScrollOptions
Additional options for the preserveScroll configuration.
Properties
- overscroll : Boolean
  
  When there is not enough content remaining in the viewport to preserve the current scroll position (for example, if rows below have been removed), allow the viewport to temporarily include empty space beyond the available content, in order to avoid scrolling.
EmptyTextDomConfig : DomConfig
Config object that specifies empty text configuration.
Properties
- region : 'locked'/'normal'/String
  
  The grid region to add the empty text to
GridScrollOptions
Properties
- block : 'start'/'end'/'center'/'nearest'
  
  How far to scroll the element.
- edgeOffset : Number
  
  edgeOffset A margin around the element or rectangle to bring into view.
- animate : AnimateScrollOptions/Boolean/Number
  
  Set to true to animate the scroll by 300ms, or the number of milliseconds to animate over, or an animation config object.
- highlight : Boolean/Function/String
  
  Set to true to highlight the element when it is in view. May be a function or the name of a method which is called passing an array of elements, to provide customized highlighting. The function will be called with an array of row elements as an argument.
- focus : Boolean
  
  Set to true to focus the element when it is in view.
- x : Boolean
  
  Pass as false to disable scrolling in the X axis.
- y : Boolean
  
  Pass as false to disable scrolling in the Y axis.
- maxWidth : Number
  
  How much of the target's width to bring into view if the target is wider.
- maxHeight : Number
  
  How much of the target's height to bring into view if the target is taller.
- column : String
  
  Field name or ID of the column, or the Column instance to scroll to.
- extendTimeAxis : Booleantrue
  
  Only applies when scrolling an event into view in Scheduler. By default, if the requested event is outside the time axis, the time axis is extended.
- viewport : Rectangle
  
  An optional definition of the scrollable viewport if it has to differ from the actual client area of this Scroller's element.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-grid-background	Grid background color
--b-grid-cell-background	Grid cell background
--b-grid-cell-border-color	Grid cell border color
--b-grid-cell-border-width	Grid cell border width. By default also applies to headers
--b-grid-cell-color	Grid cell color
--b-grid-cell-dirty-color	Grid cell dirty indicator color
--b-grid-cell-font-size	Grid cell font size
--b-grid-cell-font-weight	Grid cell font weight
--b-grid-cell-gap	Grid cell inner gap
--b-grid-cell-highlight-color	Background color for highlighted cells in color mode
--b-grid-cell-padding-block	Grid cell padding block. Defaults to 0, since cells are sized programmatically and content is centered vertically
--b-grid-cell-padding-inline	Grid cell padding inline. By default also applies to headers
--b-grid-column-transition-duration	Transition duration for column operations such as showing, hiding and collapsing
--b-grid-empty-color	Text color for the message shown when the grid is empty
--b-grid-empty-padding	Padding for the message shown when the grid is empty
--b-grid-panel-header-border-bottom	Bottom border for the grid panel header (when having a title or panel tools)
--b-grid-panel-header-padding	Padding for the grid panel header (when having a title or panel tools)
--b-grid-row-border-color	Grid row border color (defaults to use cell border color)
--b-grid-row-border-width	Grid row border width (bottom border)
--b-grid-row-height	Grid's default row height, if not set programmatically or through data
--b-grid-row-placeholder-color	Row "Skeleton" background color when lazy loading
--b-grid-row-transition-duration	Transition duration for row operations such as adding and removing
--b-grid-row-zindex	Grid row z-index
--b-grid-splitter-narrow-color	Grid splitter color, when not using the RegionResize feature
--b-grid-splitter-width	Grid splitter width, when not using the RegionResize feature
Focused
--b-grid-cell-focused-outline-color	Grid cell focused outline color
--b-grid-cell-focused-outline-width	Grid cell focused outline width
Hovered
--b-grid-cell-hover-background	Background for hovered cells
--b-grid-cell-hover-selected-background	Background for hovered and selected cells
Selected
--b-grid-cell-selected-background	Background for selected cells
--b-grid-cell-selected-color	Grid cell color when selected & hovered

Source path

Grid/view/GridBase.js

GridBase
Widget

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Type definitions

Properties

Properties

Properties

CSS variables

Source path

Inheritance tree5

Mixins15

Features41

Contents

GridBase Widget

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Type definitions

Properties

Properties

Properties

CSS variables

Source path

Inheritance tree5

Mixins15

Features41

Contents

GridBase
Widget