Question

我尝试将上下文菜单连接到JSON数据源，但我似乎无法设置模板。

如果我有这样的数据源（在文档中指定）

var dataSource = [{
    text: "hello",
    imageUrl: "pencil_icon.png",
    content: "I'm on the side"
}]

一切都很好，花花公子（它使用我想象的一些默认模板）

但是，如果我尝试使用自己的模板，那么一切都是未定义的。

<script type="text/x-kendo-template" id="contextMenuTemplate">
    <li data-action="#=onClickJavascript#"><img src="@Web_Helpers.StratosphereImageUrl("#=image#")" /> #=text#</li>
</script>

var dataSource = [{
            text: "bonjour",
            image: "@@Pencil_Icon",
            onClickJavascript: "alert('hello');"
}]

var menu = $("#contextMenu").kendoContextMenu({
               template: kendo.template($("#contextMenuTemplate").html()),
               dataSource: dataSource,

....

如何在Kendo上下文菜单中使用模板？

Answer 1

template似乎实际上没有记录：http://docs.telerik.com/kendo-ui/api/javascript/ui/contextmenu

当我尝试使用它时，它似乎剥离了元素并且只留下了文本。 http://dojo.telerik.com/aSenu

我在源头上挖了一下，但实际上并没有看到任何地方会使用template选项。看到它没有记录，我认为它不能正常工作，因为它并不真正意义上使用。

Answer 2

您可以将HTML推送到上下文菜单的text属性

$.each(data, function (key, value) {
    items.push({
        text: '<span data-action="' + value.OnClickJavascript + '">' + value.Text + '</span>',
        encoded: false,
        imageUrl: st.SharedContextMenuCommon.StratosphereGlobalImageUrl + value.Image
    });
});

上下文菜单的KendoUI模板

2 个答案: