Question

我有一个简单的上下文菜单，我需要能够连接到网格。此上下文菜单需要允许用户根据与其关联的网格记录的ID进行导航。

我目前正在尝试传递HTML数据对象，但它似乎没有按预期工作。

有谁知道如何推断ID？这是我想要实现的一个自包含的例子。

@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

提供ClientTemplate具有数据属性

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

你可以在kendoContextMenu

的select方法中找到它

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

Telerik UI Grid将ID传递给Kendo上下文菜单

1 个答案: