Copy and Paste Row as Child/Sibling

Syncfusion Angular can help develop angular applications faster with many featured components that look like TreeGrid.

According to the documentation, “Syncfusion Angular UI (Essential JS 2) is a collection of modern TypeScript based true Angular Components. It has support for Ahead Of Time (AOT) compilation and Tree-Shaking. All the components are developed from the ground up to be lightweight, responsive, modular, and touch-friendly.”

In this article, we learn how to copy and paste a child/sibling row in Syncfusion Angular TreeGrid.

First, we create an angular project and add Syncfusion to the project using the getting started guide. For this example, I will use stackblitz.com and you can also start with some examples from documentation like this.

In this project, we will copy and paste the row function. To add a context menu to our project, in appcomponent.ts add the code below:

export class AppComponent {
    public data: Object[] = [];
    public contextMenuItems: Object;
  
  	ngOnInit(): void {
        this.contextMenuItems = [
            { text: "Copy", target: ".e-content", id: "rcopy" },
            
            { text: "Paste Sibling", target: ".e-content", id: "rsibling" },
            
            { text: "Paste Child", target: ".e-content", id: "rchild" },
            
            ];
    }
}

In app.component.htmlwe change <ejs-treegrid ... >. The code is below.

 <ejs-treegrid
    #treegrid
    [dataSource]="data"
    allowPaging="true"
    childMapping="subtasks"
    height="350"
    [treeColumnIndex]="0"

    [contextMenuItems]="contextMenuItems"
    (contextMenuOpen)="contextMenuOpen($event)"
    (contextMenuClick)="contextMenuClick($event)"
    [columns]="treeColumns"
    >

We will create contextMenuOpen function like the code below:

contextMenuOpen(arg?: BeforeOpenCloseEventArgs): void {
    this.rowIndex = arg.rowInfo.rowIndex;
    let elem: Element = arg.event.target as Element;

  
    if (elem.closest('.e-row')) {
      document
        .querySelectorAll('li#rcopy')[0]
        .setAttribute('style', 'display: block;');

      document
        .querySelectorAll('li#rsibling')[0]
        .setAttribute('style', 'display: block;');

      document
        .querySelectorAll('li#rchild')[0]
        .setAttribute('style', 'display: block;');
    
    }
  }

For copying the row, we will create a copy function:

copy() {
    this.copiedRow = this.treegrid.getRowByIndex(this.rowIndex);

    this.treegrid.copyHierarchyMode="None";
    this.treegrid.copy();
    this.copiedRow.setAttribute('style', 'background:#FFC0CB;');
  }

In the contextMenuClick event function, we will check which button the user clicks. Then we copy the row or paste as a child or sibling depending on the value (code below).

contextMenuClick(args): void {
    if (args.item.id == 'rsibling') {
      var copyContent = this.treegrid.clipboardModule.copyContent;

      var stringArray = copyContent.split('t');
      let newRecord: Treerow = new Treerow(
        stringArray[0],
        stringArray[1],
        stringArray[2],
        stringArray[3],
        stringArray[4],
        stringArray[5],
        stringArray[6],
        this.selectedRow.data.ParentItem
      );
      newRecord.children = [];
      newRecord.isParent = true;
      newRecord.id = uuidv4();
      const body = {
        TaskID: newRecord.TaskID,
        TaskName: newRecord.TaskName,
        StartDate: newRecord.StartDate,
        EndDate: newRecord.EndDate,
        Duration: newRecord.Duration,
        Progress: newRecord.Progress,
        Priority: newRecord.Priority,
        isParent: newRecord.isParent,
        ParentItem: newRecord.ParentItem,
      };

      this.http
        .post<any>('https://vom-app.herokuapp.com/tasks', body)
        .subscribe((data) => {
          console.log('post:------------------', data);
          this.dataManager
            .executeQuery(new Query())
            .then((e: ReturnOption) => (this.data = e.result.data as object[]))
            .catch((e) => true);
        });
      this.dataManager
        .executeQuery(new Query())
        .then((e: ReturnOption) => (this.data = e.result.data as object[]))
        .catch((e) => true);

      this.copiedRow.setAttribute('style', 'background:white;');
    }

    if (args.item.id == 'rchild') {
      var copyContent = this.treegrid.clipboardModule.copyContent;
      var stringArray = copyContent.split('t');
      let newRecord: Treerow = new Treerow(
        stringArray[0],
        stringArray[1],
        stringArray[2],
        stringArray[3],
        stringArray[4],
        stringArray[5],
        stringArray[6],
        this.selectedRow.data.TaskID
      );
      newRecord.children = [];
      newRecord.isParent = false;
      newRecord.id = uuidv4();
      const body = {
        TaskID: newRecord.TaskID,
        TaskName: newRecord.TaskName,
        StartDate: newRecord.StartDate,
        EndDate: newRecord.EndDate,
        Duration: newRecord.Duration,
        Progress: newRecord.Progress,
        Priority: newRecord.Priority,
        isParent: newRecord.isParent,
        ParentItem: newRecord.ParentItem,
      };

      this.http
        .post<any>('https://vom-app.herokuapp.com/tasks', body)
        .subscribe((data) => {
          console.log('post:------------------', data);
          this.dataManager
            .executeQuery(new Query())
            .then((e: ReturnOption) => (this.data = e.result.data as object[]))
            .catch((e) => true);
        });

      this.copiedRow.setAttribute('style', 'background:white;');
    } 
    else if (args.item.id === 'rcopy') {
      this.MultiSelect = true;

      this.editSettings = {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,

        newRowPosition: 'Child',
        mode: 'Batch',
      };
      this.copiedRow = this.treegrid.getRowByIndex(this.rowIndex);

      this.treegrid.copyHierarchyMode="None";
      this.treegrid.copy();
      this.copiedRow.setAttribute('style', 'background:#FFC0CB;');
    }
  }

Now our app can copy a row and paste it as a child or sibling to the other row like in the image below:

Copying a row

Pasting row as child

To sum up, in this project, we learned how to use the copy/paste function for pasting as a child or sibling to another row in Syncfusion Angular TreeGrid. You can find the code here.

.

Leave a Comment