0

グリッドに接続できるようにするために必要な単純なコンテキスト メニューがあります。このコンテキスト メニューでは、関連付けられているグリッド レコードの 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>
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 に答える