Error with Variable Interpolation in Toolbar Template When Using Tag Helpers in Kendo

[Gerardo]

Hi, I'm migrating a view that was originally written using HTML Helpers in ASP.NET MVC, and I have now ported it to ASP.NET Core using Tag Helpers.

There is a grid with another grid as its detail. The inner grid makes extensive use of variable interpolation—for example, in the grid name, the ID of the container row is used. This works correctly with the HTML Helper approach:

// the template reference
.ClientDetailTemplateId("template-controls")

//the child grid definition, variable interpolation in the grid name and the toolbar, both work
<script id="template-controls" type="text/x-kendo-template">
    @(Html.Kendo().Grid<ChildItem>()
        .Name("GroupGrid_#=GroupID#")
        .ToolBar(toolbar =>
        {
            toolbar.Template(
                "<div class='edit-toolbar'>" 
                    +"<button onclick='editChild(" + Model.ID + ",0,#=GroupID#, this)'>Edit</button>" 
                + "</div>"
            );
        })
    )
</script>

 

But when this code is migrated to ASP.NET Core using Tag Helpers, the variable interpolation in the toolbar does not occur. I would like to know whether this is an error in my code or a feature that is no longer supported.

Here is the Tag Helper code:

//the template reference
<grid-detail-template>
    <kendo-grid name="GroupGrid_${data.GroupID}">
        <toolbar client-template-id="GroupGrid_Toolbar"></toolbar>
    </kendo-grid>
</grid-detail-template>


//the child grid definition, variable interpolation works in the grid name , but the interpolation in toolbar do not
<script id="GroupGrid_Toolbar" type="text/html">
    <div class='edit-toolbar'>
        <button onclick=' editChild(@Model.ID,0,#=GroupID#, this)'>Edit</button>
    </div>
</script>

The browser shows the following error:
Uncaught ReferenceError: GroupID is not defined

The offending line is:

with (data) {
        $kendoOutput = '\n\n        <div class=\'edit-toolbar\'>\n            <button onclick=\'editChild(11941,0,' + (GroupID) + ', this)\' \n                    >\n                ' + ($kendoHtmlEncode(data.GroupID)) + ' : ' + (GroupID) + ' Edit #\n            </button>\n </div>\n ';
    }

BTW similar result if instead of the client-template-id attribute of the toolbar, it is declared as:

<toolbar>
                                    <toolbar-button>
                                        <toolbar-command-template>
// the variable interpolation placed here
                                        </toolbar-command-template>
                                    </toolbar-button>
                                </toolbar> 

[Anton Mironov]

Hi Gerardo,

Thank you for the code snippets and the details provided.

In order to achieve the desired behavior, I would recommend using the syntax demonstrated in the following demo:

• https://demos.telerik.com/aspnet-core/grid/hierarchy

The TagHelper implementation code can be found in the View Source => TagHelper tab.

The following article provides additional information about the Hierarchy in the Grid and HtmlHelpers/TagHelpers examples:

• https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/grid/hierarchy

I hope this information helps. Let me know if the syntax from the demo above achieves the desired result.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov
Progress Telerik

[Gerardo]

 

Thanks, but the examples don't address the issue.

The point is that variable interpolation (#=myvariable#) does not seem to be working in toolbar templates, at least when using tag helpers.

regards