Aggregates failing on hierarchical grids.

6 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
    3234 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. UI for ASP.NET MVC is VS 2017 Ready
  4. Thomas
    Thomas avatar
    2 posts
    Member since:
    Feb 2013

    Posted 07 Mar 2013 Link to this post

    Brilliant. That worked perfectly, thanks!
  5. 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
  6. 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
  7. Vineet
    Vineet avatar
    2 posts
    Member since:
    Jun 2015

    Posted 13 Dec 2015 Link to this post

    Thanks. Very important thread indeed.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready