Aggregates failing on hierarchical grids.

8 posts, 1 answers
  1. Thomas
    Thomas avatar
    2 posts
    Member since:
    Feb 2013

    Posted 06 Mar 2013 Link to this post

    I'm currently having an issue with aggregates on child grids. For the system I am currently developing, we have a grid that shows our businesses different projects. Each row expands out using the "detail template" (kendo ui detail template demo) feature to show a tabset with each tab having a sub grid. The aggregate i am trying to implement is in the invoices tab's grid for a project, i would like to have a sum of the amount of each invoice generated. I have followed the tutorials exactly (kendo ui aggregate demo) but the rows will no longer expand out and the javascript console shows the error: "Uncaught ReferenceError: sum is not defined".

    The exact same code used to do the aggregation on this grid will work on the parent grid fine. I'm very unsure as to why i'm getting this error. Below i've listed out the code for the grids and attached screenshots of the grids in action.

    Any help will be appreciated.

    Parent grid view code:
    @(Html.Kendo().Grid<Central.Models.ProjectsModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.projectCode)
                .HeaderTemplate("Project Code");
            columns.Bound(p => p.protocolNo)
                .HeaderTemplate("Protocol")
                .ClientTemplate("<div style='width: 100%; height: 20px; overflow: hidden;'>#if(protocolNo !== null) {#<span title='#=protocolNo#'>#=protocolNo#</span>#}#</div>");
            columns.Bound(p => p.description)
                .HeaderTemplate("Description")
                .ClientTemplate("<div style='width: 100%; height: 20px; overflow: hidden;'>#if(description !== null) {#<span title='#=description#'>#=description#</span>#}#</div>");
            columns.Bound(p => p.typeCode)
                .HeaderTemplate("Type");
            columns.Bound(p => p.userCode)
                .HeaderTemplate("User");
            columns.Bound(p => p.contractValue)
                .ClientTemplate("<div style='text-align: right;'>#= kendo.toString(contractValue, \"n\")#$#=currency#   </div>")
                .HeaderTemplate("<div style='float: right; margin-right: 10px;'>Contract Value</div>");        
            columns.Command(c => { c.Edit(); c.Destroy(); })
                .HtmlAttributes(new { style = "display: none;" })
                .Width(1);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Projects_Read", "Projects"))
            .Create(create => create.Action("Projects_Create", "Projects"))
            .Update(update => update.Action("Projects_Update", "Projects"))
            .Destroy(destroy => destroy.Action("Projects_Destroy", "Projects"))
            .PageSize(30)
            .Model(model =>
            {
                model.Id(p => p.projectCode);
                model.Field(p => p.projectCode).DefaultValue("#=projectCode#");
            })      
        )
        .Pageable()
        .Filterable()
        .Sortable()
        .Resizable(resize => resize.Columns(true))
        .Selectable()
        .Scrollable((scr => scr.Height(500)))
        .ClientDetailTemplateId("projectsGridDetail")
        .ToolBar(t => { t.Create(); })
        .Editable(e => e.Mode(GridEditMode.PopUp))
        .Events(e =>
        {
            e.Edit(@<text>function(e) { onEdit(e); }</text>);
        })
    )
     
    <script id="projectsGridDetail" type="text/kendo-tmpl">
        @(Html.Kendo().TabStrip()
                .Name("TabStrip_#=projectCode#")
                .SelectedIndex(0)
                .Items(items =>
                {
                    items.Add().Text("Project Details").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Details.cshtml")</text>);             
                    items.Add().Text("Sites").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Sites.cshtml")</text>);
                    items.Add().Text("Contact").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Contacts.cshtml")</text>);
                    items.Add().Text("Invoices").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Invoices.cshtml")</text>);
                })
                .ToClientTemplate()
         )           
    </script>
    As you can see, it uses partial views to separate the code out for the sub grids.

    Invoices grid view code:
    @using Kendo.Mvc.UI
     
     
    <div>
        @(Html.Kendo().Grid<Central.Models.ProjectsInvoiceModel>()
            .Name("Invoices_#=projectCode#")
            .Columns(columns =>
            {
                columns.Bound(p => p.description)
                    .HeaderTemplate("Description");
                columns.Bound(p => p.amount)
                    .HeaderTemplate("Amount")
                    .ClientFooterTemplate("Sum: #=sum# ");
                columns.Bound(p => p.ubcAmount)
                    .HeaderTemplate("UBC Amount");
                columns.Command(p => { p.Edit(); p.Destroy(); })
                    .Width(158);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Aggregates(aggregates => {
                    aggregates.Add(p => p.amount).Sum();
                })
                .Read(read => read.Action("Invoice_Read", "ProjectsInvoice", new { projectCode = "#=projectCode#" })) // Specify the action method and controller name
                .Create(create => create.Action("Invoice_Create", "ProjectsInvoice"))
                .Destroy(destroy => destroy.Action("Invoice_Destroy", "ProjectsInvoice"))
                .Update(update => update.Action("Invoice_Update", "ProjectsInvoice"))
                .PageSize(30)
                .Model(model =>
                {
                     model.Id(p => p.projectInvoiceId);
                     model.Field(p => p.projectCode).DefaultValue("#=projectCode#");
                })          
                 
            )
            .ToolBar(toolbar =>
            {
                toolbar.Create();
            })
            .Pageable()
            .HtmlAttributes(new { style = "margin: 7px 0px;" })
            .Scrollable(scr => scr.Height(200))
            .Filterable()
            .Sortable()
            .Editable(edit => {
                edit.Mode(GridEditMode.PopUp);
            })
            .ToClientTemplate()
        )
    </div>
    Attached files:
    1. The grid when trying to expand rows while #=sum# is in the client footer template for the aggregate column.
    2. The grid expanding normally without #=sum# used.
  2. Answer
    Rosen
    Admin
    Rosen avatar
    3239 posts

    Posted 06 Mar 2013 Link to this post

    Hi Thomas,

    The cause for the error you have described is incorrect template. As the column footer template is used within the "master" template but it should be executed separately (during the creation of the child grid), it should be escaped:

    .Columns(columns =>
       {
          //..
           columns.Bound(p => p.amount)
               .HeaderTemplate("Amount")
               .ClientFooterTemplate("Sum: \\#=sum\\# ");
          //..
       })

    Greetings,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Thomas
    Thomas avatar
    2 posts
    Member since:
    Feb 2013

    Posted 07 Mar 2013 Link to this post

    Brilliant. That worked perfectly, thanks!
  4. Benoit
    Benoit avatar
    5 posts
    Member since:
    Apr 2013

    Posted 28 Apr 2013 Link to this post

    Exactly what i was looking for thanks a lot!

    That saves me tons of times
  5. Daniel
    Daniel avatar
    17 posts
    Member since:
    Jan 2014

    Posted 01 Mar 2014 Link to this post

    Hi,

    I'm running into the exact same problem and googled for hours to find a working solution.
    This is a often used scenario, so I think this should be contained anywhere into the documentation.

    E.g. here: http://demos.telerik.com/kendo-ui/web/templates/expressions.html?mvc
    or here: http://demos.telerik.com/kendo-ui/web/grid/hierarchy.html?mvc
    or here: http://demos.telerik.com/kendo-ui/web/grid/detailtemplate.html?mvc

    Regards,
    Daniel
  6. Vineet
    Vineet avatar
    2 posts
    Member since:
    Jun 2015

    Posted 13 Dec 2015 Link to this post

    Thanks. Very important thread indeed.
  7. Iwan van Ee
    Iwan van Ee avatar
    23 posts
    Member since:
    Dec 2009

    Posted 07 Dec 2016 Link to this post

    I also had this error message and changed it as described, but now my sum is always 0. The aggregate is not summarising!

    @(Html.Kendo().Grid<DataBuilder.ProxyMaterial>()
                .Name("grid_Material#=PipeSize#")
                .Columns(columns =>
                {
                    ...
                    columns.Bound(o => o.PriceIndexCorrection).Width(50);
                    columns.Bound(o => o.UnitPrice).Width(100);
                    columns.Bound(o => o.Total).Width(120)
                    .ClientFooterTemplate("Sum: \\#=sum\\# ");
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Aggregates(aggregates =>
                    {
                        aggregates.Add(o => o.Total).Sum();
                    })
                    .Read(read => read.Action("ReadMaterial", "ReportsCalculationSpecification").Data("getParameters"))
                )
                .ToolBar(tb => tb.Excel())
                .Sortable()
                .ToClientTemplate())

     

    But as seen in the screenshot attached the Sum is 0.

     

  8. Rosen
    Admin
    Rosen avatar
    3239 posts

    Posted 09 Dec 2016 Link to this post

    Hi Iwan,

    I'm afraid that it is not obvious what the cause for the issue you are describing is. Could you please open a separate support request, as this thread is a bit ascent, in which to provide a small runnable sample which to demonstrate the issue in question. This will allow us to get better understanding about your scenario and provide you with more to the point answer.


    Regards,
    Rosen
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Back to Top