Nested ClientTemplate not working

12 posts, 0 answers
  1. Ole
    Ole avatar
    36 posts
    Member since:
    Aug 2010

    Posted 13 Jun 2012 Link to this post

    Hi,

    with this view

     

     

    @(Html.Kendo().Grid<Reviews.Models.Review>().Name("ReviewGrid").Columns(columns =>
    {
     
        columns.Bound(p => p.Customer);
        columns.Bound(p => p.Location);
        columns.Bound(p => p.Title).ClientTemplate("<strong>#: Title #</strong>");   //This works  
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
     
    })
    .ToolBar(toolbar => toolbar.Create().Text("Ný Skyrsla"))
        .DetailTemplate(detail => detail.ClientTemplate(
            Html.Kendo().Grid<Reviews.Models.ReviewCategory>()
                .Name("ReviewCategory_#=ReviewID#")
                .Columns(columns =>
                {
                    columns.Bound(o => o.TableNo);
                    columns.Bound(o => o.Category);
                    columns.Bound(o => o.Comment);
                    //columns.Bound(o => o.PerformedDate);
                   // columns.Bound(o => o.Id).ClientTemplate("<img alt='#: Id #' src='"
                   //+ Url.Content("~/Report/ViewPic/")
                   //     + "#: Id #' />").Title("Picture");
                    columns.Bound(o => o.TableNo).ClientTemplate("<strong>#: TableNo #</strong>");//tthis does not work   
                     
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
                })
                .ToolBar(toolbar => toolbar.Create())
            
     
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Pageable()
                .Sortable()
                .Scrollable()
                .DataSource(dataSource => dataSource
                    .Ajax()
     
                        .Events(events => { events.Error("error_handler"); })
                        .Model(model => model.Id(p => p.Id))
                            .Create(update => update.Action("ReviewCategory_Create", "Home", new { reviewId = "#=ReviewID#" }))
                        .Read(read => read.Action("ReviewCategory_Read", "Home", new { id = "#=ReviewID#" }))
                            .Update(update => update.Action("ReviewCategory_Update", "Home", new { reviewId = "#=ReviewID#" }))
                        .Destroy(update => update.Action("ReviewCategory_Destroy", "Home"))
     
                    )
                    .ToHtmlString()
     
    ))
     
    .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
                .Events(events => { events.Error("error_handler"); })
            .Model(model => model.Id(p => p.ReviewID))
            .Create(update => update.Action("Review_Create", "Home"))
            .Read(read => read.Action("Review_Read", "Home"))
            .Update(update => update.Action("Review_Update", "Home"))
            .Destroy(update => update.Action("Review_Destroy", "Home"))
        )
    )

    The first clientTemplate works and

    #: Title # get bound to Review.Title.

    The second clientTemplate does not work, a js error comes , it says can not bind to TableNo. Writing Title instead of Table No will however display the title from Review class. so eventhourgh my grid is bound to ReviewCategory class the clienttemplate is displaying value from Review class.

    Is this a bug ?.

    Best

    Ole

     

     

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 14 Jun 2012 Link to this post

    Hi Ole,

    This is a known issue and our developers actively work on its removing. Actually, for the Kendo UI for ASP.NET MVC official release the way the detail templates are defined will be changed. Please accept our apologies for the inconvenience. 

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Devon
    Devon avatar
    11 posts
    Member since:
    Jul 2012

    Posted 31 Aug 2012 Link to this post

    I am having a similar problem
    I have a clienttemplate (on column) nested inside a ClientDetailTemplate and when the detail page is opened it gives me the following error: Microsoft JScript runtime error: Could not complete the operation due to error 80020101.

    I am using: 2012.2.815.

    Is this the same problem?
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Sep 2012 Link to this post

    Hi Devon,

    The problem you have observed is different from the initial one in this forum thread. I will recommend opening a support ticket and send a small but runnable project that reproduces the issue. This way we would be able to investigate your case and provide the most appropriated solution.
     
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Bryan
    Bryan avatar
    2 posts
    Member since:
    Sep 2012

    Posted 26 Sep 2012 Link to this post

    Has this issue been resolved with the latest update or are there any known workarounds?

    Thanks,
    Bryan
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 29 Sep 2012 Link to this post

    Hi Bryan,

    If your question is with regard to the initial problem in this thread, the answer is "Yes" - the issue is already removed (you can check the corresponding documentation). 
     
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Paul
    Paul avatar
    1 posts
    Member since:
    Jun 2014

    Posted 24 Jul 2014 Link to this post

    Hi,

    I also am experiencing the same issue as Devon using a hierarchical grid where the child grid contains a client template column that consists of another Kendo control - please see below - is there a resolution to this? thanks in advance.

    <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>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
                    Html.Kendo().Menu()
                        .Name("menu_\\#=OrderID\\#")
                        .Items(its =>
                        {
                            its.Add().Text("foo").Items(nested =>
                            {
                                nested.Add().Text("bar");
                                nested.Add().Text("baz");
                            });

                        })
                        .ToClientTemplate().ToHtmlString()
                    );
                  
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
        )
  8. Paul
    Paul avatar
    1 posts
    Member since:
    Jun 2014

    Posted 24 Jul 2014 Link to this post

    Hi I also have the same issue and error message as Devon using nested grid
    Is there a resolution to this? thanks in advance


    <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>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
                    Html.Kendo().Menu()
                        .Name("menu_\\#=OrderID\\#")
                        .Items(its =>
                        {
                            its.Add().Text("foo").Items(nested =>
                            {
                                nested.Add().Text("bar");
                                nested.Add().Text("baz");
                            });

                        })
                        .ToClientTemplate().ToHtmlString()
                    );
                  
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
        )
  9. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 29 Jul 2014 Link to this post

    Hello Paul,

    Indeed defining widget inside nested template is a tricky thing to do and requires a bit of additional code to have it working.

    Here is how the detail grid column could be implemented:
    columns.Bound(o => o.ShipName).Width(200).ClientTemplate(
                     Html.Kendo().Menu()
                        .Name("menu_\\#=OrderID\\#")
                        .Items(its =>
                        {
                            its.Add().Text("top").Items(nested =>
                            {
                                nested.Add().Text("top sub 1");
                                nested.Add().Text("top sub 2");
                            });
     
                        })
                        .Deferred()
                        .ToClientTemplate().ToHtmlString() +                    
                        "<div class=\"scripts\">" +
                            Html.Kendo().DeferredScripts(false).ToString().Replace("jQuery(\"\\#", "jQuery(\"\\\\\\#") +
                        "</div>"
                    );

    The important bits:
     - `.Name("menu_\\#=OrderID\\#")` - every menu instance must have unique name which in this scenario is coupled with the item unique id, i.e OrderID. Hash symbols (`#`) must be escaped as this is nested template.

     - `.Deferred()` - widget scripts are rendered as deferred in order to avoid rendering of nested script tags (one from the nested grid and from the menu initialization scripts)

     - `Html.Kendo().DeferredScripts(false).ToString().Replace("jQuery(\"\\#", "jQuery(\"\\\\\\#")` - this will render the menu initialization scripts without script tag. A bit of adjustment of the `#` symbol is required here.

     - manually eval above scripts on dataBound event of the detail grid

    For your convenience I'm attaching the view from the  Hierarchy example for more details.

    Regards,
    Nikolay Rusev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Anson
    Anson avatar
    3 posts
    Member since:
    Aug 2014

    Posted 03 Nov 2014 in reply to Nikolay Rusev Link to this post

    Hi Nikolay,

    I have tried to copy and paste your code to the Example Project and run it, you can find the result in attachment. Is it your expected result? For me, it is not perfect. And I also found that your solution seems doesn't works on MultiSelect and TimePicker. Thanks.
  11. Anson
    Anson avatar
    3 posts
    Member since:
    Aug 2014

    Posted 03 Nov 2014 Link to this post

    Missed the attachment and I just add "style=display:none;" to fixed it. Thanks.
  12. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 06 Nov 2014 Link to this post

    Hello A & E,

    Indeed there is a CSS rule for hiding those scripts in the view attached with my last response.

    Regards,
    Nikolay Rusev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top