ClientGroupFooterTemplate - Get Aggregate Field Value

[AP]

I have a grid which displays a summary of data along with totals and subtotals.

Each cell value has a link that enables a user to 'drill-down' to the individual records , by making a JavaScript call via a ClientTemplate.

I want to add this drill-down functionality to the sub-total rows, but I need to pass the value of the aggregating field (in my case the patient class field). However, I'm not able to reference this field in the ClientGroupFooterTemplate.

The ClientTemplate:-

 

ClientTemplate("<a href='javascript:showData(\"#= PATCLASS #\",\"#= CONSPEF #\",\"p4p\")'> #= _4p #</a>")

 

The ClientGroopFooterTemplate:-

ClientGroupFooterTemplate("<a href='javascript:showData(\"-X-\",\"-X-\",\"-X-\")'>#= sum  #</a>")

This works passing a string ("-X-" - which shows all values), but I need to pass the patient class value relating to the sub-total.  How can I do this?

Thanks

[AP]

I've logged a support ticket about this.

[AP]

In case this helps anyone else, I got the solution after raising a support ticket.

You need to use the DataBinding event, and use a function to set the value:-

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName)
            .ClientFooterTemplate("Total Count: #=count#")
            .ClientGroupFooterTemplate("Value: #:groupField#");
        columns.Bound(p => p.UnitPrice).Format("{0:C}");
        columns.Bound(p => p.UnitsOnOrder)
            .ClientFooterTemplate("Average: #=average#")
            .ClientGroupFooterTemplate("Average: #=average#");
        columns.Bound(p => p.UnitsInStock)
            .ClientGroupHeaderTemplate("Units In Stock: #= value # (Count: #= count#)")
            .ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");
    })
    .Events(ev => ev.DataBinding("dataBinding"))
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Aggregates(aggregates =>
        {
            aggregates.Add(p => p.UnitsInStock).Min().Max().Count();
            aggregates.Add(p => p.UnitsOnOrder).Average();
            aggregates.Add(p => p.ProductName).Count();
            aggregates.Add(p => p.UnitPrice).Sum();
        })
        .Group(groups => groups.Add(p => p.UnitsInStock))
        .Read(read => read.Action("Aggregates_Read", "Grid"))
    )
)

<script>
    function dataBinding(e) {
        assignGroupName(this.dataSource.view());
    }

    function assignGroupName(view) {
        var item;
        for (var i = 0; i < view.length; i++) {
            item = view[i];
            for (var field in item.aggregates) {

                item.aggregates[field].groupField = item.value;
            }

        }
    }
</script>

[Lee]

Thanks so much for posting this!!!  I was trying to create a custom Aggregate for my ClientGroupFooterTemplate so I had created a function but couldn't figure out how to get the value that was being grouped to pass to my function.  This got me past that hurdle.

[David]

This is incredibly helpful. However, after implementing this solution and i try to export the data to excel, i get the following error:

Uncaught ReferenceError: groupField is not defined
    at Object.eval [as groupFooterTemplate] ....

[Jared]

Here is an easier way to access the grid's aggregates:

var grid = $('#shakeoutGrid').data('kendoGrid');
var aggregates = grid.dataSource.aggregates();

[Bill]

I found this solution to be very helpful, however it only works for me if you are using a single column to group by.

My problem is that I have a grid that allows the user to select multiple columns to group by.  There is a lot of data behind this grid, and it doesn't fit on any single page, so without using the example above, the users would only see (at the end of a 4 column grouping) 4 lines of:  Total W: 100 / Total X:1000 / Total Y:10,000 / Total Z: 100,000.   It's nice to be about to know what the totals are for.  I think its odd that the Kendo grid can't display this, even thought it is available in the header of the group.

The attached images show: 1) what you see without using the code.. .just line after line of 'Totals', with no description. 2) what you see using the code above with 1 grouping - looks great! and 3) what you see if you group on 2 items.

What appears to happen, is that even though you are grouping now on 2 items, there is really only 1 grouping column (should be 2), and all the contents of the grid get shifted to the left, leaving and empty column on the right.  I have an idea that there are basically 2  tiers now in the aggregate, and I am overwriting it with a single grouping, and the grid header is expecting (cols+2) columns, but is only getting (cols+1) of data.  Now in writing this post up I just did discover that using this code is putting the grid in some error state that leaves it unresponsive, which I plan on debugging next.

I've tried to stringify the aggregate object to see if there was a way that I could pull out the correct grouping name for the different groups, but nothing is standing out as useful information.

Does anyone have any sample code or information on the aggregates object that might point me in the direction to working with a more complex grouping that 1 column?

Thanks!

 

 

 

 

 

 

     

[Bill]

FYI.. the 2nd and 3rd images got switched... so the 2nd image actually shows what happens when grouping on 2 columns.  

Thanks.

[Alex Hajigeorgieva]

Hi, Bill,

Thank you for the provided screenshots.

It is possible to access the group field nowadays without using any event handlers as the group data is readily available in the group footer template:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.groupfootertemplate

I created a similar example to your scenario as I understand it and you can group by four fields and see the group footer template get updated correctly:

{
 field: "ProductName",
 aggregates: ["count"],
 groupFooterTemplate: "Count for #=data.ProductName.group.field #: #=count#"
}

http://dojo.telerik.com/@bubblemaster/EXuYu

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Bill]

Thank you so much!  This is exactly what I needed!

[Bill]

I did notice one pressing issue with this solution.  When I add "#=data.ProductName.group.field #" to the ClientGroupFooterTemplate, The Excel Export stops working (if Groupings are selected).

So if I use: .ClientGroupFooterTemplate( "Totals for #=data.ProductName.group.field #: #=data.ProductName.group.value #") the screen looks great if groupings are selected (or not).   But Exporting will only work if there are no current Groupings selected. If there are groupings selected, nothing happens when you hit the 'Export to Excel' button. 

If I remove the #=data.ProductName.group.field # and #=data.ProductName.group.value # from the ClientGroupFooterTemplate, the Export works now fine when Groupings are selected, but then I am back to my original issue of not being about to see the Grouping info in the footer.

So, adding #=data.ProductName.group.field # to the ClientGroupFooterTemplate breaks the built in Excel Export.  Interesting enough, I found some other examples of using IWorksheetExporter and SpreadDocumentFormat, but these seem to work and fail using the same scenarios.

 

 

 

 

 

[Bill]

I found this: https://www.telerik.com/forums/export-to-excel-not-working-with-clientgroupfootertemplate-and-data-variable

I wasn't running the latest build, so I will try upgrading tomorrow.

 

[Bill]

Flagging my post as a duplicate.  My issue may be fixed in a more current version:  https://www.telerik.com/forums/export-to-excel-not-working-with-clientgroupfootertemplate-and-data-variable

I wasn't running the latest build, so I will try upgrading tomorrow and see if the issue persists.

[Alex Hajigeorgieva]

Hello, Bill,

Thank you for bringing the Excel Export to my attention. Upgrading to the latest version is always recommended, however, in this particular case, the issue you are experiencing is due to the different format of the data object during the excel export. (The data in the excel export was enhanced in 2017 R3 SP1)

I will discuss this with the Principal Excel Export engineer whether we can amend the data object during excel export at the beginning of next year(after the holidays). Meanwhile, you can add a condition to the template, for example:

groupFooterTemplate: "Count for #=data.ProductName.group ? data.ProductName.group.field : data.group.field #: #=count#"

I have updated the Dojo:

http://dojo.telerik.com/@bubblemaster/EXuYu

Please accept my apology for any inconvenience caused.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Bill]

Thanks again, Alex!  This work around finally did the job.  As you mentioned, it is probably best to amend the data object so less users have issues in the future, but what you sent gets me over my hurdle.  

[Alex Hajigeorgieva]

Hi, Bill,

Thank you very much for your feedback, I am glad to hear you found the last suggestion helpful.

I will update this forum thread once I have more information.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Alex Hajigeorgieva]

Hi, Bill,

Happy New Year!

I have spoken with the Principal Excel Export Engineer and reopened an old issue which was addressing the same topic. It will be investigated shortly and you can monitor its progress at:

https://github.com/telerik/kendo-ui-core/issues/3024

Once the fix is applied, it will be tested and a new milestone will be set so you know when to expect the fix.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Vinod]

Hi, do we have MVC wrapper available for the same? I want to access group name in group footer template.

[Alex Hajigeorgieva]

Hello, Vinod,

The Kendo UI Grid for ASP.NET MVC also has that as part of the GridColumnBuilder. The group footer is available as ClientGroupFooterTemplate:

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridColumnBuilderBase#methods-ClientGroupFooterTemplate(System.String)

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Vinod]

Thanks for the documentation Alex. However, I still couldn't achieve the solution I am trying for. My requirement is to show group name in clientfootertemplate. I want to do something like this using Kendo UI MVC:

ClientFooterTemplate("Total for #=data.group.field #), but it is not working.

[Alex Hajigeorgieva]

Hi, Vinod,

The recommended property to use is the ClientGroupFooterTemplate.

If you want to access the field by which the grid is currently grouped by, you can do that with the following syntax:

// access the field by which the grid is currently grouped by in the template
columns.Bound(a => a.Created).ClientGroupFooterTemplate("#=data.Created.group.field #").HeaderTemplate("Created");
                   .
// add some aggregates for the field
Aggregates(aggregates =>
{
   aggregates.Add(p => p.Created).Average();
})

Let me know in case further questions arise.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Vinod]

Hi Alex, Thanks for the help. Finally, I am able to use the groups name in ClientGroupFooterTemplate. I was missing the aggregates function for the group name field.

Everything looks good but with this change (reported by the other users as well), Excel Export has stopped working.

This is the template I am using: ClientGroupFooterTemplate("#=data.Operation.group ? data.Operation.group.field: data.group.field # Totals:");

 

 

[Alex Hajigeorgieva]

Hi, Vinod,

In case you are getting a JavaScript error, then the Kendo UI version (dll and script files) in the project is not up to date. The fix is available in the 2018.3.911 version - you can see that from the milestone of the issue at:

https://github.com/telerik/kendo-ui-core/issues/3897

With the latest version, the syntax works well out of the box - anything available in the template will be available in the excel export cell as well, you can see that in the UnitsOnOrder group footer template:

https://dojo.telerik.com/@bubblemaster/IDaYOhOC

#=data.UnitsOnOrder.group.field #

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Vinod]

Yes, with recent Kendo update its working like a charm. Thank a lot for you help.