Invalid template error when using a telerik control

[Dan]

I have a gantt control on a page. The toolbar has to have a similar button like the AddTask when clicking on it a context menu should appear.

The gantt configuration looks like this

@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
    .Name("gantt")
    .Toolbar(tb =>
    {
       tb.Add().Name("append");
       tb.Add().Name("pdf");
       tb.Add().TemplateId("expandCollapseTemplate");
    })

And the template like this

<script id="expandCollapseTemplate" type="text/x-kendo-template">
   <a class="k-button expandbutton"><span class="k-icon"></span>Expand/Collapse</a>
   @(Html.Kendo().ContextMenu()
        .Name("expandMenu")
        .Filter(".expandbutton")
        .CloseOnClick(true)
        .Direction(ContextMenuDirection.Bottom)
        .OpenOnClick(true)
        .ShowOn("click")
        .Items(items =>
        {
           items.Add().Text("Expand Parent");
           items.Add().Text("Expand all");
           items.Add().Text("Collapse all");
        })
        .ToClientTemplate()
        )
</script>

However I get an exception:

Unhandled exception at line 25, column 7809 in http://localhost:56541/Scripts/kendo.all.min.js
0x800a139e - JavaScript runtime error: Invalid template:'<button class="k-button k-button-icontext k-gantt-create" type="button" data-action="add"><span class="k-icon k-i-plus"></span><span>Add Task</span></button><button class="k-button k-button-icontext k-gantt-pdf" type="button" ><span class="k-icon k-i-file-pdf"></span><span>Export to PDF</span></button>
   <a class="k-button expandbutton"><span class="k-icon"></span>Expand/Collapse</a>
   <ul class="k-widget k-reset k-header k-menu k-context-menu k-menu-vertical" id="expandMenu"><li class="k-item k-state-default"><span class="k-link">Expand Parent</span></li><li class="k-item k-state-default"><span class="k-link">Expand all</span></li><li class="k-item k-state-default"><span class="k-link">Collapse all</span></li></ul><script>
kendo.syncReady(function(){jQuery("#expandMenu").kendoContextMenu({"direction":"bottom","openOnClick":true,"filter":".expandbutton","showOn":"click"});});
</script>
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<button class="k-button k-button-icontext k-gantt-create" type="button" data-action="add"><span class="k-icon k-i-plus"></span><span>Add Task</span></button><button class="k-button k-button-icontext k-gantt-pdf" type="button" ><span class="k-icon k-i-file-pdf"></span><span>Export to PDF</span></button>\n   <a class="k-button expandbutton"><span class="k-icon"></span>Expand/Collapse</a>\n   <ul class="k-widget k-reset k-header k-menu k-context-menu k-menu-vertical" id="expandMenu"><li class="k-item k-state-default"><span class="k-link">Expand Parent</span></li><li class="k-item k-state-default"><span class="k-link">Expand all</span></li><li class="k-item k-state-default"><span class="k-link">Collapse all</span></li></ul><script>\n\tkendo.syncReady(function(){jQuery("';expandMenu").kendoContextMenu({"direction":"bottom","openOnClick":true,"filter":".expandbutton","showOn":"click"});});
</script>
;$kendoOutput+=;}return $kendoOutput;'

I have used the same template on a grid and no exception was thrown. 

The telerik version that I tested was with 2018.1.221.545. Was this issue fixed in the latest version or what am I doing wrong?

 

[Dimitar]

Hello Dan,

Thank you for the code sample provided.

I am attaching an ASP.NET MVC solution, where a similar scenario to the one described is demonstrated (Kendo UI Gantt with custom toolbar template). With it, the Gantt widget is initialized correctly (no JavaScript errors) and the template is rendered in the toolbar of the widget. 

I managed to reproduce the described error. It was caused due to invalid rendering for the ContextMenu. The error can be fixed by using a non-rendering code blocks (@{ } instead of @()):

<script id="expandCollapseTemplate" type="text/x-kendo-template">
  <a class="k-button expandbutton"><span class="k-icon"></span>Expand/Collapse</a>
  @{Html.Kendo().ContextMenu()
    .Name("expandMenu")
    ...
    .ToClientTemplate();
  }
</script>

Regards,
Dimitar
Progress Telerik

[Dan]

Hi Dimitar,

I tried your demo solution but it does not work for me. The script generated was this

<script id="expandCollapseTemplate" type="text/x-kendo-template">
    <a class="k-button expandbutton"><span class="k-icon"></span>Expand/Collapse</a>
</script>

so the context menu was not generated. When I look in the view the method ToClientTemplate gets a warning: "Return value of method annotated with [MustUseReturnValue] attribute is not used"

[Dimitar]

Hello Dan,

Could you try deferring the initialization of the ContextMenu like so:

<script id="expandCollapseTemplate" type="text/x-kendo-template">
    <a class="k-button expandbutton"><span class="k-icon"></span>Expand/Collapse</a>
    @(Html.Kendo().ContextMenu()
        .Name("expandMenu")
        .Filter(".expandbutton")
        .CloseOnClick(true)
        .Direction(ContextMenuDirection.Bottom)
        .OpenOnClick(true)
        .ShowOn("click")
        .Items(items =>
        {
            items.Add().Text("Expand Parent");
            items.Add().Text("Expand all");
            items.Add().Text("Collapse all");
        })
        .Deferred()
    )
</script>

@Html.Kendo().DeferredScripts()

Regards,
Dimitar
Progress Telerik

[Dan]

Hi Dimitar,

Thank you for looking into this. It's working as expected.