This is a migrated thread and some comments may be shown as answers.

Nested ClientTemplate not working

10 Answers 697 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ole
Top achievements
Rank 1
Ole asked on 13 Jun 2012, 01:39 PM
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

 

 

 

10 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 14 Jun 2012, 10:41 AM
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!
0
Devon
Top achievements
Rank 1
answered on 31 Aug 2012, 08:33 PM
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?
0
Iliana Nikolova
Telerik team
answered on 05 Sep 2012, 03:25 PM
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!
0
Bryan
Top achievements
Rank 1
answered on 26 Sep 2012, 10:36 PM
Has this issue been resolved with the latest update or are there any known workarounds?

Thanks,
Bryan
0
Iliana Nikolova
Telerik team
answered on 29 Sep 2012, 03:42 PM
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!
0
Paul
Top achievements
Rank 1
answered on 24 Jul 2014, 04:16 PM
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()
    )
0
Nikolay Rusev
Telerik team
answered on 29 Jul 2014, 08:26 AM
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.

 
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 04 Nov 2022, 02:25 PM

Hello,

Is this solution still the way to go?

Are there other solutions for this problem cause I am having the same issue but I already use Deferred for everything so using the Html.Kendo.DeferredScripts results in some unwanted duplication of kendo scripts.

Ivan Danchev
Telerik team
commented on 09 Nov 2022, 08:13 AM

Hello,

Unfortunately, there isn't a new way to do that. We haven't come up with a workaround for the scenario where the components are already differed. The solution Nikolay posted is applicable, if the Grids are not deferred.
0
Anson
Top achievements
Rank 1
answered on 03 Nov 2014, 01:48 PM
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.
0
Anson
Top achievements
Rank 1
answered on 03 Nov 2014, 03:20 PM
Missed the attachment and I just add "style=display:none;" to fixed it. Thanks.
0
Nikolay Rusev
Telerik team
answered on 06 Nov 2014, 09:43 AM
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.

 
Tags
Grid
Asked by
Ole
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Devon
Top achievements
Rank 1
Bryan
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Nikolay Rusev
Telerik team
Anson
Top achievements
Rank 1
Share this question
or