Drag and Drop Indicator in TreeGrid

[Zachary]

When I drag a treegrid row, I would like to change the indicator in the RowDrag event to let the user know that they cannot drop into a row. 

How can I access that property in the RowDrag event to modif

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Greetings from Syncfusion Support. 

Query: To let the user know that they cannot drop into a row. 

To customize the row drag and drop operation of the treegrid you can use rowDrop event to prevent the dropping of row in a specific location. Please refer to the below documentation for more information on the same.

Documentation: https://www.syncfusion.com/kb/11771/how-to-customize-drag-and-drop-operation-of-tree-grid

Please get back to us for further assistance. 

Regards,
Jagadesh Ram 

[Zachary]

Hi Jagadesh,

I tried to implement the examples, but where I ran into an issue was on this line:

this.rowDragAndDropModule.addErrorElem(); 

This is how I coded it:

  @ViewChild('budgetTreegrid')

  public treegrid: TreeGridComponent;

In Row dragging method:

treegrid.rowDragAndDropModule.addErrorElem()

It says  addErrorElem does not exist in rowDragAndDropModule

.addErrorElem();  

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Thanks for the update.

Based on your requirement we have prepared a sample in which where the row drop area customization is working fine. We have used rowDrop and rowDrag events to set the droppable area and to alert the user when drops the row where it is not allowed to drop. Please refer to the below code snippet.  

[app.component.ts]   

rowDrop(args: any) { 

        var treeGridobj = document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];       

       var data = treeGridobj.getCurrentViewRecords()[args.dropIndex]; 

       if (data.hasChildRecords)  {             //apply your own customized condition                                    

             args.cancel = 'true' 

            alert("dropping disabled for parent row")     //alert message while dropping on parent row 

         } 

    } 

    rowDrag (args: any) { 

        var treeGridobj = document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];       

        var rowEle: Element = args.target ? args.target.closest('tr') : null; 

        var rowIdx: number = rowEle ? (rowEle as HTMLTableRowElement).rowIndex : -1; 

        var currentData = treeGridobj.getCurrentViewRecords()[rowIdx]; 

       if (rowIdx !== -1) { 

         if (currentData.hasChildRecords) 

           treeGridobj.rowDragAndDropModule.addErrorElem(); //shows (no drop) icon for the parent records 

       } 

} 

 

[app.component.html]
  
 <ejs-treegrid #treegrid [dataSource]='data' height='350' childMapping='subtasks' [treeColumnIndex]='1' [allowRowDragAndDrop]='true' [selectionSettings]='selectOptions' 

    (rowDrop)='rowDrop($event)' 

    (rowDrag)='rowDrag($event)'> 

        <e-columns> 

....... 

        </e-columns> 

    </ejs-treegrid> 

 

Please refer to the screenshot and sample below.

Screenshots:

1. Child row dropped onto a Parent row.



2. Parent row dropped onto a parent row.



Sample: https://stackblitz.com/edit/angular-f169028?file=app.component.ts

Documentation,
https://ej2.syncfusion.com/angular/documentation/treegrid/row/#drag-and-drop
https://ej2.syncfusion.com/angular/documentation/api/treegrid/#rowdrag
https://ej2.syncfusion.com/angular/documentation/api/treegrid/#rowdrop

Please get back to us for further assistance. 

Regards,
Jagadesh Ram 

[Zachary]

Thank you. That worked!

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Thanks for the update.

We are glad that your queries have been resolved.

Please get back to us for further assistance. 

Regards,
Jagadesh Ram