Context menu on grid rows

2 posts, 0 answers
  1. שחר
    שחר avatar
    2 posts
    Member since:
    Jan 2016

    Posted 27 Mar Link to this post

    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

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1727 posts

    Posted 29 Mar Link to this post

    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.


    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top