Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Group Footers

Example Configuration

Unit price  
 Product IDProduct nameUnit priceUnits in stockTotal Price
 
 Total products: 67 Total price: 2150.31All units in stock: 2652Total : 70977.15
Data pager
Data pager
Page size:
PageSizeComboBox
select
 67 items in 7 pages

Unit price: 9.65

 41Jack's New England Clam Chowder9.65 85 820.25
 Total products: 1 Total price: 9.65All units in stock: 85Total : 820.25

Unit price: 10.00

 3Aniseed Syrup10.00 13 130
 21Sir Rodney's Scones10.00 3 30
 74Longlife Tofu10.00 4 40
 Total products: 3 Total price: 30.00All units in stock: 20Total : 200

Unit price: 12.00

 46Spegesild12.00 95 1140
 Total products: 1 Total price: 12.00All units in stock: 95Total : 1140

Unit price: 12.50

 31Gorgonzola Telino12.50 0 0
 68Scottish Longbreads12.50 6 75
 Total products: 2 Total price: 25.00All units in stock: 6Total : 75

Unit price: 12.75

 48Chocolade12.75 15 191.25
 Total products: 1 Total price: 12.75All units in stock: 15Total : 191.25

Unit price: 13.00

 77Original Frankfurter grüne Soße13.00 32 416
 Total products: 1 Total price: 13.00All units in stock: 32Total : 416

Unit price: 13.25

 58Escargots de Bourgogne13.25 62 821.5
 Total products: 1 Total price: 13.25All units in stock: 62Total : 821.5

In addition to displaying summaries/results from aggregates in the group header, RadGrid exposes group footers feature which provides the option to render footer under each group in the grid. The type of this footer item is GridGroupFooterItem. To enable this functionality merely set the ShowGroupFooter property of the respective GridTableView instance to true (its default value is false).

RadGrid also gives you the opportunity to retain the visibility of the group footers when their corresponding group header row is collapsed. In order to switch on this feature, just set the GroupingSettings.RetainGroupFooterVisibilityproperty to true.

The group footers are most commonly used to visualize calculations from aggregate functions within the scope of the current group. Furthermore, with nested groups you will have group footer for each inner group along with one for the main group. Aggregate calculations are supported for GridBoundColumns, GridCalculatedColumns and GridTemplateColumns.

In order to specify how the group aggregates will be evaluated, specify in every GridBoundColumn/GridCalculatedColumn/GridTemplateColumn the Aggregate property which accepts values from the GridAggregateFunction enumeration.

RadGrid will calculate aggregates over the entire data source and will respect the filter expression applied (if present).

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Functionality.Grouping.GroupFooters.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>Grouping Footers in Telerik ASP.NET AJAX Grid | Telerik ASP.NET AJAX Grid Demos</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Expanded="true">
        <label for="RadioButtonList1">Switch group load mode:</label>
        <asp:RadioButtonList AutoPostBack="true" ID="RadioButtonList1" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
            runat="server">
            <asp:ListItem Text="Server" Selected="True">
            </asp:ListItem>
            <asp:ListItem Text="Client">                
            </asp:ListItem>
        </asp:RadioButtonList>
        <asp:CheckBox ID="chkKeepGroupFootersVisible" AutoPostBack="true" Text="Retain group footers' visibility"
            OnCheckedChanged="chkKeepGroupFootersVisible_CheckedChanged" runat="server">
        </asp:CheckBox>
    </qsf:ConfiguratorPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdateInitiatorPanelsOnly="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadioButtonList1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="chkKeepGroupFootersVisible">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="chkKeepGroupFootersVisible"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid ShowGroupPanel="true" AutoGenerateColumns="false" ID="RadGrid1"
        DataSourceID="SqlDataSource1" AllowFilteringByColumn="True" AllowSorting="True"
        ShowFooter="True" runat="server" GridLines="None" AllowPaging="true" EnableLinqExpressions="false">
        <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        <MasterTableView ShowGroupFooter="true" AllowMultiColumnSorting="true">
            <Columns>
                <telerik:GridBoundColumn Aggregate="Count" DataField="ProductID" HeaderText="Product ID"
                    FooterText="Total products: ">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ProductName" HeaderText="Product name" SortExpression="ProductName"
                    UniqueName="ProductName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn Aggregate="Sum" DataField="UnitPrice" HeaderText="Unit price"
                    FooterText="Total price: ">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn DataField="UnitsInStock" HeaderText="Units in stock"
                    FooterText="All units in stock: " UniqueName="UnitsInStock" Aggregate="Sum"
                    GroupByExpression="UnitsInStock Group By UnitsInStock">
                    <ItemTemplate>
                        <asp:Label ID="lblUnitsInStock" runat="server" Text='<%#Eval("UnitsInStock") %>'>
                        </asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadNumericTextBox ID="txtUnitsInStock" runat="server" text='<%#Bind("UnitsInStock") %>'>
                        </telerik:RadNumericTextBox>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridCalculatedColumn HeaderText="Total Price" UniqueName="TotalPrice" DataType="System.Double"
                    DataFields="UnitPrice, UnitsInStock" Expression="{0}*{1}" FooterText="Total : "
                    Aggregate="Sum">
                </telerik:GridCalculatedColumn>
            </Columns>
            <GroupByExpressions>
                <telerik:GridGroupByExpression>
                    <GroupByFields>
                        <telerik:GridGroupByField FieldName="UnitPrice"></telerik:GridGroupByField>
                    </GroupByFields>
                    <SelectFields>
                        <telerik:GridGroupByField FieldName="UnitPrice" HeaderText="Unit price"></telerik:GridGroupByField>
                    </SelectFields>
                </telerik:GridGroupByExpression>
            </GroupByExpressions>
        </MasterTableView>
        <ClientSettings AllowDragToGroup="true">
        </ClientSettings>
        <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT * FROM Products Where UnitPrice > 9.50" runat="server">
    </asp:SqlDataSource>
    </form>
</body>
</html>