FillHandle
This feature adds a fill handle to a Grid range selection, which when dragged, fills the cells being dragged over with values based on the values in the original selected range. This is similar to functionality normally seen in various spreadsheet applications.
//<code-header>
fiddle.title = 'Fill handle';
//</code-header>
targetElement.innerHTML = '<p>Fill range of cells with values computed from current selection</p>';
// grid with basic configuration
const grid = new Grid({
// makes grid as high as it needs to be to fit rows
autoHeight : true,
appendTo : targetElement,
features : {
fillHandle : true
},
selectionMode : {
cell : true,
dragSelect : true
},
columns : [
{ field : 'number', text : 'Number', flex : 1, type : 'number' },
{ field : 'text', text : 'Text', flex : 1 },
{ field : 'date', text : 'Date', flex : 1, type : 'date' },
{ field : 'empty1', text : 'Empty', flex : 1 },
{ field : 'empty2', text : 'Empty', flex : 1 }
],
data : [
{ id : 1, number : 1, text : 'Once', date : new Date(2022, 0, 1), empty1 : null, empty2 : null },
{ id : 2, number : 2, text : 'upon', date : new Date(2022, 0, 2) },
{ id : 3, number : 3, text : 'a time', date : new Date(2022, 0, 3) },
{ id : 4 },
{ id : 5 },
{ id : 6 },
{ id : 7 },
{ id : 8 },
{ id : 9 }
]
});
grid.selectCellRange({ id : 1, column : grid.columns.first }, { id : 3, column : grid.columns.first });Requires selectionMode.cell to be activated.
This feature is disabled by default
const grid = new Grid({
features : {
fillHandle : true
}
});
Configs
11
Configs
11Other
Set to true to enable the fill range to crop the original selected range. This clears the cells which were
a part of the original selected range, but are no longer a part of the smaller range.
Implement this function to be able to customize the value that cells will be filled with.
Return undefined to use default calculations.
new Grid({
features : {
fillHandle : {
calculateFillValue({cell, column, range, record}) {
if(column.field === 'number') {
return range.reduce(
(sum, location) => sum + location.record[location.column.field]
);
}
}
}
}
});
| Parameter | Type | Description |
|---|---|---|
data | Object | Object containing information about current cell and fill value |
data.cell | GridLocation | Current cell data |
data.column | Column | Current cell column |
data.range | GridLocation[] | Range from where to calculate values |
data.record | Model | Current cell record |
Value to fill current cell
Misc
Properties
15
Properties
15Common
Class hierarchy
Other
Functions
29
Functions
29Other
Aborts an ongoing FillHandle drag operation
Configuration
Events
Misc
Events
11
Events
11Fired before dragging of the FillHandle starts, return false to prevent the drag operation.
// Adding a listener using the "on" method
fillHandle.on('beforeFillHandleDragStart', ({ cell, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
cell | GridLocation | Information about the column / record |
domEvent | MouseEvent | The raw DOM event |
Fired before the FillHandle dragging is finalized and values are applied to cells, return false to prevent the
drag operation from applying data changes.
// Adding a listener using the "on" method
fillHandle.on('fillHandleBeforeDragFinalize', ({ from, to, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
from | GridLocation | The from cell |
to | GridLocation | The to cell |
domEvent | MouseEvent | The raw DOM event |
Fired while dragging the FillHandle.
// Adding a listener using the "on" method
fillHandle.on('fillHandleDrag', ({ from, to, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
from | GridLocation | The from cell |
to | GridLocation | The to cell |
domEvent | MouseEvent | The raw DOM event |
Fired when a FillHandle drag operation is aborted.
// Adding a listener using the "on" method
fillHandle.on('fillHandleDragAbort', ({ }) => {
});Fired after a FillHandle drag operation.
// Adding a listener using the "on" method
fillHandle.on('fillHandleDragEnd', ({ from, to, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
from | GridLocation | The from cell |
to | GridLocation | The to cell |
domEvent | MouseEvent | The raw DOM event |
Fired when dragging of the FillHandle starts.
// Adding a listener using the "on" method
fillHandle.on('fillHandleDragStart', ({ cell, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
cell | GridLocation | Information about the column / record |
domEvent | MouseEvent | The raw DOM event |
Event handlers
11
Event handlers
11Called before dragging of the FillHandle starts, return false to prevent the drag operation.
new FillHandle({
onBeforeFillHandleDragStart({ cell, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
cell | GridLocation | Information about the column / record |
domEvent | MouseEvent | The raw DOM event |
Called before the FillHandle dragging is finalized and values are applied to cells, return false to prevent the
drag operation from applying data changes.
new FillHandle({
onFillHandleBeforeDragFinalize({ from, to, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
from | GridLocation | The from cell |
to | GridLocation | The to cell |
domEvent | MouseEvent | The raw DOM event |
Called while dragging the FillHandle.
new FillHandle({
onFillHandleDrag({ from, to, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
from | GridLocation | The from cell |
to | GridLocation | The to cell |
domEvent | MouseEvent | The raw DOM event |
Called when a FillHandle drag operation is aborted.
new FillHandle({
onFillHandleDragAbort({ }) {
}
});Called after a FillHandle drag operation.
new FillHandle({
onFillHandleDragEnd({ from, to, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
from | GridLocation | The from cell |
to | GridLocation | The to cell |
domEvent | MouseEvent | The raw DOM event |
Called when dragging of the FillHandle starts.
new FillHandle({
onFillHandleDragStart({ cell, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
cell | GridLocation | Information about the column / record |
domEvent | MouseEvent | The raw DOM event |
Typedefs
1
Typedefs
1CSS variables
1
CSS variables
1| Name | Description |
|---|---|
--b-fill-handle-handle-size | Size of the fill handle |