如何獲取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>

我得到e Undefined值。 如何提取當前行？ 我可以提取未綁定在列中的Model.Id嗎？

Answer 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);
    })
)

Answer 2

這對我有用，並且不需要添加/刪除k-state選擇的類的代碼：

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

        alert(item.SomeColumn);
    }

Answer 3

只有當您的網格具有Ajax綁定時，上述方法才有效。 當您具有Server綁定時 ， $(e.target).data("kendoGrid")為null / undefined。

在這種情況下，我做了以下事情：

1. 在包含一些隱藏字段的列中定義模板：

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

2. 稍后，在上下文菜單的select處理程序中，我執行以下操作：

    function selectItem(e) { var uniqueID = $(e.target).closest("tr").find('.unique-id-hidden').first().val(); // Do something with the data. } 

要獲取觸發事件的菜單項，您可以使用$(e.item) 。