Drag and drop in Treegrid not working as expected
Hi,
I am currently working on Treegrid drag and drop.
In the demo provided here https://ej2.syncfusion.com/angular/demos/#/material/treegrid/drag-drop ,
When we move record 7 to the same level as in record 5, it must treat it as a sibling and if on clicking collapse of first node record 7 should also collapse.
but it is not happening like that.
Picture 1:
moved record 7(software specification) after record 5(sometimes it gets lost)
Picture 2:
after collapsing the TaskID 1 it is not considering record 7 as a child. Software specification is not collapsed
I have implemented the same demo and sometimes I loose record while dropping.
Apart from RowDDservice and allowing drag and drop to true is there any additional settings need to be done??
My code implementation goes as below:
<div class="control_wrapper">
<ejs-treegrid [dataSource]='data' #treegrid [treeColumnIndex]='1' id="default"
parentIdMapping='{{treeConfiguration.pidAttribute}}' idMapping='{{treeConfiguration.idAttribute}}'
(dataBound)='onDataBound()' [editSettings]='editSettings' [allowFiltering]="true" [toolbar]='toolbarOption' [allowSorting]="true" [filterSettings]="filterSettings"
(rowSelected)="rowselected($event)" (rowDataBound)='rowBound($event)' (dataBound)="onTreeReady()" [allowRowDragAndDrop]='true'>
<e-columns>
<e-column field='ID' headerText='Node ID' width='20' isPrimaryKey='true' [visible]='false' ></e-column>
<e-column field='Name' headerText='Name' width='60' >
<ng-template #template let-data="">
<i class="{{ data['iconClass'] }}" id="icontooltip"
title="{{data[treeConfiguration.tooltiptext.icon]}}"></i>
<span class="treeName" id="nodetooltip"
title="{{data[treeConfiguration.tooltiptext.node]}}">{{data[treeConfiguration.displayAttribute]}}</span>
<div class="nodeicon">
<span class="e-icons e-add" (click)="addItem(data)"></span>
<span class="e-icons e-menu" (click)="btnclick($event)"></span>
</div>
</ng-template>
</e-column>
</e-columns>
</ejs-treegrid>
<ejs-contextmenu #contentmenutree id='contentmenutree' target='#default' [items]="menuItems" (beforeOpen)='beforeopen($event)' (select)='menuclick($event)'>
</ejs-contextmenu>
</div>
I am facing issues when I move child from one node and trying to make as a sibling of it's parent node heirarchy then
it doesn't come as a sibling instead it looks in the same heriarchy of earlier one and sometimes I loose the record itself
Picture 1:
a.) Data at first; PM002 has four children. b)moved one of the children as a sibling of PM012, but the hierarchy or display which we see is old one, sometimes I record is lost sometimes
Picture 2;
c. collapsing PM002, the other children which is moved will also be collapsed and expanding makes it expand.
Problem here is it is not going as a sibling of other node and state is not changing.
Do I need to follow any specific rules while drag and drop of record.
Kindly let me know how can I proceed.
Thanks and Regards,
Pooja K
SIGN IN To post a reply.
7 Replies
Hi Pooja,
Thanks for your interest in Syncfusion Components.
Query#:- it doesn't come as a sibling instead it looks in the same heriarchy of earlier one and sometimes I loose the record itself.
Tree Grid Row Drag and Drop feature, will provides the way to drop the row above, below or child to the target row (i.e. Top segment, bottom segment Or middle segment position) with the respective to the target row position.
- Above or TopSegment – data will be placed above the record – For this we have added row border (CSS) above the record (check screenshot – border in PINK)
- Below – data will be placed below record - For this we have added row border (CSS) below the record
- Middle – This means dropped data as child. If you drop a record as child to another record, which is already having children, this dropped record will be placed as one of the child record to the parent. - For this we have added row border (CSS) to all sides of the record
From your query, If you want to drop a record as child of another parent you need to drop as like the below screenshot.(Middle Segment)
Bottom(CSS border below the record)/Top Segment (CSS border above the record):-
Refer to the Video Demo:-
So we suggest you to refer the Screenshots and Video Demo to drop in Middle segment for Child record(To form Hierarchy structure). Kindly get back to us if you need any further assistance.
Regards,
Farveen sulthana T
Hi Team,
Attachment: syncfusionAttachment_1e0eadd7.zip
The video demo provided here is not related to drag and drop.
Please find my screenshots below with drag and drop behavior
Please find my screenshots below with drag and drop behavior
Query 1:
The row with hierarchy of children if dragged above it only shows expandle icon left to it, but not the children:
Picture 1: showing existing hierarchy of record PM019 having 3 children
Picture 2 showing expanded icon when PM019 is placed above Pm015:
Query 2
Addition of record to a row which dont have children
Picture 1 Addition of record with Name : node1 as a child of PM007
Picture 2: Dragging and trying to make it as child of PM024, it becomes child but PM007 is lost and node1 will also be present in the same location
Query 3:
I am trying to add a record to a row which already has children and then trying to drag that record across treegrid, but I am not able to drop it gets stuck at one position,
but if I click on outside of treegrid it disappears not adding anything to it.
Picture 1:Addition of record with Name : "node2" as a child of PM002
Picture 2: dragging of node2 is stuck:
Picture 3: if the dragged position(PM012) node is added one more record with name "node3"
node2 still present at first parent PM002 with expandable icon
node3 getting added in middle
node2 appears back at parent PM012 with expandable icon
My code implementation goes as below:
<div class="control_wrapper">
<ejs-treegrid [dataSource]='data' #treegrid [treeColumnIndex]='1' id="default"
parentIdMapping='{{treeConfiguration.pidAttribute}}' idMapping='{{treeConfiguration.idAttribute}}'
(dataBound)='onDataBound()' [editSettings]='editSettings' [allowFiltering]="true" [toolbar]='toolbarOption' [allowSorting]="true" [filterSettings]="filterSettings"
(rowSelected)="rowselected($event)" (rowDataBound)='rowBound($event)' (dataBound)="onTreeReady()" [allowRowDragAndDrop]='true'>
<e-columns>
<e-column field='Name' headerText='Name' width='60' >
<ng-template #template let-data="">
<i class="{{ data['iconClass'] }}" id="icontooltip"
title="{{data[treeConfiguration.tooltiptext.icon]}}"></i>
<span class="treeName" id="nodetooltip"
title="{{data[treeConfiguration.tooltiptext.node]}}">{{data[treeConfiguration.displayAttribute]}}</span>
<div class="nodeicon">
<span class="e-icons e-add" (click)="addItem(data)"></span>
<span class="e-icons e-menu" (click)="btnclick($event)"></span>
</div>
</ng-template>
</e-column>
<e-column field='ID' headerText='Node ID' width='20' isPrimaryKey='true' ></e-column>
</e-columns>
</ejs-treegrid>
<ejs-contextmenu #contentmenutree id='contentmenutree' target='#default' [items]="menuItems" (beforeOpen)='beforeopen($event)' (select)='menuclick($event)'>
</ejs-contextmenu>
</div>
Add record functionality is also attached, Kindly check and let me me know what is the issue.
Thanks in advance
Regards,
Pooja K
Attachment: syncfusionAttachment_1e0eadd7.zip
Hi Pooja,
Sorry for the inconvenience caused.
We have attached the Video demonstrating Drag and Drop functionality with Above, Middle(Child), Below positions. Refer to the below Link:-
We have checked your reported problems by preparing sample but we are unable to reproduce any of the problems at our end. Refer to the sample Link:-
Query#:-1 showing expanded icon when PM019 is placed above Pm015:
Query#2:- Dragging and trying to make it as child of PM024, it becomes child but PM007 is lost and node1 will also be present in the same location
Query#3:- Picture 2: dragging of node2 is stuck:
(removed from PM002 and added under PM012)
So kindly replicate your problem from the above attached sample/Video Demo and revert us back or simple issue replicable sample to proceed further.
Regards,
Farveen sulthana T.
Hi Thank you for the response.
I have replicated the issue in the following sample:
I have added plus icon in front of each node and based on which I am adding node from the prompt input
Here I am facing few issue, please find the screenshot and explanation below and provide us with the solution.
Query1: node1 which is under Pm007 is dragged below node2 which is under PM002 and then collapsing PM002 is only hiding child task 2 and not node2 or node1 both
Similarly when E11-008 is placed under Pm007 and then try to expand or collapse it doesn't collapse or expand node1 which is it's child
Query2: Addition of node on clicking of plus icon and trying to drag and drop
Picture 1:
I am adding node by using prompt. A node named TASK1 is added under PM012
Now trying to drag and drop the created TASK1 into PM002 it gets added as child of that node. But it remains in the same place as before at down and node PM012 disappears
And also after if I try to move TASK 1 node it gets struck
Below is sample I have used to replicate the issue:
My requirement is to have, on click of plus icon I should add node as a child to that parent and need to drag and drop anywhere else and make it work without any duplicates of the added node
Please provide inputs for this.
Regards,
Pooja K
SIGN IN To post a reply.
