Child grid ClientFooterTemplate data references parent

2 posts, 0 answers
  1. Chris
    Chris avatar
    3 posts
    Member since:
    Oct 2017

    Posted 08 Nov 2017 Link to this post

    Hi,

    I'm having an issue with a hierarchical grid using ASP.NET MVC5 where I can't seem to access the child grid data in any client templates.

    My overall goal is to be able to put an aggregated max value in the ClientFooterTemplate of the first column.

    Here's my cut down grid code:

    01.@(Html.Kendo().Grid<XXViewModel>()
    02.    .Name("XXGrid")
    03.    .EnableCustomBinding(true)
    04.    .AutoBind(true)
    05.    .DataSource(ds => ds
    06.        .Ajax()
    07.        .Read(r => r.Action("XX_Read", "XX")
    08.        .ServerOperation(true)
    09.    )
    10.    .Events(ev =>
    11.    {
    12.        ev.DetailExpand("detailExpand");
    13.        ev.DetailCollapse("detailCollapse");
    14.    })
    15.    .Columns(c =>
    16.    {
    17.        c.Bound(m => m.XXId);
    18.        c.Bound(m => m.FirstName);
    19.        c.Bound(m => m.Surname);
    20.    })
    21.    .ClientDetailTemplateId("xx-detail-template")
    22.)
    23. 
    24.<script id="xx-detail-template" type="text/x-kendo-template">
    25.    <div class="xx-detail-template">
    26.        <div class="xx-detail-child-grid" style="width: 1140px">
    27.            @(Html.Kendo().Grid<YYViewModel>()
    28.                  .Name("ChildGrid_#=XXId#")
    29.                  .Columns(c =>
    30.                  {
    31.                      c.Bound(m => m.Channel)
    32.                          .Title("Channel")
    33.                          .ClientFooterTemplate("Last refreshed: #=data.ImportedDate.max#")
    34.                          .Width(140);
    35.                      c.Bound(m => m.SentDate)
    36.                          .Title("Sent")
    37.                          .Format("{0:yyyy/MM/dd HH:mm}")
    38.                          .Width(140);
    39.                  })
    40.                  .DataSource(ds => ds
    41.                      .Ajax()
    42.                      .Read(r => r.Action("XXChild_Read", "XX", new {attendeeId = "#=XXId#"}))
    43.                      .Aggregates(a => a.Add(m => m.ImportedDate).Max())
    44.                      .Sort(s => s.Add(m => m.SentDate).Descending()))
    45.                  .ToClientTemplate()
    46.                  )
    47.        </div>
    48.    </div>
    49.</script>

     

    A javascript error is being raised from line 33 of the above snippet: data.ImportedDate is undefined. Upon inspection I can see that data is referencing the datasource of the parent grid. How do I access the child grid's datasource in the client templates?

     

     

  2. Stefan
    Admin
    Stefan avatar
    2475 posts

    Posted 10 Nov 2017 Link to this post

    Hello, Chris,

    The issue occurs because the context is different.

    It can be resolved by escaping the template in order to receive the correct context:

    .ClientFooterTemplate("\\#=customFunction(data)\\#")

    A similar approach can be observed in our demo:

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

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 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