Grid group footer names

8 posts, 0 answers
  1. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 13 Feb 2015 Link to this post

    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:" }
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 17 Feb 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 17 Feb 2015 in reply to Vladimir Iliev Link to this post

    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 + "):")
        }
    });
  5. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 17 Feb 2015 in reply to JohnVS Link to this post

    I should also mention that this functionality is performed in the "change" event of the Kendo DataSource for my Aggregate Grid.
  6. Bajivali
    Bajivali avatar
    10 posts
    Member since:
    Oct 2015

    Posted 22 Aug in reply to Vladimir Iliev Link to this post

    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

     

  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 24 Aug Link to this post

    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.
     
  8. Bajivali
    Bajivali avatar
    10 posts
    Member since:
    Oct 2015

    Posted 29 Aug in reply to Vladimir Iliev Link to this post

    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
  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 30 Aug Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready