KendoUI Template for Context Menu

Question

I'm trying to wire up a Context menu to a JSON data source, but I can't seem to set a template.

If I have a datasource like this (as specified in the docs)

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

all is fine and dandy (It's using some default template I imagine)

However, If I try to use my own template, everything is undefined.

<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,

....

How can I use a template with Kendo Context Menu?

Answer 1

You can push HTML to the text property of the context menu

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

Answer 2

template seems to not actually be documented: http://docs.telerik.com/kendo-ui/api/javascript/ui/contextmenu

When I try to use it, it seems to strip out the elements and just leaves the text. http://dojo.telerik.com/aSenu

I poked through the source a bit, but didn't actually see anywhere that a template option would have been used. Seeing as it is not documented, I would assume it isn't working correctly because it isn't really meant to be used.