Drag a text from Rich text editor and drop to the Tree Grid

[Gobinathan]

Hi Team,

Please give a suggestion for below scenario, It's one of the my project task

 
Drag a text from Rich text editor and drop to Tree Grid.

It's possible or not possible, If possible please give me the example in Stackblitz.

Thanks

Gobinathan.R

[Indrajith Srinivasan]

Hi Gobinathan, 

 

Greetings from Syncfusion support, 

 

Query#:- Drag a text from Rich text editor and drop to Tree Grid.  

  

To Drop dragged Text of RTE into TreeGrid , we have used addRecord method of the TreeGrid. Using dragstart event from created event of RTE, we have get the dragged text and convert it into array of objects and dropped into treeGrid using addRecord method. Also IsPrimaryKey is necessary to perform this Editing operation.  

 

Refer to the code example:-  

 

App.component.html  

<ejs-richtexteditor #rte1 (created)="oncreated(rte1)">  

  

</ejs-richtexteditor>  

  

<ejs-treegrid #treegrid [dataSource]='data' height='350' childMapping='subtasks'[treeColumnIndex]='1'[allowRowDragAndDrop]='true' [selectionSettings]='selectOptions'  [editSettings]='editOptions'>  

             

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

  

       </ejs-treegrid>  

    

App.Component.ts  

  

   export class AppComponent {  

       public data: Object[] = [];  

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

       this.editOptions = {  

          allowEditing: true,  

          allowAdding: true,  

          allowDeleting: true  

       };  

     }  

     oncreated(args) {  

       args.inputElement.addEventListener("dragstart", function(e) {  

          let draggedData = e.target.data;  

          let data = {};  

          data.taskID = 150;  

          data.taskName = draggedData;  

         var treeGrid = document.getElementsByClassName("e-treegrid")[0] .ej2_instances[0];  

         treeGrid.addRecord(data, 1);   //passing data and rowIndex as parameters to addRecord method  

       });  

      }  

     }  

 

Sample Link:- https://stackblitz.com/edit/angular-lhazgn-wuxmct  

 

Using addRecord method you can pass required rowIndex and newRowPosition based on your convenience. Refer to the API Link:-  

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

 

Also using updateRow method, we can change specific row value into Dragged text of RTE.  

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

 

   

 

Note:- Also you can perform Drag and Drop operation within TreeGrid rows by enabling allowRowDragAndDrop property( if required).  

 

Regards,  

Indrajith