(Ajax) Menu inside ClientTemplate inside ClientDetailTemplateId (which is also a grid)

[Simon]

Lets say I have a grid, in which I reference ClientDetailTemplateId("historyTemplate").
Then in my script template I have another grid. In that grid I have
columns.Bound(t => t.Id)
                .Title(Jengo.Resources.Master.OperationsMsg)
                .Width(100)
                .ClientTemplate(
                    Html
                    .Kendo()
                    .Menu()
                    .Name("themenu\\#=Id\\#")
                    .Items(menu => menu.Add()
                        .Text("sometext")
                        .Items(sub =>
                        {
                            sub.Add()
                                .Url(Url.Action("Show", "Damage") + "/#= data.Id #")
                                .Text("anothertext");
                          })
                            )
                      .Orientation(MenuOrientation.Horizontal)
                            .HighlightPath(true)
                            .OpenOnClick(true)
                            .ToClientTemplate()
                            .ToHtmlString()
                        )
             .HeaderHtmlAttributes(new { style = "text-align:center;width:100px;" });
        }
Error I get on Chrome Console is 'Uncaught SyntaxError: Unexpected token ILLEGAL' Problem dissapears when I remove content of ClientTemplate (Html.Kendo.Menu...).

My question is - how can I make menu inside ClientTemplate inside Detail Template work? Did I miss some escape character?

[Giacomo]

Have the same exact issue! Does anybody have a solution?

[Petur Subev]

Hello Guys,

There are empty lines that are added when the scripts are rendered which break the nested templates.

Here is what I tried on my side to make it work:

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(70);
                columns.Bound(o => o.ShipCountry).Width(110);
                columns.Bound(o => o.ShipAddress);
                columns.Bound(o => o.ShipName).Width(200);

                columns.Template(@<text></text>).ClientTemplate(
                    Html
                    .Kendo()
                    .DatePicker().Name("dp#=OrderID#")
                            .ToClientTemplate()
                            .ToHtmlString().Replace("#","\\\\#").Replace("\n","").Replace("\r","")
                        );
            })
            .Events(ev=>ev.DataBound("function(e){this.tbody.find('script').each(function(){eval($(this).html())})}"))
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>

Also you will need to evaluated the initialization scripts when the dataBound event of the Grid is triggered.

I hope the code works the same way on your side too.

Kind Regards,
Petur Subev
Telerik