Column ClientTemplate in ClientDetailTemplate

[Jan van den Baard]

I am trying to port a Telerik MVC extentions view to a KendoUI view and I am running into a problem.

The view has a grid and a client detail template which also contains a grid. The detail grid is databound (Ajax) to another datasource than the parent grid. In the detail grid I have a client template column. Problem is that in the client template of the detail grid I can only access the fields from the parent grid, not the fields from the detail view grid. This used to work perfectly in the Telerik MVC extentions.

The parent grid

@(Html.Kendo().Grid(Model)

        .Name("UserManagement")

        .DataSource(dataBinding =>

        {

                dataBinding.Ajax().Read( read => read.Action("_UserManagement", "Account"))

                                    .Create( create => create.Action( "CreateUser", "Account"))

                                    .Model( model => model.Id( u => u.Id ));

        })

        .ToolBar(commands =>

        {

            commands.Create().HtmlAttributes(new { @class = "action pie" });

        })

        .Columns(column =>

                {

                        column.Bound(c => c.Name).Title(ViewResources.UserManagement.Username.ToUpper());

                        column.Template(@<text></text>)

                            .ClientTemplate( "<input type='button' class='action pie' value='" + ViewResources.UserManagement.ResetPw +

                                                "' onclick='onResetPassword( #= Id #, \"#= Name #\" )'/> " +

                                                "<input type='button' class='action pie' value='" + ViewResources.UserManagement.Delete +

                                                "' onclick='onDeleteUser( #= Id #, \"#= Name #\" )'/>")

                        .HtmlAttributes(new { style = "text-align: center;" })

                        .Width(400);

                })

        .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InLine))

        .Pageable()

        .Sortable()

        .Filterable()

        .Events(e => e.DataBound("onDataBound"))

        .ClientDetailTemplateId("userRoleLinkTemplate")

)

And the detail grid:

<script id="userRoleLinkTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<RoleUserLinkModel>()

        .Name("RoleLinks_#=Id#")

        .DataSource(dataSource => dataSource.Ajax().Read( read => read.Action( "_UserRoles", "Account", new { userName = "#= Name #" })))

        .Columns(column =>

        {

                column.Bound(r => r.IsLinked)

                    .Title("")

                    .ClientTemplate("<input type='checkbox' class='styled' name='checkedLinks_#= RoleId #_#= UserId #' onclick='Urv_onCheckChange(#= RoleId #, #= UserId #, this.checked)'/>")

                    .Width(36)

                    .Sortable(false)

                    .HtmlAttributes(new { style = "text-align:center" })

                    .Filterable(false);

                column.Bound(r => r.RoleName)

                    .Title(ViewResources.UserManagement.RoleColumn);

        })

        .Pageable()

        .Sortable()

        .Filterable()

        .Events(e => e

                .DataBound("setupStyling"))

        .ToClientTemplate()

)

In the ClientTemplate of the detail grid I want to access the RoleId and UserId fields of the row but I get the "ReferenceError: RoleId is not defined" message. Scoping it using 'data.RoleId' also does not work because then 'data.RoleId' is replaced with 'undefined'.

Any ideas?

[Avitot]

Hello Jan,

Child Grids are designed to have the ability to get its parent's property values through client templates using the syntax #=ParentProperty#. But when calling its own property values, the syntax \\#=OwnProperty\\# is used rather. :)

Hope this helps,
Avi

[Jan van den Baard]

Hello Avi,

That was it!
 I'm sure it is documented somewhere but I must have missed it. It is working great now.

Thank you very, very much.

[MAGNUS]

Yes, please make this clearer in grid docs, spent an hour finding this post. 

[Leo Tohill]

Me too, I spent a lot of time chasing this problem.    Who knew?

[Petur Subev]

Hello all,

Escaping the sharp symbols which are not part of the current template scope is explicitly highlighted in the documentation:

http://docs.kendoui.com/getting-started/framework/templates/overview

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/client-detail-template


Regards,
Petur Subev
Telerik

[Bryan]

Man! I spent a couple of hours looking for this. That's what so frustrating about Telerik's stuff. On the one hand, it delivers incredible functionality. On the other hand, you can spend forever trying to figure out how to get it to do something that ends up taking almost no effort. For this particular issue, it would be extremely helpful if you demonstrated it in the Kendo UI Grid Hierarchy demo.

[Scott]

Agreed with Bryan. This needs to be added to the Detail template demo. It is super not obvious that the detail template would have the parent data in scope. If anything, I'd expect it to work the other way round, needing special syntax to access the parent row.

[Atanas Georgiev]

Thank you for your feedback - it is greatly appreciated. We will consider demo and doc updates that will demonstrate better the behavior and make the corresponding documentation easier to find. 

Regards,
Atanas Georgiev
Telerik

 

 

[Olivier]

Hello,

Same issue here.

How am supposed to access the property with this syntax ? This code below is not working.

columns.Bound(o => o.SiteSelection).ClientTemplate("\\#=OwnProperty.MyProperty\\#");

Plus, I also think it's more logical the other way around. Spend a lot of time searching for this issue.

Thanks

 

[Dimiter Madjarov]

Hello Olivier,

It is not clear what is causing the problem in the current case. Please share an isolated example that demonstrates it so we could inspect it locally.

Regards,
Dimiter Madjarov
Telerik

 

 

[Randy]

It's been 1.5 years since this topic was discussed and I see that nothing has improved with the documentation. Kendo UI is a fantastic product. I wish the quality of the documentation equaled the quality of the product. This isn't to say there isn't a lot of documentation. There is. However, the quality of much of it is pretty shallow and poor, and, in many cases, it's not where you'd expect to find it. In far too many cases it seems that the person writing the documentation was in a hurry to just produce something. And the result is almost never useful.

[Konstantin Dikov]

Hello Randy,

Thank you for your feedback regarding the documentation. I just want to ensure you that we are constantly trying to improve the documentation, but in most cases it is after a feedback from the developers, which is the most valuable indication that something is missing or is not well explained. Regarding the templates article, can you please elaborate which part is insufficient or can be improved?


Best Regards,
Konstantin Dikov
Telerik by Progress

[Peter]

I have this working template on parent grid:

.ClientTemplate(
                                "# if (CorrectionActionNumberOfDaysPastDeadline>0) { #" +
                                "<span style='color:red'>#= CorrectionActionNumberOfDaysPastDeadline #<span/>" +
                            "# } else { #" +
                                "<span style='color:green'>#= CorrectionActionNumberOfDaysPastDeadline #<span/>" +
                            "# } #");

Can't figure out how to make this work on sub grid:

.ClientTemplate(
                                "# if (Status=='NOT OK') { #" +
                                "<span style='color:red'>\\#=Status\\#<span/>" +
                            "# } else { #" +
                                "<span style='color:green'>\\#=Status\\#<span/>" +
                            "# } #");

I always get the dreaded "invalid template" with no meaningful information to solve it:

If (\\Status\\=='NOT OK')… not working

If (\\#=Status\\#=='NOT OK')… not working

Can somebody help me out?

[Peter]

Ok, so after a lot more trial and error, I came to following solution:

.ClientTemplate(
                                "\\# if (Status == 'NOT OK') { \\#" +
                                "<span style='color:red'>\\#=Status\\#<span/>" +
                            "\\# } else { \\#" +
                                "<span style='color:green'>\\#=Status\\#<span/>" +
                            "\\# } \\#");

Seems you literally need to escape every single # !

Maybe helpful for other devs struggling with the same ;o)

 

[Rick]

Holy #$#&*#*$, I've spent an entire day trying to figure out why I was getting the parent data and not the detail row data.

How about highlighting this fact on the Templates Overview doc page AND pointing it out distinctly in the demos!

Seriously. This is why people complain about Telerik documentation.

[Alex Hajigeorgieva]

Hi, Rick,

The information is already in the article here:

https://docs.telerik.com/kendo-ui/framework/templates/overview#hash-literals

And there are comments in the hierarchy demo code source section. 

https://demos.telerik.com/aspnet-mvc/grid/hierarchy

Would you suggest we include that in the demos description to make it more visible?

In the case that Peter describes, instead of having to escape every single hash literal, it is a lot more practical in my opinion to just call a JavaScript function instead:

https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/faq#how-can-i-use-javascript-functions-in-client-column-templates

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Rick]

Agreed that using the javascript function is easier, but if you follow the directions you linked to, your function will be called but with the wrong data! And then you've got to spend days trying to figure out why... and then you read that one sentence in the middle of the paragraph that mentions double-escaping. Can you tell this is how my few days were spent :)

It needs to be called out much more clearly in the documentation.

Thanks.

[Tsvetomir]

Hi Rick,

Thank you for sharing your feedback on the templating mechanism. Specific information on the "how" and when to escape the hash literals could be found in the following segment of the Templates article shared previously:

https://docs.telerik.com/kendo-ui/framework/templates/overview#hash-literals

Nonetheless, I have added a task in our backlog to consider alternative approaches that could save time for other members of the community to resolve issues with escaping the literals.

 

Regards,
Tsvetomir
Progress Telerik