RowReorder
Feature
Allows user to reorder rows by dragging them. To get notified about row reorder listen to change event on the grid store.
This feature is disabled by default. For info on enabling it, see GridFeatures. This feature is enabled by default for Gantt.
const grid = new Grid({ appendTo : targetElement, // makes grid as high as it needs to be to fit rows autoHeight : true, features : { // enable row reordering by dragging rowReorder : { showGrip : true } }, data : DataGenerator.generateData(10), 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 } ] }); If the grid is set to readOnly, reordering is disabled. Inside all event listeners you have access a context object which has a record property (the dragged record).
Usage when grouping
When the TreeGroup feature is active, note that row reordering is only possible for leaf rows and only when grouping is done using Model fields (not function-based grouping).
Row reordering is also disabled when the store is grouped using the Group feature and the "group by" field is an array value. In this case records may also be present in more than one group and so some records will be linked records, not the real records.
Validation
You can validate the drag drop flow by listening to the gridrowdrag event. Inside this listener you have access to the index property which is the target drop position. For trees you get access to the parent record and index, where index means the child index inside the parent.
You can also have an async finalization step using the gridRowBeforeDropFinalize, for showing a confirmation dialog or making a network request to decide if drag operation is valid (see code snippet below)
features : {
rowReorder : {
showGrip : true
},
listeners : {
gridRowDrag : ({ context }) => {
// Here you have access to context.insertBefore, and additionally context.parent for trees
},
gridRowBeforeDropFinalize : async ({ context }) => {
const result = await MessageDialog.confirm({
title : 'Please confirm',
message : 'Did you want the row here?'
});
// true to accept the drop or false to reject
return result === MessageDialog.yesButton;
}
}
}
Note, that this feature uses the concept of "insert before" when choosing a drop point in the data. So the dropped record's position is before the visual next record's position.
This may look like a pointless distinction, but consider the case when a Store is filtered. The record above the drop point may have several filtered out records below it. When unfiltered, the dropped record will be below these because of the "insert before" behaviour.
Behavior with multiple subgrids
For grids with multiple subgrids, row reordering is only enabled for the first subgrid.
Dragging rows between different grids
You can enable dragging to different Grid instances by enabling the allowCrossGridDrag. This lets you both move and copy (using Ctrl/Meta key) records to other grids. You can also configure a special transferData method to take full control over what happens on drop onto another grid.
NOTE: This feature cannot be used simultaneously with the enableTextSelection config.
Reordering rows in a chained store
When using a chained flat store (created using chain), reordering rows will by default not change the order of the records in the original store. This behavior can be changed by setting the syncOrder config to true on the chained store.
When on the other hand using a chained tree store (created using chainTree), the order of the records in the original store will always be changed.
See also
- ColumnReorder - Reorder columns by drag
- Grid - The grid component
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
The CSS class to add to the icon element indicating it is a copy operation.
-
An object used to configure the internal DragHelper class
-
Enables creation of parents by dragging a row and dropping it onto a leaf row. Only works in a Grid with a tree store. This option is
trueby default in the Gantt product. -
Set to
trueto only allow reordering by the showGrip config. -
If hovering over a parent node for this period of a time in a tree, the node will expand.
-
Set to
trueto preserve sorters after a drop operation, if that operation leads to the store still being sorted. -
Set to
trueto show a grip icon on the left side of each row. Or set to'hover'to reserve space for the grip but only show it when hovering over the row. -
The amount of milliseconds to wait after a touchstart, before a drag gesture will be allowed to start.
-
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 Localizable class, or subclass thereof.
-
Identifies an object as an instance of RowReorder 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 InstancePlugin class, or subclass thereof.
-
Identifies an object as an instance of RowReorder 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
-
init( )private
Initialize drag & drop (called on first paint)
-
Handle drop
-
onReset( )private
Clean up on reset
-
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 codeEvent handlers
Event handlers are callbacks called as a result of certain actions in this classType definitions
CSS variables
CSS variables that can be set to adjust appearance| Name | Description |
|---|---|
| --b-row-reorder-box-shadow | Drag proxy box shadow |
| --b-row-reorder-grip-icon | Grip icon (font icon) |
| --b-row-reorder-indicator-color | Drop indicator color |
| --b-row-reorder-indicator-invalid-color | Drop indicator color when invalid |
| --b-row-reorder-indicator-size | Drop indicator size |
| --b-row-reorder-invalid-background | Drag proxy background when invalid |
| --b-row-reorder-proxy-opacity | Opacity of the drag proxy (rows being dragged) |