SubGrid

A SubGrid is a part of the grid (it has at least one and normally no more than two, called locked and normal). It has its own header, which holds the columns to display rows for in the SubGrid. SubGrids are created by Grid, but you can configure your SubGrids with the subGridConfigs object.

const grid = new Grid({
    appendTo : 'container',

    features : {
        regionResize : true
    },

    subGridConfigs : {
        locked : {
            width : 360
        },
        normal : {
            flex : 1
        }
    }
});

If you use multiple regions in your grid, you can enable the RegionResize feature to let users resize and collapse/expand grid sections.

If not configured with a width or flex, the SubGrid will be sized to fit its columns. In this case, if all columns have a fixed width (not using flex) then toggling columns will also affect the width of the SubGrid.

Useful configs

Config	Description
region	Name of this SubGrid section (e.g. `'locked'`)
columns	Column store for this SubGrid
collapsed	Collapse this SubGrid section
flex	Flex value for the SubGrid width

Configs

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

collapsed : Booleanfalse

Set true to start subgrid collapsed. To operate collapsed state on subgrid use collapse/expand methods.

Has a corresponding runtime collapsed property.
columns : ColumnStore

Column store, a store containing the columns for this SubGrid
region : String

Region (name) for this SubGrid
resizable : Booleantrue

Set to false to prevent this subgrid being resized with the RegionResize feature
sealedColumns : Booleanfalse

private

Set true to disable moving columns into or out of this SubGrid.
weight : Number

The subgrid "weight" determines its position among its SubGrid siblings. Higher weights go further right.

Properties

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

isSubGrid : Booleantrue

READONLY

static

ADVANCED

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

collapsed : Booleanfalse

Set true to start subgrid collapsed. To operate collapsed state on subgrid use collapse/expand methods.

Has a corresponding collapsed config.
flex : Number/String

Get/set SubGrid flex, which also sets header and footer flex (if available).
rowElements : HTMLElement[]

READONLY

Get all row elements for this SubGrid.
viewRectangle : Rectangle

READONLY

Get the "viewport" for the SubGrid as a Rectangle
width : Number

Get/set SubGrid width, which also sets header and footer width (if available).
isSubGrid : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

clearRows( )

private

Removes all row elements from the subgrids body and empties cache

collapse( animate )

: Promise

ASYNC

Collapses subgrid. If collapsing subgrid is the only one expanded, next subgrid to the right (or previous) will be expanded.

let locked = grid.getSubGrid('locked');
locked.collapse().then(() => {
    console.log(locked.collapsed); // Logs 'True'
});

let normal = grid.getSubGrid('normal');
normal.collapse().then(() => {
    console.log(locked.collapsed); // Logs 'False'
    console.log(normal.collapsed); // Logs 'True'
});

expand( animate )

: Promise

ASYNC

Expands subgrid.

grid.getSubGrid('locked').expand().then(() => console.log('locked grid expanded'));

fixWidths( )

private

Sets header width and scroller width (if needed, depending on if using flex). Might also change the subgrids width, if it uses a width calculated from its columns.
handleHorizontalScroll( )

internal

Triggers the 'horizontalScroll' event + makes sure overlay scrollbar is reachable with pointer for a substantial amount of time after scrolling starts
initScroll( )

private

Init scroll syncing for header and footer (if available).
onAddRow( )

private

Creates elements for the new rows when RowManager has determined that more rows are needed
onInternalResize( )

private

Called when grid changes size. SubGrid determines if it has changed size and triggers scroll (for virtual rendering in cells to work when resizing etc.)
refreshFakeScroll( )

private

Fixes widths of fake scrollers
resizeColumnsToFitContent( )

Resize all columns in the SubGrid to fit their width, according to their configured fitMode
scrollColumnIntoView( column, options )
: Promise

ASYNC

Scrolls a column into view (if it is not already). Called by Grid#scrollColumnIntoView, use it instead to not have to care about which SubGrid contains a column.
syncParallelSplitters( )

private

Keeps the parallel splitters in the header, footer and fake scroller synced in terms of being collapsed or not.
toggleCollapse( animatetrue )
: Promise

ASYNC

Toggles this subgrid collapsed state.
toggleSplitterCls( cls, addtrue, includePartnerstrue )

private

Toggle (add/remove) class for splitters
updateHasFlex( )

internal

Called when updating column widths to apply 'b-has-flex' which is used when fillLastColumn is configured.

Events

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

horizontalScroll

Fires when the Grid is scrolling horizontally in one of its SubGrids
horizontalScrollEnd

Fires after the Grid is done scrolling horizontally in one of its SubGrids

Event handlers

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

onHorizontalScroll

Called when the Grid is scrolling horizontally in one of its SubGrids
onHorizontalScrollEnd

Called after the Grid is done scrolling horizontally in one of its SubGrids

Source path

Grid/view/SubGrid.js

SubGrid

Useful configs

See also

Configs

Properties

Functions

Events

Event handlers

Source path

Inheritance tree3

Mixins5

Contents