Column ClientTemplate in ClientDetailTemplate

13 posts, 1 answers
  1. Jan van den Baard
    Jan van den Baard avatar
    4 posts
    Member since:
    Aug 2010

    Posted 07 Aug 2012 Link to this post

    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
            .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());
                                .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;" })
            .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
            .Events(e => e.DataBound("onDataBound"))

    And the detail grid:
    <script id="userRoleLinkTemplate" type="text/kendo-tmpl">
            .DataSource(dataSource => dataSource.Ajax().Read( read => read.Action( "_UserRoles", "Account", new { userName = "#= Name #" })))
            .Columns(column =>
                    column.Bound(r => r.IsLinked)
                        .ClientTemplate("<input type='checkbox' class='styled' name='checkedLinks_#= RoleId #_#= UserId #' onclick='Urv_onCheckChange(#= RoleId #, #= UserId #, this.checked)'/>")
                        .HtmlAttributes(new { style = "text-align:center" })
                    column.Bound(r => r.RoleName)
            .Events(e => e

    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?
  2. Answer
    Avitot avatar
    15 posts
    Member since:
    Jul 2012

    Posted 09 Aug 2012 Link to this post

    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,

  3. Jan van den Baard
    Jan van den Baard avatar
    4 posts
    Member since:
    Aug 2010

    Posted 09 Aug 2012 Link to this post

    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 avatar
    2 posts
    Member since:
    Apr 2013

    Posted 16 Oct 2013 Link to this post

    Yes, please make this clearer in grid docs, spent an hour finding this post. 
  5. Leo Tohill
    Leo Tohill avatar
    1 posts
    Member since:
    Jul 2006

    Posted 17 Dec 2013 Link to this post

    Me too, I spent a lot of time chasing this problem.    Who knew?
  6. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 19 Dec 2013 Link to this post

    Hello all,

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

    Petur Subev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Bryan
    Bryan avatar
    24 posts
    Member since:
    Nov 2013

    Posted 05 Apr 2014 Link to this post

    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.
  8. Scott
    Scott avatar
    18 posts
    Member since:
    Mar 2015

    Posted 19 Jun 2015 in reply to Bryan Link to this post

    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.
  9. Atanas Georgiev
    Atanas Georgiev avatar
    126 posts

    Posted 25 Jun 2015 Link to this post

    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. 

    Atanas Georgiev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Olivier
    Olivier avatar
    1 posts
    Member since:
    Feb 2015

    Posted 30 Jun 2015 in reply to Atanas Georgiev Link to this post


    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.



  11. Dimiter Madjarov
    Dimiter Madjarov avatar
    2213 posts

    Posted 03 Jul 2015 Link to this post

    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.

    Dimiter Madjarov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Randy
    Randy avatar
    55 posts
    Member since:
    Jul 2009

    Posted 15 Mar in reply to Dimiter Madjarov Link to this post

    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.
  13. Konstantin Dikov
    Konstantin Dikov avatar
    2115 posts

    Posted 20 Mar Link to this post

    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.
Back to Top