网格行上的上下文菜单打不开

Question

我在论坛中搜索，但找不到我遗漏的一件事。

我从你的示例中得到了一个我想要的简单网格实现

在其上添加上下文菜单，但它无法完成工作（我得到的是常规浏览器上下文菜单）。

这是我的代码（ASP.NET MVC）

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">

            <script type="text/x-kendo-template" id="rowTemplate">
                <div class="orderRow">
                    <tr>
                        <td>
                            #:OrderID#
                        </td>
                        <td>
                            #:Freight#
                        </td>
                        <td>
                            #:OrderDate#
                        </td>
                        <td>
                            #:ShipName#
                        </td>
                        <td>
                            #:ShipCity#
                        </td>
                    </tr>
                </div>
            </script>

            <script>
                var rowTemplate = kendo.template($('#rowTemplate').html());
            </script>

            @(Html.Kendo().Grid<APDashboard.Models.OrderViewModel>()
                .Name("AgilePointDashboardGrid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);
                    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                    columns.Bound(p => p.ShipName);
                    columns.Bound(p => p.ShipCity);
                })
                .ClientRowTemplate("#=rowTemplate(data)#")
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
            )

            @(Html.Kendo().ContextMenu()
                .Name("menu")
                .Target("#AgilePointDashboardGrid")
                .Filter(".orderRow")
                .Orientation(ContextMenuOrientation.Horizontal)
                .Items(items =>
                {
                    items.Add()
                         .Text("Forward");
                })
            )
      </div>
    </div>

    <script>
    $(document).ready(function() {
        var menu = $("#menu");
        var original = menu.clone(true);
        original.find(".k-state-active").removeClass("k-state-active");

        var initMenu = function () {

            menu = $("#menu").kendoContextMenu({
                target: "#AgilePointDashboardGrid",
                filter: ".orderRow",
                select: function(e) {
                    // Do something on select
                }
            });
        };
        initMenu();
    });
    </script>
</div>

我很想知道我在这里错过了什么

谢谢

Answer 1

最终我 "solved" 它使用 JavaScript 方式而不是 MVC 方式。如果我能找到它在上面不起作用的原因，我将更新此答案以显示两种方式。

我是这样解决的：

    <ul id="context-menu">
        <li>Edit</li>
        <li>
            Delete
            <ul>
                <li>Logical deletion</li>
                <li>Permanent deletion</li>
            </ul>
        </li>
    </ul>

    <script>
    $("#context-menu").kendoContextMenu({
        target: "#grid",
        filter: "tr[role='row']",
        select: function(e) {
            var grid = $("#grid").data("kendoGrid");
            var model = grid.dataItem(e.target);
            console.log(model);
        }
    });
    </script>

网格行上的上下文菜单打不开

Context menu on grid rows does not open

asp.net-mvc

grid

contextmenu

telerik