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的{{1}}值。如何提取当前行？我可以提取未绑定在列中的e吗？

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

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

3 个答案: