Results:

Loading...

Framework:

React Data Grid: Row Dragging

rowDrag: boolean | RowDragCallback<TData>;

interface RowDragCallback<TData = any> {
    (params: RowDragCallbackParams<TData>) : boolean
}

interface RowDragCallbackParams<TData = any> {
  // Row node for the given row 
  node: RowNode<TData>;
  // Data associated with the node. Will be `undefined` for group rows. 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

const columnDefs = [
    // make all rows draggable
    { field: 'athlete', rowDrag: true },
];

<AgGridReact columnDefs={columnDefs}></AgGridReact>

const columnDefs = [
    // only allow non-group rows to be dragged
    { field: 'athlete', rowDrag: params => !params.node.group },
];

<AgGridReact columnDefs={columnDefs}></AgGridReact>

// Loading...

// Loading...

// Loading...

Properties available on the RowDragEvent<TData = any> interface.

type

node

nodes

event

vDirection

overIndex

overNode

y

api

columnApi

Example Events

The below example demonstrates unmanaged row dragging with no attempt by the application or the grid to re-order the rows - this is on purpose to demonstrate the grid will not attempt to re-order rows unless you set the rowDragManaged property. The example also demonstrates all the events that are fired.

From the example the following can be noted:

• The first column has rowDrag=true which results in a draggable area included in the cell.
• The grid has not set rowDragManaged which results in the grid not reordering rows as they are dragged.
• All of the drag events are listened for and when one is received, it is printed to the console. To best see this, open the example in a new tab and open the developer console.
• Because rowDragManaged is not set, the row dragging is left enabled even if sorting or filtering is applied. This is because your application should decide if dragging should be allowed or suppressed using the suppressRowDrag property.

// Loading...

Simple Unmanaged Example

The example below shows how to implement simple row dragging using unmanaged row dragging and events. The example behaves the same as the Managed Dragging example above, however the logic for moving the rows is in the application rather than the grid.

From the example the following can be noted:

• The property suppressRowDrag=true is set by the application depending on whether sorting or filtering is active. This is because the logic in the example doesn't cover these scenarios and wants to prevent row dragging when sorting or filtering is active.

// Loading...

The simple example doesn't add anything that managed dragging gives (the first example on this page). Things get interesting when we introduce complex scenarios such as row grouping or tree data, which are explained below.

Entire Row Dragging

When using row dragging it is also possible to reorder rows by clicking and dragging anywhere on the row without the need for a drag handle by enabling the rowDragEntireRow grid option as shown below:

const columnDefs = [
    { field: 'country' },
    { field: 'year' },
    { field: 'sport' },
    { field: 'total' }
];
// allows rows to dragged without the need for drag handles
const rowDragEntireRow = true;

<AgGridReact columnDefs={columnDefs} rowDragEntireRow={rowDragEntireRow}></AgGridReact>

The example below demonstrates entire row dragging with Multi-Row Dragging. Note the following:

• Reordering rows by clicking and dragging anywhere on a row is possible as rowDragEntireRow enabled.
• Multiple rows can be selected and dragged as rowDragMultiRow is also enabled with rowSelection = 'multiple'.
• Row Drag Managed is being used, but it is not a requirement for Entire Row Dragging.

// Loading...

Suppress Row Drag

You can hide the draggable area by calling the grid API setSuppressRowDrag() or by setting the bound property suppressRowDrag.

The example below is almost identical to the Managed Dragging example with the following differences:

• Button Suppress will hide the drag icons.
• Button Remove Suppress will un-hide the drag icons.
• Applying a sort or a filter to the grid will also suppress the drag icons.

// Loading...

Dragging & Row Grouping

Row Grouping in the grid allows grouping rows by a particular column. Dragging rows while grouping is possible when doing unmanaged row dragging. The application is responsible for updating the data based on the drag events fired by the grid.

The example below uses row dragging to place rows into groups. It does not try to order the rows within the group. For this reason, the logic works regardless of sorting or filtering.

The example below shows row dragging with Row Grouping where the following can be noted:

• The Athlete column has row drag enabled for non-group rows. This is achieved using the function variant of the rowDrag property.
• The grid has not set the rowDragManaged property which results in unmanaged row dragging.
• The example does not re-order the rows. Instead the example demonstrates putting the rows into groups. If you drag a row, you can place it in a different parent group.
• The example listens to the event onRowDragMove and changes the group a row belongs to while the drag is happening (which is different to the next Tree Data example which waits until the drag is complete). It is the choice of your application whether it wants to move rows in real time during the drag, or wait until the drag action is complete.
• The application can still move rows to groups even if ordering or sorting is applied. For this reason, the application does not suppress row dragging if sorting or filtering is applied.

// Loading...

Row Dragging & Tree Data

Tree Data in the grid allows providing data to the grid in parent / child relationships, similar to that required for a file browser. Dragging rows with tree data is possible when doing unmanaged row dragging. The application is responsible for updating the data based on the drag events fired by the grid.

Example Tree Data

The example below shows Tree Data and row dragging where the following can be noted:

• The auto-group column has row drag true for all rows.
• The example registers for onRowDragEnd events and rearranges the rows when the drag completes.
• The application does NOT rearrange the rows as the drag is happening. Instead it waits for the onRowDragEnd event before updating the data.
• The expanded/contracted state of a folder and all of its child folders is preserved when the folder is moved to a new parent.

// Loading...

Example Highlighted Tree Data

The example above works, however it is not intuitive as the user is given no visual hint what folder will be the destination folder. The example below continues with the example above by providing hints to the user while the drag is in progress. From the example the following can be observed:

• The example registers for onRowDragMove events and works out what folder the mouse is over as the drag is happening.
• While the row is dragging, the application highlights the folder that is currently selected as the destination folder (called potentialParent in the example code).
• The application does NOT rearrange the rows as the drag is happening. As with the previous example, it waits for the onRowDragEnd event before updating the data.
• The example uses Cell Class Rules to highlight the destination folder. The example adds a CSS class hover-over to all the cells of the destination folder.
• The example uses Refresh Cells to get the grid to execute the Cell Class Rules again over the destination folder when the destination folder changes.

// Loading...

Other Row Models

Unmanaged row dragging will work with any of the row models Infinite, Server-Side and Viewport. With unmanaged dragging, the implementation of what happens when a particular drag happens is up to your application.

Because the grid implementation with regard to row dragging is identical to the above, examples of row dragging with the other row models are not given. How your application behaves with regards to the row drag events is the difficult bit, but that part is specific to your application and how your application stores its state. Giving an example here with a different data store would be redundant.

Customisation

There are some options that can be used to customise the Row Drag experience, so it has a better integration with your application.

Custom Row Drag Text

When a row drag starts, a "floating" DOM element is created to indicate which row is being dragged. By default, this DOM element will contain the same value as the cell that started the row drag. It's possible to override that text by using the colDef.rowDragText callback.

rowDragText = (
    params: IRowDragItem,
    dragItemCount: number
) => string;

interface IRowDragItem {
  // The default text that would be applied to this Drag Element 
  defaultTextValue: string;
  // When dragging a row, this contains the row node being dragged
  // When dragging multiple rows, this contains the row that started the drag. 
  rowNode?: RowNode;
  // When dragging multiple rows, this contains all rows being dragged 
  rowNodes?: RowNode[];
  // When dragging columns, this contains the columns being dragged 
  columns?: Column[];
  // When dragging columns, this contains the visible state of the columns 
  visibleState?: { [key: string]: boolean; };
}

const columnDefs = [
    {
        field: 'athlete',
        rowDrag: true,
        rowDragText: (params, dragItemCount) => {
            return (
                dragItemCount > 1
                    ? (dragItemCount + ' items')
                    : params.defaultTextValue + ' is'
            ) + ' being dragged...';
        }
    }
];

<AgGridReact columnDefs={columnDefs}></AgGridReact>

The example below shows dragging with custom text. The following can be noted:

• When you drag row of the year 2012, the rowDragText callback will add (London Olympics) to the floating drag element.

// Loading...

Row Dragger inside Custom Cell Renderers

Due to the complexity of some applications, it could be handy to render the Row Drag Component inside of a Custom Cell Renderer. This can be achieved, by using the registerRowDragger method in the ICellRendererParams as follows:

// your custom cell renderer code

// this will hold the reference to the element you want to
// to act as row dragger.
myRef = React.createRef();

componentDidMount() {
    this.props.registerRowDragger(this.myRef.current);
}

The example below shows a custom cell renderer, with using the registerRowDragger callback to render the Row Dragger inside itself.

• When you hover the cells, an arrow will appear, and this arrow can be used to drag the rows.

// Loading...

Full Width Row Dragging

It is possible to drag Full Width Rows by registering a Custom Row Dragger.

Note the following:

• Only the Full Width Rows are draggable.

// Loading...

Row Dragger with Custom Start Drag Pixels

By default, the drag event only starts after the Row Drag Element has been dragged by 4px, but sometimes it might be useful to start the drag with a different drag threshold, for example, start dragging as soon as the mousedown event happens (dragged by 0px). For that reason, the registerRowDragger takes a second parameter to specify the number of pixels that will start the drag event.

Note the following:

• The drag event starts as soon as mousedown is fired.

// Loading...