Feature requirement

[Nikitha]

Hello team,

I have two requirements,

1) Let say, I have TreeGrid A and TreeGrid B. I should be able to drag and drop items from TreeGrid A to TreeGrid B only. I want to restrict drag and drop action from TreeGrid B to TreeGrid A.

2) There should be a way to restrict drag and drop action within TreeGrid A and at the same time I should be able to drag and drop from TreeGrid A to TreeGrid B.

3) When I drag an item from TreeGrid A and drop at TreeGrid B, the item should not be removed from TreeGrid A i.e. I just want to drag a copy of an item from TreeGrid A and drop at TreeGrid B.

I am not sure how to enable the above mentioned requirements if they are already present. Please help.

Thank you,

Nikitha R

[Padmavathy Kamalanathan]

Hi Nikitha, 

 

Thanks for contacting Syncfusion Forums. 

 

Query: Feature requirement in Tree Grid Row Drag and Drop 

 

We have achieved your requirement by following the below steps: 

1. We have rendered Tree Grid A with Row Drag and Drop feature enabled(setting allowRowDragAndDrop property to true) and Tree Grid B with Row Drag and Drop feature disabled.
2. Row Drop event get triggered when we drop a record in Tree Grid. If we drag record from Tree Grid A and dropped it to Tree Grid B, RowDrop event of Tree Grid A will be triggered.
3. In RowDrop event of Tree Grid A, we have set args.cancel to true and customized row drop . 
4. Setting args.cancel will prevent normal row drop functionality. This will prevent Row DD within Tree Grid A.
5. In that RowDrop event, we have checked if the target is Tree Grid B. If yes, we have accessed the drop index of Tree Grid B. Then we have added the dragged record to Tree Grid B using addRecord method. Thus record get added to Tree Grid B.
6. Since we do not use default RowDD feature (only added record with addRecord method ) , record dragged from Tree Grid A will not get removed
7. Since we have not enabled Row Drag and Drop feature in Tree Grid B, Row DD will be prevented from Tree Grid B to Tree Grid A.

 

Please check the below code snippet, 

 

        <ejs-treegrid #treegridA id="TreeGridA" [dataSource]='data1' height='360' childMapping='subtasks' 

            [treeColumnIndex]='1' [editSettings]='editOptions' [allowRowDragAndDrop]='true' 

            [selectionSettings]='selectOptions' (rowDrop)='droptoTreeGridB($event)'> 

            <e-columns> 

                <e-column field='taskID' headerText='Task ID' isPrimaryKey='true' width='70' textAlign='Right'> 

                </e-column> 

        </ejs-treegrid> 

 

        <ejs-treegrid #treegridB id='TreeGridB' height='315' [dataSource]='data2' 

            [treeColumnIndex]='1' childMapping='subtasks' [selectionSettings]='selectOptions' 

            [editSettings]='editOptions'> 

            <e-columns> 

                <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90> 

                </e-column> 

                <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column> 

            </e-columns> 

        </ejs-treegrid> 

 

  ngOnInit(): void { 

    this.data1 = sampleData1; 

    this.data2 = sampleData2; 

    this.selectOptions = { type: 'Multiple' }; 

    this.editOptions = { 

      allowEditing: true, 

      allowAdding: true, 

      allowDeleting: true 

    }; 

  } 

 

  droptoTreeGridB(args: any) { 

    args.cancel = true; 

    var ele = args.target.closest('.e-treegrid'); 

    if (ele.id == 'TreeGridB') { 

      var treegridB = (document.getElementById('TreeGridB') as any) 

        .ej2_instances[0]; 

      var treegridA = (document.getElementById('TreeGridA') as any) 

        .ej2_instances[0]; 

 

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

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

        : 0; 

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

        var indx = rowIndex + i; 

        treegridB.addRecord(args.data[i], indx); 

      } 

    } 

  } 

 

 

  

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

 

NOTE: For using addRecord method, EditSettings should be defined in both Tree Grids. Please check below help documentations, 

https://ej2.syncfusion.com/angular/documentation/treegrid/edit/  

https://ej2.syncfusion.com/angular/documentation/api/treegrid/editSettings/ 

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

https://ej2.syncfusion.com/angular/documentation/api/treegrid#rowdrop 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan           

[Nikitha]

Hello Padmavathy Kamalanathan,

Thank you for explaining this in detail. I see that edit setting was needed to meet my requirement.

Thank you so much.

Nikitha R

[Nikitha]

I have an issue when I put these two TreeGrids into ejs-splitter control.

TreeGrid A in one pane and TreeGrid B in another pane.

When I drag a record, the clone record appears and this clone record goes behind the pane of TreeGrid B.

I tried to override style z-index: 10 in class e-cloneproperties to z-index: 20.

It did not work. This is the same sample code with splitter

<div class="control-section" >

    <ejs-splitter id='outterSplitter' #splitterInstance class="splitter-expand" #horizontal height='100%'

    width='100%' separatorSize=3 >

        <e-panes>

            <e-pane size='50%'>

                <ng-template #content>

                    <div>

                        <ejs-treegrid #treegridA id="TreeGridA" [dataSource]='data1' height='360'

                            childMapping='subtasks' [treeColumnIndex]='1' [editSettings]='editOptions'

                            [allowRowDragAndDrop]='true' [selectionSettings]='selectOptions'

                            (rowDrop)='droptoTreeGridB($event)'>

                            <e-columns>

                                <e-column field='taskID' headerText='Task ID' isPrimaryKey='true' width='70'

                                    textAlign='Right'>

                                </e-column>

                                <e-column field='taskName' headerText='Task Name' width='200'></e-column>

                                <e-column field='duration' headerText='Duration' width='80' textAlign='Right'>

                                </e-column>

                                <e-column field='progress' headerText='Progress' width='80' textAlign='Right'>

                                </e-column>

                                <e-column field='priority' headerText='Priority' width='90'></e-column>

                            </e-columns>

                        </ejs-treegrid>

                    </div>

                </ng-template>

            </e-pane>

            <e-pane>

                <ng-template #content>

                    <div>

                    <ejs-treegrid #treegridB id='TreeGridB' height='315' [dataSource]='data2'

                        [allowRowDragAndDrop]='false' [treeColumnIndex]='1' childMapping='subtasks'

                        [selectionSettings]='selectOptions' [editSettings]='editOptions'>

                        <e-columns>

                            <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right'

                                width=90>

                            </e-column>

                            <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>

                        </e-columns>

                    </ejs-treegrid>

                </div>

                </ng-template>

            </e-pane>

        </e-panes>

    </ejs-splitter>

</div>

Thank you,

Nikitha R

[Farveen Sulthana Thameeztheen Basha]

Hi Nikitha, 

Query#:- When I drag a record, the clone record appears and this clone record goes behind the pane of TreeGrid B. 

We are able to replicate the problem at our end. We have validated this issue, due to overflow: auto style applied to splitter pane element dragging element won’t visible outside of current pane. But we can achieve your requirement by workaround solution by adding following CSS in sample level.  

<style> 

    .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, 

    .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal { 

        overflow: unset; 

    } 

</style> 

 

Modified sample Link:-   https://stackblitz.com/edit/angular-nmsevy-ixnwcz?file=index.html 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Nikitha]

Thank you!!

[Farveen Sulthana Thameeztheen Basha]

Hi Nikitha, 

Thanks for your update. Please get back to us if you need any further assistance on it. We are happy to assist you. 

Regards, 

Farveen sulthana T