Problem devextreme Angular not working open dxmenu on click button into datagrid

Question

I am currently using DevExtreme version 23 with Angular 16, and I would like to know how I can make a button inside the datagrid open a DXMenu upon clicking.

I have already tried implementing this feature, but I am facing some difficulties in achieving the desired functionality. Ideally, upon clicking the button, the DXMenu should appear with a list of options relevant to the selected row/item within the datagrid.

Could someone please provide guidance or a code snippet on how to accomplish this?

Thank you in advance for your assistance!

    <dxi-column type="buttons" width="183px">
        <dxi-button
          text="SU"
          hint="Setup Page"
    
        ></dxi-button>
        <dx-context-menu
            [dataSource]="menuItems"
            [width]="120"
            [itemClick]="onMenuItemClick">
          </dx-context-menu>
</dxi-column>

Answer 1

For my understanding dxContextMenu is for right click use. I suggest you to use a dxDropDownButton inside a column cellTemplate.

Example:

<dx-data-grid>

    <dxi-column cellTemplate="btnTemplate"></dxi-column>

    <div *dxTemplate="let rowData of 'btnTemplate'">
        <dx-drop-down-button
            text="SU"
            [dropDownOptions]="{ width: 150 }"
            [items]="btnItems"
            (onItemClick)="onItemClick($event, rowData.data)"
        ></dx-drop-down-button>
    </div>

</dx-data-grid>

@Component()
export class MyComponent {
    btnItems = [
        {
            id: 'action1',
            text: 'Actiontext 1',
        },
        {
            id: 'action2',
            text: 'Actiontext 2',
        },
    ];

    onItemClick(event: { itemData: { id, text } }, data: unknown) {
        console.log(data);
        switch (event.itemData.id) {
            case 'action1': alert('1'); break;
            case 'action2': alert('2');break;
        }
    }
}

import { DxDropDownButtonModule } from 'devextreme-angular';

@NgModule({
    imports: [
        ...
        DxDropDownButtonModule
        ...
    ],
    ...
})
export class MyModule {}