RegionResize
Makes the splitter between grid sections draggable, to let users resize, and collapse/expand the sections.
//<code-header>
fiddle.title = 'Region resize';
//</code-header>
targetElement.innerHTML = '<p>Drag the splitter between grid regions to resize</p>';
const grid = new Grid({
appendTo : targetElement,
// makes grid as high as it needs to be to fit rows
autoHeight : true,
features : {
// enabled region resize
regionResize : true
},
data : DataGenerator.generateData(5),
columns : [
{ field : 'firstName', text : 'First name', width : 150, locked : true },
{ field : 'surName', text : 'Surname', width : 150, locked : true },
{ field : 'city', text : 'City', flex : 1 },
{ field : 'team', text : 'Team', flex : 1 },
{ field : 'score', text : 'Score', flex : 1 },
{ field : 'rank', text : 'Rank', flex : 1 }
]
});// enable RegionResize
const grid = new Grid({
features: {
regionResize: true
}
});
If you use two regions, and you would like to prevent resizing/expanding the first (left section, rightmost in RTL), set maxWidth and width to the same value.
// enable RegionResize
const grid = new Grid({
features: {
regionResize: true
},
subGridConfigs : {
locked : {
width : 400,
// prevent making the left section wider than 400px
maxWidth : 400
},
normal : {
flex : 1
}
}
});
This feature is disabled by default.
Configs
12
Configs
12Other
Set to false to not use transitions when expanding or collapsing a sub grid
This flag prevents dragging if set to false but the collapse / expand buttons will still be functional.
Set to false to hide the splitter's collapse/expand buttons
Misc
Properties
18
Properties
18Common
Class hierarchy
Other
Set to false to not use transitions when expanding or collapsing a sub grid
This flag prevents dragging if set to false but the collapse / expand buttons will still be functional.
Set to false to hide the splitter's collapse/expand buttons
Functions
28
Functions
28Configuration
Events
Misc
Other
Events
9
Events
9Fired 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.
// Adding a listener using the "on" method
regionResize.on('splitterCollapseClick', ({ source, subGrid, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The Grid instance. |
subGrid | SubGrid | The subgrid |
domEvent | Event | The native DOM event |
Fired by the Grid after a sub-grid has been resized using the splitter
// Adding a listener using the "on" method
regionResize.on('splitterDragEnd', ({ source, subGrid, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The Grid instance. |
subGrid | SubGrid | The resized subgrid |
domEvent | Event | The native DOM event |
Fired by the Grid when a sub-grid resize gesture starts
// Adding a listener using the "on" method
regionResize.on('splitterDragStart', ({ source, subGrid, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The Grid instance. |
subGrid | SubGrid | The subgrid about to be resized |
domEvent | Event | The native DOM event |
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.
// Adding a listener using the "on" method
regionResize.on('splitterExpandClick', ({ source, subGrid, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The Grid instance. |
subGrid | SubGrid | The subgrid |
domEvent | Event | The native DOM event |
Event handlers
9
Event handlers
9Called 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.
new RegionResize({
onSplitterCollapseClick({ source, subGrid, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The Grid instance. |
subGrid | SubGrid | The subgrid |
domEvent | Event | The native DOM event |
Called by the Grid after a sub-grid has been resized using the splitter
new RegionResize({
onSplitterDragEnd({ source, subGrid, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The Grid instance. |
subGrid | SubGrid | The resized subgrid |
domEvent | Event | The native DOM event |
Called by the Grid when a sub-grid resize gesture starts
new RegionResize({
onSplitterDragStart({ source, subGrid, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The Grid instance. |
subGrid | SubGrid | The subgrid about to be resized |
domEvent | Event | The native DOM event |
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.
new RegionResize({
onSplitterExpandClick({ source, subGrid, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Grid | The Grid instance. |
subGrid | SubGrid | The subgrid |
domEvent | Event | The native DOM event |
Typedefs
1
Typedefs
1CSS variables
9
CSS variables
9| Name | Description |
|---|---|
--b-grid-splitter-zindex | Splitter z-index |
--b-region-resize-splitter-width | Splitter width |
--b-region-resize-splitter-color | Splitter color |
--b-region-resize-button-color | Color for the expand / collapse buttons showed on hover |
| Collapsed | |
--b-region-resize-splitter-collapsed-width | Splitter width when collapsed |
| Hovered | |
--b-region-resize-splitter-width-hover | Splitter width when hovering (also used as the invisible interactable area width) |
--b-region-resize-splitter-hover-color | Splitter color when hovered |
--b-region-resize-button-hover-color | Color for the expand / collapse buttons showed on hover |
| Touched | |
--b-region-resize-splitter-touch-width-hover | Splitter width when touched (also used as the invisible touch area width) |