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

Nested ClientTemplate not working

10 Answers 840 Views

Grid

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

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

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

answered on 29 Jul 2014, 08:26 AM

hierarchy.zip

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

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

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.