DevExtreme 数据网格在单击按钮时返回单元格值

Question

在我的项目中，我在剃刀页面中设置了一个简单的数据网格，如下所示：

<div id="Datagrid" dx-item-alias="itemData">
    @(Html.DevExtreme().DataGrid<Batch>().ID("gridContainer")
    .Columns(columns =>
    {
        columns.Add().CellTemplate(
          @<text>
            @(Html.DevExtreme().Button()
            .ID("sendButton")
            .Text("Select Batch")
            .OnClick("onItemClick")     
            )                          
          </text>);
        columns.AddFor(m => m.Id);
        columns.AddFor(m => m.Name).Caption("Name");
    })
    .DataSource(d => d.Mvc().Controller("Batches").LoadAction("GetAllEntries").Key("BatchId")) 
    ) 
</div>

数据通过我创建的 WebApi 加载到数据网格中。我从我的问题中省略了该代码，因为它没有增加任何有价值的东西。

在第一列中，我为呈现的每一行添加了一个按钮。我想要发生的是当我单击此按钮时，它旁边的单元格 ID 的值呈现在 screen/console/whatever 上。我只需要抓住价值。

粗略的视觉效果是：

       | Id  | Name
-------|-----|------
button |  1  | John
button |  2  | Chris

因此，当我按下 ID 值为 1 的单元格旁边的按钮时，我想获取该值并在屏幕或控制台上打印出来。当我按下 id 值 2 旁边的按钮时，我想获取“2”的值并执行相同的操作。

我有以下 js 代码试图实现此目的：

function onItemClick(e) {
    DevExpress.ui.notify("The " + e.component.option("value"));
  }

但是，这不起作用。我需要做什么才能获得正确的单元格值？

Answer 1

添加自定义单元格模板 cellTemplate 回调以在单击单元格按钮时接收完整的行数据。

cellTemplate: function (container, options) {
                    $("<div>")
                        .append($("<button>", { text:"Button","data-key":JSON.stringify(options.data), "click": function(e){
                           console.log("Button Click Row Data => ",JSON.parse(e.target.getAttribute('data-key')));
                        }.bind(this) }))
                        .appendTo(container);
                }

我创建了一个 jsfiddle 演示以供参考 - https://jsfiddle.net/hzgfetLj/2/

Answer 2

实现此目的的最简单方法是使用 ASP.NET MVC Controls -> Fundamentals -> Implementing Templates -> Accessing Template Parameters 文章中描述的方法。 IE。在 Button OnClick 事件处理程序中，您可以使用 data 变量来访问当前网格行：

columns.Add().CellTemplate(
    @<text>
        @(Html.DevExtreme().Button()
                .ID("sendButton")
                .Text("Select Batch")
                .OnClick("function () { onItemClick(data); }")
        )
    </text>);

然后，onItemClick 方法将如下所示：

function onItemClick(data) {
    DevExpress.ui.notify(data.Id);
}

DevExtreme 数据网格在单击按钮时返回单元格值

DevExtreme datagrid returning cell value on button click

javascript

datagrid

devexpress

devextreme