how can i custom context menu like cascader

网络路径图片-Client-1650039900758-6d8ba5d37fd14b608082724d73d146c7.png



this.contextMenuItems = [
{text: 'EditCol', target: '.e-headercell', id: 'EditCol'}, // name, type(text, number, date, boolean, select), defaultValue, width, font-size, color, aligin, word wrap
{text: 'NewCol', target: '.e-headercell', id: 'NewCol'},
{text: 'DelCol', target: '.e-headercell', id: 'DelCol'},
{text: 'ChooseCol', target: '.e-headercell', id: 'ChooseCol'}, // dialog choose column show/hide
]

1 Reply

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 18, 2022 03:43 PM UTC

Hi Hewen Bin,


From your query we suspect that you need to bind sub-Context menu Items in Custom Contextmenu Items of the TreeGrid. To achieve this, we suggested to define using Items from Contextmenu Items as like given below


Refer to the code below:-

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: 'Filter', target: '.e-headercontent', id: 'filter' },

      {

        text: 'Columns',

        target: '.e-headercontent',

        id: 'collapserow',

        items: [

          { text: 'taskID', id: 'taskID' },

{ text: 'taskName', id: 'taskName' },

        ],

      },

    ];

  }


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

Screenshot:-


If we misunderstood your query or your requirement is different from above, please get back to us with further details.


Regards,

Farveen sulthana T


Loader.
Up arrow icon