This is a migrated thread and some comments may be shown as answers.
Grid group footer names
13 Answers 183 Views
This is a migrated thread and some comments may be shown as answers.
JohnVS
Top achievements
Rank 1
JohnVS asked on 13 Feb 2015, 03:04 PM
We have an Aggregrate Grid that is grouping on two fields. The Grid handles this great, but a display problem is causing some user confusion.

See the attached screenshot. We are grouping on "Year" and "Make". We wanted to show "Total:" on the group footer row so users know what the row is for. So in the "Vehicle" column, we set the groupFooterTemplate to "Total:". You can see it appearing in the screenshot just fine.

So now for the Make groups and the Year groups, there appears a "Total:" in the aggregate footer row. But as you can see in the screenshot, the last Make group footer row (circled in red) sits right on top of the Year group footer row (circled in blue), and they both show "Total:" on that row, but it looks confusing. Is there any possible way to display "Make Total:" and "Year Total:" on those rows? Or even better would be "Mazda Total:" and "2015 Total:". In other words, instead of just specifying this column:

{ field: "Vehicle", title: "Vehicle", footerTemplate: "Grand Totals:", groupFooterTemplate: "Total:" }

Is there a way to use the group name in the groupFooterTemplate?

{ field: "Vehicle", title: "Vehicle", footerTemplate: "Grand Totals:", groupFooterTemplate: this.groupName + " Total:" }

13 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 17 Feb 2015, 12:32 PM
Hi John,

Basically the desired behavior is not supported and custom solution would be needed. For example you can use the "dataBinding" event of the Grid to iterate over the top-level groups and add custom field to the aggregates. Later in the footer templates you can apply custom styling to the aggregate based on if this custom field is available. Please check the example below:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
JohnVS
Top achievements
Rank 1
answered on 17 Feb 2015, 04:08 PM
I found a way to "hack" this behavior with jQuery, in case anyone else is interested.

var t = $("#grid .k-grouping-row"); //get all grouping rows
$.each(t, function (key, elem) {
    if ($(elem).find("td p.k-reset").text().indexOf("Year:") !== -1) { //the group label uses field name and value (e.g. Year: 2015)
        $(elem).addClass("year-grouping-row"); //add a class to the grouping row, so we can find it later
    }
});
 
t = $("#grid .k-group-footer"); //get all group footer rows
$.each(t, function (key, elem) {
    //year total
    if ($(elem).prev().attr("class") == "k-group-footer") { //year group footer rows are always preceded by a make group footer row
        var prevLabel = $(elem).prevAll(".year-grouping-row:first").find("td p.k-reset").text().replace("Year: ", ""); //traverse backwards to find closest grouping row with class year-grouping-row that we set earlier and get group value (e.g. 2015)
        $(elem).find("td:contains('Total:')").text("Total (" + prevLabel + "):"); //update total text to show group value
    }
    //make total
    else { //make group footer rows are never preceded by a group footer row
        var prevLabel = $(elem).prevAll(".k-grouping-row:first").find("td p.k-reset").text().replace("Make: ", ""); //traverse backwards to find closest grouping row and get group value
        $(elem).find("td:contains('Total:')").text("Total (" + prevLabel + "):")
    }
});
0
JohnVS
Top achievements
Rank 1
answered on 17 Feb 2015, 04:09 PM
I should also mention that this functionality is performed in the "change" event of the Kendo DataSource for my Aggregate Grid.
0
Bajivali
Top achievements
Rank 1
answered on 22 Aug 2016, 04:35 PM

can it be possible to name each group footer template name with customized different name.?

example :

footerTemplate: "Grand Totals:",

footerTemplate: "xyzTotals:",  -- name of other group template

 

0
Vladimir Iliev
Telerik team
answered on 24 Aug 2016, 06:34 AM
Hi John,

The desired behavior is not supported out of the box - that why you should include all templates inside the single template that is set to the column and load different parts of it based on your custom logic. 

Regards,
Vladimir Iliev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Bajivali
Top achievements
Rank 1
answered on 29 Aug 2016, 02:01 PM
can it be possible to name each group footer template name with customized different name.?
example :
footerTemplate: "Grand Totals:",
footerTemplate: "xyzTotals:",  -- name of other group template
0
Vladimir Iliev
Telerik team
answered on 30 Aug 2016, 07:24 AM
Hi Bajivali,

 I already answered you question in my previous reply. For more information about the data available in the group footer template you can check the Grid API:

Regards,
Vladimir Iliev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Michael
Top achievements
Rank 1
answered on 24 Sep 2017, 02:28 PM
Can you possible give an example of how to do this in UI for ASP.NET MVC?  When I've tried to adapt this example, your libraries blow up.  See attached please.
0
Stefan
Telerik team
answered on 26 Sep 2017, 12:34 PM
Hello, Michael,

Could you please advise which part has to be translated to MVC code. If it is the groupFooterTemplate we have a demo example showing how the different group templates can be used in the MVC Grid:

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

Let me know if you need more specific information for the templates and I will gladly assist.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
John
Top achievements
Rank 1
answered on 25 Jan 2018, 03:49 PM
I have the same requirement to do this in MVC Razor.  Is there a custom solution example to provide totals for a grid with multiple groups?
0
Stefan
Telerik team
answered on 29 Jan 2018, 07:11 AM
Hello, John,

The linked demo from the last reply is for the Kendo UI MVC Wrappers and it is using the Razor syntax:

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

As for the custom example, the currently provided demo is available inside the Sample application, and it can be modified to work with multiple groups by either making the Grid Groupable or by adding more groups to its initial configuration:

Making the Grid groupable:

Groupable

Adding more groups:

https://docs.telerik.com/aspnet-mvc/helpers/grid/configuration#group

If additional assistance is needed, please provide more details about the scenario.

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.
0
jamsheer
Top achievements
Rank 1
answered on 05 Oct 2020, 05:36 AM

Hi,

    "This is a easy with the MVC grid since it offers built-in support for the most popular aggregate functions: Average, Count, Sum, Min, Max and Count. All you need to do is define the aggregates via the Columns-> ClientGroupHeaderColumnTemplate, ClientFooterTemplate and ClientGroupFooterTemplate templates, and the Group and Aggregate fields of its DataSource instance."

    I have worked this functionality very successfully, but now I need the last row of grouped section of grid suggest to aggregates rows, Like that windows form Radgrid. 

I metionede an image below.

0
Eyup
Telerik team
answered on 07 Oct 2020, 04:42 AM

Hi Jamsheer,

 

You can achieve that by placing a div with a specific class in the footer template and calculate the difference manually during the dataBound event handler. A full sample you can find here:
https://docs.telerik.com/kendo-ui/knowledge-base/grid-custom-aggregate-by-unique-value

I hope this will prove helpful.

 

Regards,
Eyup
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Grid
Asked by
JohnVS
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
JohnVS
Top achievements
Rank 1
Bajivali
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Stefan
Telerik team
John
Top achievements
Rank 1
jamsheer
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or