Change drag indicator when drag is in between rows

Question

I am changing the row drag symbol via this method in RowDrag:

rowDragAndDropModule.addErrorElem();

It works good to identify an element where I cannot drop to. However I'm running into a problem.

The user can drop the item between two rows, but the way I am detecting it is always over a child row. For row drop this is easy to do dropPosition property of the event, but for rowDrag event it is undefined.

How can I detect that the inbetween symbol is being shown and a drop will result in an insert between rows in the row drag event?

Jagadesh Ram Raajkumar · Accepted Answer

Hi Zachary, 
Greetings from Syncfusion Support. 

Based on your query, you can use the following code snippet to display the indicator when the row drop is between two rows. Based on your requirements we have prepared a sample please refer to it below.Code snippet: 




[app.component.ts] 
    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 (!args.target.closest('td').classList.contains('e-childborder')) { 
            treeGridobj.rowDragAndDropModule.addErrorElem(); 
          } 
       } 
     } 

Sample: https://stackblitz.com/edit/angular-f169028?file=app.component.tsScreenshot: Please get back to us for further assistance. 
Regards,Jagadesh Ram

Zachary · Answer

Thanks for the help!

Jagadesh Ram Raajkumar · Answer

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