Grid View Grouping element guide, UI Control for ASP.NET AJAX, C#, VB.NET, by group panel, splitter column and footers

GridView Grouping element in ASP.NET AJAX

Home > How to > Grid Group Element

Grid GroupPanel

KAX.Grid allows users grouping records by Specific column or columns. For example, in a sale table, maybe you want to browse all message in one day. In such case, you can group the grid by the Date column.

If using grouping in one grid, users need set ShowGroupPanel property to True. In this panel, users can drag the column name to this panel, then all the table value will display grouped in this value.

show group panel in grid in asp.net ajax

show group panel in grid in asp.net ajax

You can set the GroupPanelPosition property to change the location of the panel. It can be Top, BeforeHeader and Bottom.
After grouping one field, sometimes, you may want to ungroup it. And there are two way to do this.
One is through dragging the field in the group panel back to the grid column.

drag the group field column in grid in asp.net ajax

drag the group field column in grid in asp.net ajax

The other is clicking the ungroup button in the field. In this way, you need set ShowUnGroupButton property to True.

show ungroup button in grid in asp.net ajax uging C#

You can do group grid data in this free online demo page.

Grid Group Splitter Column

When a web grid view is grouped, there will be a additional column with buttons appear at the font of rows. In the grid group splitter column, you can click the button to expand or collapse the same field rows. And before view the grid, you can set the all rows with same field display as expand or collapse by the property EnableGroupsExpandAll.

set grid group splitter column feature in asp.net ajax using c#

Grid Group Footers

Web Grid view control provide group footers to show the aggregate value for each group field. To display the group footers, just set GroupingSettings.RetainGroupFooterVisibility property to true.
The Aggregate value contains "Sum", "Min", "Max", "Last", "First", "Count", and "None". Please see this guid for more details of group expressions.
Following code shows how to set group footers.
ASPX code:


<Columns>
        <kettic:GridBoundColumn Aggregate="Count" DataField="ProductID" HeaderText="Product ID"
            FooterText="Total products: ">
        </kettic:GridBoundColumn>
        <kettic:GridBoundColumn DataField="CategoryName" HeaderText="Category name" SortExpression="CategoryName"
            UniqueName="CategoryName">
        </kettic:GridBoundColumn>
        <kettic:GridBoundColumn DataField="ProductName" HeaderText="Product name" SortExpression="ProductName"
            UniqueName="ProductName">
        </kettic:GridBoundColumn>
        <kettic:GridBoundColumn Aggregate="Sum" DataField="UnitPrice" HeaderText="Unit price"
            FooterText="Total price: ">
        </kettic:GridBoundColumn>
        <kettic:GridBoundColumn Aggregate="Sum" DataField="UnitsInStock" HeaderText="Units in stock"
            FooterText="All units in stock: ">
        </kettic:GridBoundColumn>
        <kettic:GridCalculatedColumn HeaderText="Total Price" UniqueName="TotalPrice" DataType="System.Double"
            DataFields="UnitPrice, UnitsInStock" Expression="{0}*{1}" FooterText="Total : "
            Aggregate="Sum" />
    </Columns>