Angular 16+DevExtreme 23：实现DataGrid内按钮打开DXMenu

核心问题修正 #

你当前的代码将dx-context-menu直接嵌套在dxi-column的按钮组中，这会导致菜单无法正确触发并关联行数据。正确的做法是将菜单独立放置，通过按钮点击事件触发菜单显示，并绑定当前行的上下文数据。

完整实现代码 #

模板文件（.component.html）

<dx-data-grid [dataSource]="gridData">
  <!-- 其他列配置 -->
  <dxi-column type="buttons" width="183px">
    <dxi-button
      text="SU"
      hint="Setup Page"
      (onClick)="openRowMenu($event)"
    ></dxi-button>
  </dxi-column>
</dx-data-grid>

<!-- 独立放置的DXMenu -->
<dx-menu
  #rowMenu
  [dataSource]="menuItems"
  [width]="120"
  (onItemClick)="onMenuItemClick($event)"
></dx-menu>

组件逻辑文件（.component.ts）

import { Component, ViewChild } from '@angular/core';
import { DxMenuComponent, DxDataGridComponent } from 'devextreme-angular';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('rowMenu') rowMenu!: DxMenuComponent;

  gridData: any[] = []; // 你的表格数据源
  currentRowData: any; // 缓存当前点击的行数据
  menuItems = [
    { text: '编辑', id: 'edit' },
    { text: '删除', id: 'delete' },
    { text: '详情', id: 'detail' }
  ];

  // 按钮点击触发菜单
  openRowMenu(event: any) {
    // 获取当前点击行的数据
    this.currentRowData = event.row.data;
    // 在按钮位置显示菜单
    this.rowMenu.instance.show(event.event.target);
  }

  // 菜单项点击事件
  onMenuItemClick(event: any) {
    const selectedItem = event.itemData;
    const rowData = this.currentRowData;

    switch(selectedItem.id) {
      case 'edit':
        console.log('编辑行:', rowData);
        // 执行编辑逻辑
        break;
      case 'delete':
        console.log('删除行:', rowData);
        // 执行删除逻辑
        break;
      case 'detail':
        console.log('查看详情:', rowData);
        // 执行详情逻辑
        break;
    }
  }
}

关键实现要点 #

• 菜单独立放置：避免将dx-menu嵌套在DataGrid列中，确保菜单可以正确渲染和触发。
• 行数据获取：通过按钮点击事件的event.row.data直接获取当前行的完整数据，无需额外查询选中行。
• 菜单定位：调用menu.instance.show(targetElement)将菜单显示在点击的按钮位置，提升交互体验。
• 上下文缓存：用currentRowData缓存当前行数据，确保菜单点击时能关联到对应的行信息。

内容的提问来源于stack exchange，提问作者Fabrizio Manna