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

3 posts, 0 answers
  1. Simon
    Simon avatar
    7 posts
    Member since:
    Sep 2012

    Posted 09 Oct 2012 Link to this post

    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?
  2. Giacomo
    Giacomo avatar
    1 posts
    Member since:
    Dec 2013

    Posted 12 Dec 2013 Link to this post

    Have the same exact issue! Does anybody have a solution?
  3. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 14 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top