Context menu on grid rows

[שחר]

Hi all

 

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

[Viktor Tachev]

Hello,

Make sure that the row template is a table row element in order for the rendered HTML to be valid. If you would like an illustration on using Row Template in Grid you would find the following example interesting.

• http://demos.telerik.com/aspnet-mvc/grid/rowtemplate

As for the context menu you should define it as illustrated in this example. The code for your scenario would look similar to the following.

@(Html.Kendo().ContextMenu()
        .Name("menu")
        .Target("#grid")
        .Filter(".orderRow")
        .Orientation(ContextMenuOrientation.Horizontal)
        .Animation(animation =>
        {
            animation.Open(open =>
            {
                open.Fade(FadeDirection.In);
                open.Duration(500);
            });
        })
        .Items(items =>
        {
            items.Add().Text("Item 1");

            items.Add().Text("Item 2");

            items.Add().Text("Item 3");

        })
)

Regards,
Viktor Tachev
Telerik by Progress