如何在Syncfusion tregrid的ContextMenu中动态实现Insert Column ?

Question

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

Answer 1

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

1. 如果我们想在标题中显示，我们需要使用。e-headercontent类作为目标以及文本和id属性，并使用ContextMenuClick事件，我们已经执行了插入，删除和重命名列。
2. 为了执行插入/删除/重命名操作，我们将列推/拼接到columns属性中，并使用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
}
}
}

示例链接:https://stackblitz.com/edit/angular-grs5bm?file=app.component.ts

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

文档链接:https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/custom-contextmenuhttps://ej2.syncfusion.com/angular/documentation/treegrid/context-menu/custom-context-menu-items