Grid group footer names

[JohnVS]

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:" }

[Vladimir Iliev]

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:

• Grid: detect group level in footer templates

Regards,
Vladimir Iliev
Telerik

 

 

[JohnVS]

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 + "):")
    }
});

[JohnVS]

I should also mention that this functionality is performed in the "change" event of the Kendo DataSource for my Aggregate Grid.

[Bajivali]

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

 

[Vladimir Iliev]

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

 

 

[Bajivali]

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

[Vladimir Iliev]

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:

• columns.groupFooterTemplate

Regards,
Vladimir Iliev
Telerik by Progress

 

 

[Michael]

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.

[Stefan]

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

[John]

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?

[Stefan]

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

[jamsheer]

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.

[Eyup]

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