项目名称上的 DevExtreme DataGrid 编辑按钮答案

【问题标题】：DevExtreme DataGrid Edit Button on Item Name项目名称上的 DevExtreme DataGrid 编辑按钮
【发布时间】：2021-03-01 20:55:43
【问题描述】：

我有一个弹出编辑框的 DevExtreme 网格。目前一切正常，最后一列中有编辑按钮。我想摆脱该列，而是在您单击以打开编辑表单的对象名称上有一个链接。我找到了可以自定义按钮的位置，但我不知道如何在其中获取数据以在对象名称 https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Columns/Column_Types/Command_Columns/#Customize_the_Edit_Column 上创建链接。

我还尝试在普通列上使用单击事件（使用列模板），并且有一个指向数据网格的 viewChild，但我想不出任何方法可以打开编辑表单。

我在项目中使用 Angular 9。

【问题讨论】：

标签： angular datagrid devextreme devextreme-angular

【解决方案1】：

这是文档：https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/buttons/。

命令列自定义演示： https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CommandColumnCustomization/Angular/Light/

结构如下：

            ["edit", "delete", {
                hint: "Clone",
                icon: "repeat",
                visible: function(e) {
                    return !e.row.isEditing && !isChief(e.row.data.Position);
                },
                onClick: function(e) {
                    var clonedItem = $.extend({}, e.row.data, { ID: ++maxID });

                    employees.splice(e.row.rowIndex, 0, clonedItem);
                    e.component.refresh(true);
                    e.event.preventDefault();
                }
            }]

您可以使用 onClick 事件分配功能或使用模板创建自己的组件。

模板示例：https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/buttons/#template

【讨论】：

不幸的是，这根本没有回答我的问题。我可以获得一个编辑按钮，但如果我无权访问数据来更改基于行数据显示的文本。我可以添加一个模板，它可以让我访问行数据，但是我没有一种我知道的方法可以从该模板打开编辑弹出窗口。
您可以从按钮事件中获取行ID。然后可以根据id更新datasource数据，更新datagrid。