Invalid template error when using a telerik control

5 posts, 1 answers
  1. Dan
    Dan avatar
    138 posts
    Member since:
    Nov 2017

    Posted 16 May 2018 Link to this post

    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?

     

  2. Dimitar
    Admin
    Dimitar avatar
    646 posts

    Posted 18 May 2018 Link to this post

    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.
  3. Dan
    Dan avatar
    138 posts
    Member since:
    Nov 2017

    Posted 23 May 2018 in reply to Dimitar Link to this post

    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"

  4. Answer
    Dimitar
    Admin
    Dimitar avatar
    646 posts

    Posted 23 May 2018 Link to this post

    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.
  5. Dan
    Dan avatar
    138 posts
    Member since:
    Nov 2017

    Posted 24 May 2018 in reply to Dimitar Link to this post

    Hi Dimitar,

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

Back to Top