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