v7.3.0
SupportExamplesFree Trial

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.

When Store has lazyLoad, row reordering might cause data inconsistency and is not recommended.

See also

No results

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 true by default in the Gantt product.

  • Set to true to 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 true to preserve sorters after a drop operation, if that operation leads to the store still being sorted.

  • Set to true to 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 false to disable localization of this object.

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isEvents : Booleantrue
    READONLY
    static
    ADVANCED
    Events
    Identifies an object as an instance of Events class, or subclass thereof.
  • isLocalizable : Booleantrue
    READONLY
    static
    ADVANCED
    Localizable
    Identifies an object as an instance of Localizable class, or subclass thereof.
  • isRowReorder : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of RowReorder class, or subclass thereof.
  • properties : Object
    internal
    static
    InstancePlugin

    A class property getter for the default values of internal properties for this class.

  • emptyArray : Array
    internal
    READONLY
    InstancePlugin

    An empty array that can be used as a default value.

  • emptyObject : Object
    internal
    READONLY
    InstancePlugin

    An empty object that can be used as a default value.

  • isInstancePlugin : Booleantrue
    READONLY
    ADVANCED
    InstancePlugin
    Identifies an object as an instance of InstancePlugin class, or subclass thereof.
  • isRowReorder : Booleantrue
    READONLY
    ADVANCED
    Identifies an object as an instance of RowReorder class, or subclass thereof.
  • config : Object
    READONLY
    ADVANCED
    InstancePlugin

    Returns a copy of the full configuration which was used to configure this object.

  • This property is set to true before the constructor returns.

  • isDestroying : Boolean
    READONLY
    ADVANCED
    InstancePlugin

    This property is set to true on entry to the destroy method. It remains on the objects after returning from destroy(). If isDestroyed is true, this property will also be true, so there is no need to test for both (for example, comp.isDestroying || comp.isDestroyed).

  • client : Widget
    READONLY
    ADVANCED
    InstancePlugin

    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
  • onClassMixedIn( )
    internal
    static
    InstancePlugin

    This optional class method is called when a class is mixed in using the mixin() method.

  • initClass( )
    static
    ADVANCED
    InstancePlugin

    Registers this class type with its Factory

  • init( )
    private

    Initialize drag & drop (called on first paint)

  • onDrop( )
    private
    ASYNC

    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

  • doDestroy( )
    internal
    Events

    Auto detaches listeners registered from start, if set as detachable

  • once( )
    private
    Events

    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

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

Type 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)
id: rowReorder

Source path

Grid/feature/RowReorder.js

Demo

examples/rowreordering

Contents