如何在Syncfusion Treegrid 的ContextMenu 中动态实现Insert Column？

Question

如何在Syncfusion Treegrid的ContextMenu中实现Insert Column？插入列重命名列删除列

Answer 1

我们已经使用 TreeGrid 的自定义上下文菜单功能实现了您的要求，并按照以下步骤处理了插入、删除和重命名列：

如果我们想在 header 中显示我们需要使用 .e-headercontent class 作为目标以及 text 和 id 属性，我们已将新项目放置为自定义上下文菜单项目并使用我们执行插入、删除和重命名列的 ContextMenuClick 事件。
要执行 Insert/delete/Rename 操作，我们将 pushed/splice 列分为列属性并使用 refreshColumns 方法刷新列。

参考以下代码：

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
    }
  }
}

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

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

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

如何在Syncfusion Treegrid 的ContextMenu 中动态实现Insert Column？

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

javascript

syncfusion