angulardevextremedevextreme-angular

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


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>

Solution

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