Telerik UI Grid pass ID to Kendo Context Menu

Question

I've got a simple context menu that I need to be able wire into a Grid. This context menu needs to allow a user to navigate based on the ID of the grid record it's associated to.

I'm currently trying to pass an HTML Data object, but it doesn't seem to be working as expected.

Does anyone know how to extrapolate the ID? Here is a self contained example of what I'm trying to achieve.

@model IList<EmployeeModel>

<script>
    $(document).ready(function () {
        setTimeout(function () {
            var menu = $("#adminContextMenu"),
                original = menu.clone(true);

            original.find(".k-state-active").removeClass("k-state-active");

            var initMenu = function () {
                menu = $("#adminContextMenu").kendoContextMenu({
                    orientation: 'vertical',
                    alignToAnchor: true,
                    filter: ".adminContextMenu",
                    showOn: "click",
                    animation: {
                        open: {
                            effects: "fadeIn"
                        },
                        duration: 250
                    },
                    select: function (e) {
                        console.log(e);
                    }
                });
            };

            initMenu();
        }, 0);
    });
</script>

<ul id="adminContextMenu">
    <li>Super Long Context Option One</li>
    <li class="k-separator"></li>
    <li>Alpha</li>
    <li>Bravo</li>
    <li>Charlie</li>
</ul>

<div id="clientsDb">
    @(Html.Kendo().Grid(Model)
          .Name("employeeGrid")
          .Columns(columns =>
          {
              columns.Bound(user => user.FullName);
              columns.Bound(user => user.UserGUID)
                     .Width(40)
                     .ClientTemplate("<span><img src='" + @Web_Helpers.StratosphereImageUrl("@Pencil_Icon ") + "' Title='Administration' Class='adminContextMenu' Data-Guid='#= UserGUID #' /></span>")
                     .Title(" ");
          })
          .HtmlAttributes(new {style = "height: 380px;"})
          .Scrollable()
          .Groupable()
          .Sortable()
          .Pageable(pageable => pageable
              .Refresh(true)
              .PageSizes(true)
              .ButtonCount(5))
          .DataSource(dataSource => dataSource
              .Ajax().ServerOperation(false))
    )
</div>

Answer 1

Providing your ClientTemplate has a Data attribute

.ClientTemplate("<span><img src='img/settings.png' Title='Administration' Class='adminContextMenu' Data-Guid='#= UserGUID #' /></span>")

You can get that inside the select method of the kendoContextMenu

select: function (e) {
    console.log(e.target.dataset.guid);
}