Drag-and-Drop between TreeGrids - source grid to NOT delete the rows

[AlexB]

Hello guys,

I'm new to Syncfusion put already see the greatness of the framework.

Can you guys help me with this issue:

I want to drag and drop TreeGrids but the source TreeGrid must not lose the rows in favor of the destination TreeGrid they must be colored differently instead! (here I'm aiming for custom behavior each time I click a group that has rows under they should be colored differently in the source TreeGrid)

[Farveen Sulthana Thameeztheen Basha]

Hi Loic Roger,

We are working on this reported query with high priority and get back to you by 9^th September 2022.

Regards,
Farveen sulthana T

[Farveen Sulthana Thameeztheen Basha]

Hi AlexB,

We regret for the convenience caused.  We will get back to you by 12^th September 2022. Until then we appreciate your patience.

Regards,

Farveen sulthana T

[Farveen Sulthana Thameeztheen Basha]

Hi AlexB,

We appreciate your patience.

Query#:-I want to drag and drop TreeGrids but the source TreeGrid must not lose the rows in favor of the destination TreeGrid they must be colored differently instead!

To achieve this requirement(Source TreeGrid not lose the rows), we need to handled the rowDragandDrop operation manually by preventing the default operation. In the rowDrop event of the TreeGrid, we have prevented the default rowDragandDrop operation by setting args.cancel as true. So that we can maintain the dragged rows in the source TreeGrid itself. Instead of dropping into Dest TreeGrid, we have customize the rows by applying the background color.

In the destination TreeGrid, we have added the dragged record to the DestTreeGrid  by passing the data and "rowIndex" as parameters to this addRecord method.

Refer to the code below:-

App.Component.html:-

 

<ejs-treegrid

      #treegrid

      id="TreeGrid"

      [dataSource]="data"

      [allowRowDragAndDrop]="true"

      height="315"

      [treeColumnIndex]="1"

      [rowDropSettings]="rowDrop"

      [selectionSettings]="selectionSettings"

      childMapping="subtasks"

      (rowDrop)="rowDropped($event)"

      [editSettings]="editSettings"

    >

      <e-columns>

        <e-column

          field="taskID"

          headerText="Task ID"

          [isPrimaryKey]="true"

          textAlign="Right"

          width="90"

        ></e-column>

       

    </ejs-treegrid>

  </div>

 

App.Component.ts:-

 

 public rowDropped(args: any) {

        args.cancel = true;

 

        var rowIndex = !isNullOrUndefined(args.target.closest('.e-row'))

            ? args.target.closest('.e-row').rowIndex

            : 0;

        var data = args.data;

        var totalRecords = [],

            childData = [];

        for (var i = 0; i < data.length; i++) {

            totalRecords.push(data[i]);

            if (data[i].hasChildRecords) {

                var childRecords = data[i].Children;

                for (var j = 0; j < childRecords.length; j++) {

                    totalRecords.push(childRecords[j]);

                }

            }

        }

        for (var k = 0; k < totalRecords.length; k++) {

            var proxy = this.destGrid;

            this.destGrid.addRecord(totalRecords[k], rowIndex);   //add the dragged record into destTreeGrid using addRecord method

        }

 

        const draggedRows = args.rows;

        Array.from(draggedRows).map((row) => {

            row.closest('tr').classList.add('bgcolor'); //add the background color for dragged rows

        });

    }

sample link:-
https://stackblitz.com/edit/angular-5yfgth?file=app.component.html

Screenshot:-

API link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#addrecord

Please get back to us if you are facing any difficulties on this.

Regards,

Farveen sulthana T

[AlexB]

Thank you very much for the reply ... how about the image on the left of the rows 

How can I add this

but also preserve the functionality of drag and drop and users be able to drag rows from that image ...


PS: From my experiments, I noticed if drag and drop and also rows rearrange are added as functionality the overall functionality of drag and drop between TreeGrids suffers... (I will make a stack blitz to emphasize the use case)

[Farveen Sulthana Thameeztheen Basha]

Hi AlexB,

Query#:- How about the image on the left of the rows

We have forward the query to dependent team and provide you response(about showing rowDragandDrop icon) by on or before 19^th September 2022.

Also from your query suspect that you need to perform RowDragand Drop within TreeGrid using reorderRows method(while using multiple treegrids). While using the reorderRows method, you can reorder the rows based on given indexes and position. You need to pass the drag index and drop index and position.

Refer to the code below

App.Component.ts:-

 

       public rowDropped(args: any) {

            var dropinx = args.dropIndex; //drop index

            var draginx = args.fromIndex; // drag index

            var position = args.dropPosition;

            var treegrid = (document.getElementById('TreeGrid') as any)

                .ej2_instances[0];

            if (treegrid) {

                treegrid.reorderRows([draginx], dropinx, 'below');

            }

        }

API link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#reorderrows

Query#:- I noticed if drag and drop and also rows rearrange are added as functionality the overall functionality of drag and drop between TreeGrids suffers

In order to achieve your requirement (Customization of dragged rows and prevent rowDrop operation) we have provided this customized solution. So that we have manually performed the Drop  operation alone for Destination TreeGrid using addRecord method. Refer to the code below:-

Please get back to us if you are facing any difficulties on this.

Regards,

Farveen sulthana T

[Farveen Sulthana Thameeztheen Basha]

Hi AlexB,

Thanks for your patience.

Query#:- How about the image on the left of the rows

In our EJ2 TreeGrid architecture, the Drag icon column is rendered for the TreeGrid which enables the Row reordering within the Grid. Also, we have calculated the cell index in many features based on the drag icon column and the TreeGrid "rowDropSettings.targetID" property. So, in our architecture, we could not add the draggable icon while enabling the row to drag and drop between TreeGrids.

Regards,

Farveen sulthana T