如何在 Kendo 上下文菜单中获取当前行？答案

【问题标题】：How to get the current row in a Kendo context menu?如何在 Kendo 上下文菜单中获取当前行？
【发布时间】：2023-03-08 13:59:02
【问题描述】：

我有一个剑道网格的剑道上下文菜单。我想提取当前行的值。这是我的看法：

@(Html.Kendo().Grid<Class>()
    .Name("reqRows")
    .Columns(columns =>
    {
        columns.Bound(x => x.0);
    })
)

@(Html.Kendo().ContextMenu()
    .Name("brc")
    .Target("#reqRows")
    .Items(items =>
    {
        items.Add()
            .Text("1").LinkHtmlAttributes(new { onClick = "confirm()" });
    })
)

<script>
    function confirm(e) {
        alert(e);
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        alert(dataItem.0);
    }
</script>

我得到Undefined 的e 值。如何提取当前行？我可以提取Model.Id，它没有绑定在列中吗？

【问题讨论】：

标签： javascript c# .net kendo-ui kendo-asp.net-mvc

【解决方案1】：

您可以使用Select 事件：

@(Html.Kendo().ContextMenu()
    .Name("brc")
    .Target("#reqRows")
    .Items(items =>
    {
      items.Add().Text("1");
    })
    .Events(e => e.Select("selectItem"))
)

然后像这样获取选中的项目：

function selectItem(e) {
    var grid = $(e.target).data("kendoGrid");
    var item = grid.dataItem(grid.select());
    var data = item.SomeColumn;
}

如果您使用鼠标右键打开上下文菜单，默认情况下不会选择行，item 将是undefined。添加此 javascript 以确保选中该行（请注意，您的网格需要为 .Selectable()）：

$("#reqRows").on("mousedown", "tr[role='row']", function (e) {
    if (e.which === 3) {
        $("#reqRows tbody tr").removeClass("k-state-selected");
        $(this).addClass("k-state-selected");
    }
});

如果需要 ID，则需要将其绑定到网格。把它隐藏起来：

@(Html.Kendo().Grid<Class>()
    .Name("reqRows")
    .Columns(columns =>
    {
        columns.Bound(x => x.Id).Hidden();
        columns.Bound(x => x.SomeColumn);
    })
)

【讨论】：

我仍然得到一个网格的undefined 和项目的以下错误：Unable to get property 'dataItem' of undefined or null reference
嗯，应该可以。如果你这样做：var grid = $("#reqRows").data("kendoGrid");？
是的，完成了这项工作 :) 对这个问题有任何想法吗？
不知道为什么它对你不起作用，它至少对我有用。 :) 你也可以试试var grid = $("#" + e.target.id).data("kendoGrid");

【解决方案2】：

这对我有用，并且不需要添加/删除 k-state-selected 类的代码：

    function selectItem(e)
    {
        var item = e.sender.dataItem(e.target);

        alert(item.SomeColumn);
    }

【讨论】：

【解决方案3】：

仅当您的网格有Ajax binding 时，上述方法才有效。当您有Server binding 时，$(e.target).data("kendoGrid") 为空/未定义。

在这种情况下，我做了以下操作：

在包含一些隐藏字段的列中定义模板：

...
columns.Bound(pg => pg.FileName)
    .Title("My column")
    .Template(
        @<text>
            @* Store information for JS in hidden row fields. *@
            <input type="hidden" class="unique-id-hidden" value="@item.UniqueID" />

            @* Output the visible content. *@
            <div>
                @item.FileName
            </div>
        </text>);
...

稍后，在上下文菜单的 select 处理程序中，我执行以下操作：

function selectItem(e) {
    var uniqueID = $(e.target).closest("tr").find('.unique-id-hidden').first().val();

    // Do something with the data.
}

要获取触发事件的菜单项，您可以使用$(e.item)。

【讨论】：