网格行上的上下文菜单无法打开

时间:2017-03-27 11:52:29

标签: asp.net-mvc telerik grid contextmenu

我在论坛中搜索,找不到我遗失的一件事。

我的示例中有一个简单的网格实现,我想

在其上添加一个上下文菜单,但它不能完成这项工作(我得到常规的浏览器上下文菜单)。

这是我的代码(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>

我很想知道我在这里失踪了什么

由于

1 个答案:

答案 0 :(得分:0)

最终我解决了#34;它使用JavaScript方式而不是MVC方式。如果我找到上面没有工作的原因,我会更新这个答案以显示两种方式。

以下是我解决它的方法:

/var/www/