0

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

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

有谁知道如何推断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>
4

1 回答 1

2

提供您的 ClientTemplate 具有 Data 属性

.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);
}
于 2014-10-22T21:13:48.307 回答