Kendo Grid with jquery context-menu plugin

[sandeep]

have a kendo mvc grid with one of the column as client template images. Whenever images are clicked I would like to open jquery context menu which has links to other pages. Now, I have implemented my code this way.

@(Html.Kendo().Grid<FlightListViewModel>()
          .Name("Flights")
          .Events(builder => builder.DataBound("gridDataBound"))
          .DataSource(dataSource => dataSource
                                        .ServerOperation(false)
                                        .Read(read => read.Action("Index", "Flights"))
                                        .PageSize(50)
          )
          .HtmlAttributes(new { style = "height:220px;" })
          .Columns(col =>
              {
                  col.Bound(customer=> customer.Name).Width(280);
                  col.Template(t => t.ClassName).ClientTemplate("<img class='activate-menu' src='/Content/Images/flipo.jpg'  style='cursor: pointer;' />").Title("").Width(40);
              }).Sortable()
                .Scrollable()
                .Pageable(pageable => pageable.ButtonCount(1))
                .ColumnMenu()
                .Filterable()
          )

and in my javascript I would like to use jquery contextmenu..The standard form of using context menu by jquery team is like this:

$.contextMenu({
            selector: '.activate-menu',
            trigger: 'left',
            autoHide: false,
            callback: function (key, options) {
                if (key == "Book") {
                    $('body').css('cursor', 'wait');
                    $.post("/CustomerInformation/SetId", { code: className}, function (data) {
                        window.location.href = "/Hotels/CInformation/Index";
                    });
                }
        },
            items: {
                "Book": {
                    name: "Book", icon1: "Booking"
                }
            }
        });

Now I would like pass the class name of the particular image  to the contextmenu . I have tried onclick on the client template to pass it, but When I nest function with jquery context menu function.. Its throwing me errors. How can I access directly clicked element class name in the context menu function.

[Vladimir Iliev]

Hi Sandeep,

 
Basically supporting KendoUI Grid with third party widgets is out-of-scope of our support service, however I checked the "contextMenu" plugin documentation and it seems that you can get the clicked element from "this" in the "callback" event:

callback: function (key, options) {

    if (key == "Book") {
        $('body').css('cursor', 'wait');
        var clickedElement = $(this);

        console.log(className);
        $.post("/CustomerInformation/SetId", { code: clickedElement.attr("class") }, function (data) {
            window.location.href = "/Hotels/CInformation/Index";
        });
    }
},

Kind Regards,
Vladimir Iliev
Telerik