Column ClientTemplate in ClientDetailTemplate

11 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
    @(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?
  2. Answer
    Avitot
    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,
    Avi

  3. Kendo UI is VS 2017 Ready
  4. 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.
  5. MAGNUS
    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. 
  6. 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?
  7. Petur Subev
    Admin
    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:

    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!
  8. 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.
  9. 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.
  10. Atanas Georgiev
    Admin
    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. 

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

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

    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

     

  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 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.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready