GridBase

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' }];

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.

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

An object containing Feature configuration objects (or true if no configuration is required) keyed by the Feature class name in all lowercase.

See Keyboard shortcuts for details

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.

Row height in pixels. This allows the default height for rows to be controlled. Note that it may be overriden 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

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

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.

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.

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.

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.

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.

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

Set to true to animate row removals caused by filtering.

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

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

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

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

Region to which columns are added when they have none specified

Set to true to destroy the store when the grid is destroyed.

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.

Configure this as true to allow elements within cells to be styled as position: sticky.

Columns which contain sticky content will need to be configured with

   cellCls : 'b-sticky-cell',

Or a custom renderer can add the class to the passed cell element.

It is up to the application author how to style the cell content. It is recommended that a custom renderer create content with CSS class names which the application author will use to apply the position, and matching margin-top and top styles to keep the content stuck at the grid's top.

Note that not all browsers support this CSS feature. A cross browser alternative is to use the {link Grid.feature.StickyCells StickyCells} Feature.

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.

Set to true to hide the footer elements

Set to true to hide the column header elements

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

Grids change the maskDefaults to cover only their body element.

Grid monitors window resize by default.

True to preserve focused cell after loading new data

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

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.

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

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
}

Animation transition duration in milliseconds.

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 = { ... };

Configure UI transitions for various actions in the grid.

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'
   }

The class to instantiate to use as the scrollable. Defaults to Scroller.

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

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

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.

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.

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' }];

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.

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

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.

Row height in pixels. This allows the default height for rows to be controlled. Note that it may be overriden 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

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

Body height

Footer height

Header height

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

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

Set to true to hide the footer elements

Set to true to hide the column header elements

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.

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

Animation transition duration in milliseconds.

Configure UI transitions for various actions in the grid.

Get the topmost visible grid row

Get the last visible grid row

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

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.

Returns a cell if rendered or null if not found.

Searches up from specified element for a grid cell or a header and returns the column which the cell belongs to

Returns the footer element for the column (only relevant when using the Summary feature)

Returns the header element for the column

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

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

Resumes CSS transitions after a row / event has been updated

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

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.

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

Hide the load mask.

Triggers a render of all the cells in a column.

Rerender a single grid header

Rerenders all grid headers

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.

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.

Rerenders the grids rows, headers and footers, completely replacing all row elements with new ones

Rerenders all grid rows, completely replacing all row elements with new ones

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.

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.

Get a Row for either a record, a record id or an HTMLElement

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

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.

Restore scroll state. If state is not specified, restores the last stored state.

Scrolls a locally available record's cell into view (if it is not already).

Scrolls a column into view (if it is not already)

Scrolls a locally available record's row into view. If row isn't rendered it tries to calculate position. Accepts the BryntumScrollOptions column property

Scroll all the way down

Scroll all the way up

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.