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.
Configs
78
Configs
78Common
Layout
The subgrid "weight" determines its position among its SubGrid siblings. Higher weights go further right.
Other
Column store, a store containing the columns for this SubGrid
Region (name) for this SubGrid
Set to false to prevent this subgrid being resized with the RegionResize feature
DOM
Float & align
Misc
Scrolling
Properties
68
Properties
68Class hierarchy
Other
Get/set SubGrid flex, which also sets header and footer flex (if available).
Get all row elements for this SubGrid.
Get the "viewport" for the SubGrid as a Rectangle
Get/set SubGrid width, which also sets header and footer width (if available).
CSS
DOM
Layout
Misc
Functions
62
Functions
62Other
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'
});
| Parameter | Type | Description |
|---|---|---|
animate | Boolean | Whether to animate the collapse. |
A Promise which resolves when this SubGrid is fully collapsed.
Expands subgrid.
grid.getSubGrid('locked').expand().then(() => console.log('locked grid expanded'));
| Parameter | Type | Description |
|---|---|---|
animate | Boolean | Whether to animate the expand. |
A Promise which resolves when this SubGrid is fully expanded.
Resize all columns in the SubGrid to fit their width, according to their configured fitMode
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.
| Parameter | Type | Description |
|---|---|---|
column | Column | String | Number | Column name (data) or column index or actual column object. |
options | BryntumScrollOptions | How to scroll. |
If the column exists, a promise which is resolved when the column header element has been scrolled into view.
Toggles this subgrid collapsed state.
| Parameter | Type | Description |
|---|---|---|
animate | Boolean | Whether to animate the toggle. |
A Promise which resolves when this SubGrid is fully toggled.
Configuration
Events
Misc
Widget hierarchy
Events
16
Events
16Fires when the Grid is scrolling horizontally in one of its SubGrids
// Adding a listener using the "on" method
subGrid.on('horizontalScroll', ({ source, subGrid, scrollLeft }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The firing Grid instance. |
subGrid | SubGrid | The scrolling SubGrid instance. |
scrollLeft | Number | The horizontal scroll position. |
Fires after the Grid is done scrolling horizontally in one of its SubGrids
// Adding a listener using the "on" method
subGrid.on('horizontalScrollEnd', ({ source, subGrid, scrollLeft }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The firing Grid instance. |
subGrid | SubGrid | The scrolling SubGrid instance. |
scrollLeft | Number | The horizontal scroll position. |
Event handlers
16
Event handlers
16Called when the Grid is scrolling horizontally in one of its SubGrids
new SubGrid({
onHorizontalScroll({ source, subGrid, scrollLeft }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The firing Grid instance. |
subGrid | SubGrid | The scrolling SubGrid instance. |
scrollLeft | Number | The horizontal scroll position. |
Called after the Grid is done scrolling horizontally in one of its SubGrids
new SubGrid({
onHorizontalScrollEnd({ source, subGrid, scrollLeft }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The firing Grid instance. |
subGrid | SubGrid | The scrolling SubGrid instance. |
scrollLeft | Number | The horizontal scroll position. |