如何获取 Kendo 上下文菜单中的当前行？

Question

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

@(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 吗？

Answer 1

您可以使用 Select 事件：

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

然后像这样获取 selected 项目：

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

如果您使用鼠标右键打开上下文菜单，默认情况下不会 select 行，item 将是 undefined。添加此 javascript 以确保该行是 selected（请注意，您的网格需要 .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);
    })
)

Answer 2

这对我有用，不需要 adds/removes k-state-selected class:

的代码

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

        alert(item.SomeColumn);
    }

Answer 3

上述方法仅在您的网格有 Ajax binding. When you have Server binding 时有效，$(e.target).data("kendoGrid") 为 null/undefined。

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

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

...
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)。

如何获取 Kendo 上下文菜单中的当前行？

How to get the current row in a Kendo context menu?

.net

javascript

c#

kendo-ui

kendo-asp.net-mvc