How to add custom context menu item in ej2 grid?


ej2 syncfusion

I had a task where I needed to add custom actions to the TreeGrid component in ej2 syncfusion. It was not like a simple Add, Edit, and other CRUD actions. It was some custom actions for the context menu in columns and rows.

You need to add all custom actions to the array. In this example it’s contextMenuItems:

export class AppComponent {
  @ViewChild('treegrid')
  treeGridObj: TreeGridComponent | undefined;
  public data: Object[] = [];
  public pageSettings: Object = { pageSize: 10 };
  public contextMenuItems = [
    {
      text: 'Add', id: 'add',  target: '.e-content', items: [{
        text: 'Child', id: 'addChild'
      }, {
        text: 'Next', id: 'addNext'
      }]
    },
    { text: 'Delete',  target: '.e-content',id: 'delete' },
    { text: 'Edit',  target: '.e-content', id: 'edit' },
    { text: 'Rename Column', id: 'renameColumn', target: '.e-headercontent' },
    { text: 'Delete Column', id: 'deleteColumn', target: '.e-headercontent' },
    { text: 'Insert Column', id: 'insertColumn', target: '.e-headercontent' }
  ];
  ...

Then you need to pass it to the contextMenuItems property of treegrid component:

<ejs-treegrid [dataSource]='someData' 
              #treegrid 
              [allowPaging]='true'
              pageSettings='pager'
              ...
              [contextMenuItems]='contextMenuItems'></ejs-treegrid>

Then you need to add all appropriate handlers for these actions (it was not a part of this post). Btw, these actions for the column:

Ej2 Treegrid actions for column

For the row:

Ej2 Treegrid actions for row

comments powered by Disqus