Aggregates failing on hierarchical grids.

[Thomas]

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.

[Rosen]

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

[Thomas]

Brilliant. That worked perfectly, thanks!

[Benoit]

Exactly what i was looking for thanks a lot!

That saves me tons of times

[Daniel]

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

[Vineet]

Thanks. Very important thread indeed.

[Iwan van Ee]

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.

 

[Rosen]

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