Column ClientTemplate in ClientDetailTemplate

1 Answer 7730 Views
Grid
Jan van den Baard
Top achievements
Rank 1
Jan van den Baard asked on 07 Aug 2012, 10:36 AM
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?

1 Answer, 1 is accepted

Sort by
2
Accepted
Avitot
Top achievements
Rank 1
answered on 09 Aug 2012, 05:24 AM
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
Top achievements
Rank 1
commented on 09 Aug 2012, 10:49 AM

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
Top achievements
Rank 1
commented on 16 Oct 2013, 01:44 PM

Yes, please make this clearer in grid docs, spent an hour finding this post. 
Leo Tohill
Top achievements
Rank 1
commented on 17 Dec 2013, 09:54 PM

Me too, I spent a lot of time chasing this problem.    Who knew?
Petur Subev
Telerik team
commented on 19 Dec 2013, 02:05 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Bryan
Top achievements
Rank 1
commented on 06 Apr 2014, 01:10 AM

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
Top achievements
Rank 1
commented on 19 Jun 2015, 07:02 PM

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
Telerik team
commented on 25 Jun 2015, 06:32 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Olivier
Top achievements
Rank 1
commented on 30 Jun 2015, 11:16 AM

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
Telerik team
commented on 03 Jul 2015, 07:23 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Randy
Top achievements
Rank 1
commented on 15 Mar 2017, 06:02 PM

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
Telerik team
commented on 20 Mar 2017, 01:31 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Peter
Top achievements
Rank 1
commented on 10 Jan 2020, 07:36 AM

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
Top achievements
Rank 1
commented on 10 Jan 2020, 10:31 AM

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
Top achievements
Rank 2
commented on 24 Jan 2020, 09:50 PM

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
Telerik team
commented on 29 Jan 2020, 01:14 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Rick
Top achievements
Rank 2
commented on 29 Jan 2020, 08:33 PM

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
Telerik team
commented on 03 Feb 2020, 01:31 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Grid
Asked by
Jan van den Baard
Top achievements
Rank 1
Answers by
Avitot
Top achievements
Rank 1
Share this question
or