How can we dynamicaly implement Insert Column in ContextMenu of Syncfusion Treegrid?

Question

How can we implement Insert Column in ContextMenu of Syncfusion Treegrid? Insert Column Rename Column Delete Column

Answer 1

We have achieved your requirement using Custom Contextmenu feature of the TreeGrid and handled the Insert, Delete and Rename the columns by following the steps below:

1. We have placed the new Item as Custom Context menu Item if we want to display in header we need to use .e-headercontent class as target along with text and id properties and using ContextMenuClick events we have performed Insert, Delete and Rename columns.
2. To perform Insert/delete/Rename actions, we have pushed/splice the columns into columns property and refresh the columns using refreshColumns method.

Refer to the below code:

App.Component.html:

<ejs-treegrid #treegrid
                  [dataSource]="data"
                  height="400"
                  childMapping="subtasks"
                  [treeColumnIndex]="1"
                  [contextMenuItems]="contextMenuItems"
                  (contextMenuClick)="contextMenuClick($event)">
        <e-columns>
            <e-column field="taskID"
                      headerText="Task ID"
                      width="80"
                      textAlign="Right"
                      editType="numericedit"></e-column>
        </e-columns>
           .      .     .
 </ejs-treegrid>

App.Component.ts

export class AppComponent {
  public data: Object[] = [];
  @ViewChild('treegrid')
  public treegrid: TreeGridComponent;
  public contextMenuItems: Object;
  ngOnInit(): void {
    this.data = sampleData;
    this.contextMenuItems = [
      { text: 'Insert Column', target: '.e-headercontent', id: 'insert' },
      { text: 'Delete Column', target: '.e-headercontent', id: 'delete' },
      { text: 'Rename Column', target: '.e-headercontent', id: 'rename' },
    ];
  }

  contextMenuClick(args?: MenuEventArgs): void {
    if (args.item.id === 'insert') {
      let columnName = { field: 'priority', width: 100 };
      this.treegrid.columns.push(columnName); // Insert Columns
      this.treegrid.refreshColumns(); // Refresh Columns
    } else if (args.item.id === 'delete') {
      let columnName = 2;
      this.treegrid.columns.splice(columnName, 1); //Splice columns
      this.treegrid.refreshColumns(); //Refresh Columns
    } else if (args.item.id === 'rename') {
      this.treegrid.getColumnByField('taskName'); //Get the required column
      this.treegrid.getColumnByField('taskName').headerText = 'Task details'; //Rename column name
      this.treegrid.refreshColumns(); //Refresh Columns
    }
  }
}

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

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

Documentation Link: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/custom-contextmenu https://ej2.syncfusion.com/angular/documentation/treegrid/context-menu/#custom-context-menu-items