This is a migrated thread and some comments may be shown as answers.

Invalid template error when using a telerik control

4 Answers 508 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Dan asked on 16 May 2018, 12:23 PM

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?

 

4 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 18 May 2018, 10:34 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 23 May 2018, 06:06 AM

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"

0
Accepted
Dimitar
Telerik team
answered on 23 May 2018, 02:32 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 24 May 2018, 07:42 AM

Hi Dimitar,

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

Tags
Gantt
Asked by
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Dimitar
Telerik team
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or