Heirarchy Child Grid causes error when leveraging logic in ClientTemplate

[Jean]

Hi,

I am currently trying to get the following snippet of code from your Kendo MVC examples project to work. Unfortunately it seems as though having logic in the ClientTemplate on a column (ShipName) in the child grid(in the kendo-templ) causes issues. Any ideas how to get around this?

All help will be massively appreciated.

Jean Hibbert

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
        .Name("Employees")
        .Columns(columns =>
        {
            columns.Bound(e => e.FirstName).Width(140);
            columns.Bound(e => e.LastName).Width(140);
            columns.Bound(e => e.Title).Width(200);
            columns.Bound(e => e.Country).Width(200);
            columns.Bound(e => e.City);
        })
        .ClientDetailTemplateId("employeesTemplate")
        .Pageable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
            .PageSize(5)
        )
        .Sortable()
        .Events(events => events.DataBound("dataBound"))
)

<script id="employeesTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("Orders_#=EmployeeID#")
            .Columns(columns =>
            {
                
                columns.Bound(o => o.OrderID).Width(101);
                columns.Bound(o => o.ShipCountry).Width(140);
                columns.Bound(o => o.ShipAddress).Width(200);
                
                columns.Bound(o => o.ShipName)
                .ClientTemplate("#= ShipName? 'XXX' : 'YYY' #")
                .Width(200);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

[Nikolay Rusev]

Hello Jean,

You should escape the # symbol in the templates as what you get here is nested templates(once the child grid and the grid column templates). This is straight forward operation, the template should looks as follow:

.ClientTemplate("\\#= ShipName? 'XXX' : 'YYY' \\#")

More details can be found here: http://docs.kendoui.com/getting-started/framework/templates/overview#template-syntax

Greetings,
Nikolay Rusev
the Telerik team

[Jean]

Thanks!! That works nicely.