Drag Drop between Grid and TreeGrid in Angular

Created: 22 May 2017

Updated: 29 April 2019

Both Angular Grid and TreeGrid components has a built-in functionality that allows you to drag drop rows within the same component or to other components. You can move or copy rows from one Grid and place them to another Grid or TreeGrid component, using drag and drop. In addition, drag drop is accompanied with events that allow you to customize the whole process.

In this demo, you can drag and drop rows from left Grid to the right TreeGrid and vice versa. When row is dragged a drop marker will appear, showing the position where the row can be dropped. While the drop marker is visible, you can choose whether you want to move it at drop position or place an exact copy of it by holding the SHIFT key.

When a row with children is moved from the Angular TreeGrid to the Grid, only the parent row is displayed. The children are excluded from the grid view, because the grid can only display linear list. The child rows still exist, you can see this by moving the same row from the Grid to the TreeGrid, the children will reappear.

General Drag Drop Conditions

By default, drag drop operation is disabled. To make sure rows are draggable and the target Grid can accept drops, you need to set the following properties to true:

• allowDrag - determines whether Grid rows are draggable (false by default)
• allowDrop - determines whether Grid can accept rows or other objects to be dropped (true by default)

• Angular
• HTML5
• CSS3

// Grid  settings
public allowDrag: boolean = true;
public allowDrop: boolean = true;
public columns: Array;
public rows: Array;

// TreeGrid  settings
public allowDrag2: boolean = true;
public allowDrop2: boolean = true;
public columns2: Array;
public rows2: Array;
                            

// 
// app.template.html
//

<div #application>
    <iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" [allowDrag]="allowDrag" [allowDrop]="allowDrop"  #grid>
        <template let-column [iuiTemplate]="{ type: 'header' }">
            {{column.headerText}}
        </template>
        <template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="grid-ddtg-item-label">{{cell.text}}</span>
        </template>
    </iui-grid>
    <iui-treegrid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns2" [rows]="rows2" [showFooter]="false" [allowDrag]="allowDrag2" [allowDrop]="allowDrop2"  #grid>
        <template let-column [iuiTemplate]="{ type: 'header' }">
            {{column.headerText}}
        </template>
        <template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="grid-ddtg-item-label">{{cell.text}}</span>
        </template>
    </iui-treegrid>
    <br style="clear:both;"/>
</div>
                            

/*
* sample-styles.css
*/ 

.grid-ddtg-normal
{
    float: left;
    margin-right: 20px;
    width: 350px;
    height: 300px;
}
.grid-ddtg-normal .iui-treegrid-expand-box
{
    margin-top: -3px;
}
.grid-ddtg-item-label
{
    display: inline-block;
    padding: 2px 0;
}
                            

By changing values of these properties (for each component separately), you can modify the drag drop functionality for specific grid on general level.

When allowDrag is set to false, the drag drop is suspended and you cannot drag rows. In similar way, when allowDrop is set to false, you cannot drop rows. This is useful in cases when you want to limit the drag drop operation between different Angular Grids.

For example, you can allow drag drop to take place in one direction. Allow moving of rows from the Angular Grid, but they can drop only in the TreeGrid. For this purpose, the allowDrag is set to true for the Grid, but allowDrop is set to false.

Cancel Drag Drop in Angular Grid

Using above properties only allows you to set general conditions for drag drop operations. If you need to create a custom conditions, you can handle the dragOver and dragDrop events. By doing this, you can add code that will determine which row or in which specific case is draggable or where it can drop.

For example, you can prevent drop of the first row by adding this code in the dragOver event handler:

• Angular
• HTML5

gridDragOver(e: any){
    if (e.dragRow == this.rows[0])
        e.cancel = true;
}                           

<iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" [allowDrag]="allowDrag" [allowDrop]="allowDrop" (dragOver)="gridDragOver($event)" #grid></iui-grid>
                            

If the condition is fulfilled, the cancel field of event data is set to true. This cancels further execution of drag drop operation and shows the 'no drop' icon during drag process.

Another example, you can allow only root rows to be dragged and disable drag drop for all child rows in the Angular TreeGrid:

• Angular
• HTML5

// Prvent drag drop if row is a child
// When row is a child, the pid field contains the id of its parent row
treegridDragOver(e: any){
    if (e.dragRow.pid)
        e.cancel = true;
}
                           

<iui-treegrid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns2" [rows]="rows2" [showFooter]="false" [allowDrag]="allowDrag2" [allowDrop]="allowDrop2" (dragOver)="treegridDragOver($event)" #treegrid></iui-treegrid>
                            

Drag Drop Event Data

The event data in dragOver and dragDrop events contains information that you can use in your code to customize the drag drop operations in whole and create the best solution for your application requirements. Here is a list of event data fields:

• action - specifies whether row is moved or copied
• cancel - determines whether drag drop is cancelled
• dragRow - specifies an row (s) that is dragged
• dropPos - specifies position at which dragged row can drop
• 0 - row will drop as a child of target row
• 1 - row will drop above target row
• 2 - row will drop below target row
• -1 - row will drop at the end of row collection of target component
• event - general HTML5 drag drop event data settings
• isDropAllowed - determines whether row can drop
• mousePos - position of mouse cursor in page coordinates
• sourceCtrl - a reference to a component from which drag drop operation has started
• targetCtrl - a reference to a component over which dragged row is dropped
• targetRow - specifies the row over which dragged row is positioned or dropped

Conclusion

IntegralUI Grid and TreeGrid components for Angular have built-in drag drop functionality. You can set conditions on general level or create your own custom drag drop operations. By adding event handlers and handling the event data, you can modify existing functionality and add custom operations that are better suited for your application requirements.

The Grid component is part of IntegralUI Web.