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.

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