FillHandle
Feature
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.
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
}
});
See also
- CellCopyPaste - Copy/paste cell values
- CellEdit - Inline cell editing
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
Set to
trueto 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. -
Internal listeners, that cannot be removed by the user.
-
The widget which this plugin is to attach to.
Has a corresponding runtime client property.
-
Set to
falseto disable localization of this object.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of Events class, or subclass thereof.
-
Identifies an object as an instance of FillHandle class, or subclass thereof.
-
Identifies an object as an instance of Localizable class, or subclass thereof.
-
A class property getter for the default values of internal properties for this class.
-
An empty array that can be used as a default value.
-
An empty object that can be used as a default value.
-
Identifies an object as an instance of FillHandle class, or subclass thereof.
-
Identifies an object as an instance of InstancePlugin class, or subclass thereof.
-
Returns a copy of the full configuration which was used to configure this object.
-
This property is set to
truebefore theconstructorreturns. -
This property is set to
trueon entry to the destroy method. It remains on the objects after returning fromdestroy(). If isDestroyed istrue, this property will also betrue, so there is no need to test for both (for example,comp.isDestroying || comp.isDestroyed). -
The Widget which was passed into the constructor, which is the Widget we are providing extra services for.
Has a corresponding client config.
-
Get the global LocaleHelper
-
Get the global LocaleManager
Functions
Functions are methods available for calling on the class-
This optional class method is called when a class is mixed in using the mixin() method.
-
Registers this class type with its Factory
-
abort( )
Aborts an ongoing FillHandle drag operation
-
handleSelection( )internal
Checks selection and sees to it that fill handle and border is drawn. Runs on next animation frame
-
Internal function used to hook destroy() calls when using thisObj
-
Internal function used restore hooked destroy() calls when using thisObj
-
Auto detaches listeners registered from start, if set as detachable
-
Internal function used to run a callback function after an event is triggered
-
Removes all listeners registered to this object by the application.
-
This will merge a feature's (subclass of InstancePlugin) keyMap with it's client's keyMap.
Events
Events are triggered for certain actions in this class and can be listened for to react to those actions in your code-
fillHandleDragAbortON-OWNER
Fired when a FillHandle drag operation is aborted.
Note that this event is triggered on the owning widget:
Event handlers
Event handlers are callbacks called as a result of certain actions in this class-
onFillHandleDragAbortON-OWNER
Called when a FillHandle drag operation is aborted.
Note that this handler is called on the owning widget:
CSS variables
CSS variables that can be set to adjust appearance| Name | Description |
|---|---|
| --b-fill-handle-handle-size | Size of the fill handle |