Context menu on grid rows does not open

Question

I search in the forums and could not find that one thing that I am missing.

I have a simple grid implementation from your examples which I wanted to

add a context menu on it but it just does not do the job (I get the regular browser context menu).

here is my code (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>

I would love to know what am I missing here

Thanks

score 0 · Accepted Answer · answered Apr 02 '17 at 05:19

Eventually I "solved" it using the JavaScript way instead of the MVC way. If I`ll find the reason why it did not work above I will update this answer to show both ways.

Here is how I solved it:

    <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

1 Answers1