Kend UI template for Menu

Question

I'm creating a Razor page using ASP.NET Core 2.0. I'm creating a menu using the Kendo UI Menu control.

@using Kendo.Mvc.UI
<div class="sidebar">
    <div class="treeview">
        @(
            Html.Kendo().Menu()
                .Name("kendomainmenu")
                .BindTo((IEnumerable<MenuItem>)ViewData[SessionConstants.ViewKendoMainMenu])
        )
    </div>
</div>

The data is coming from a backend service which then populates the Menu control with data. All works well.

I want to use a template to customise how each menu item will display.

Here is the template (defined on the same page as the menu control).

<script type="text/html" id="template">
    <p>hello</p>
    <p>#:Text#</p>
</script>

And here is the how the template is bound to the Menu control.

<script type="text/javascript">
  $(document).ready(function () {
    $("#kendomainmenu").kendoMenu({
      template: kendo.template($("#template").html())
    });
  });
</script>

I would be expecting to the word "hello" above each menu item (just to test if the template is being picked up). Inspecting with the F12 developer tools suggests also that the template is not being picked up.

How do I use a template with a KendoUI menu control. I've looked through the docs and examples but can't get it to work.