Nested ClientTemplate not working

[Ole]

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

 

 

 

[Iliana Dyankova]

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

[Devon]

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?

[Iliana Dyankova]

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

[Bryan]

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

Thanks,
Bryan

[Iliana Dyankova]

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

[Paul]

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()
    )

[Nikolay Rusev]

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

 

 

[Dan]

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]

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.

[Anson]

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.

[Anson]

Missed the attachment and I just add "style=display:none;" to fixed it. Thanks.

[Nikolay Rusev]

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