New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Multi-Column Headers

Drag a column header and drop it here to group by that column
Supplier NameLocationProduct Details
AddressCityCategoryNameQuantityOrder DetailsPrice
IDNameFreightDateAddress
Cooperativa de Quesos 'Las Cabras'Calle del Rosal 4Oviedo4Dairy ProductsQueso Cabrales1 kg pkg.0.129/3/1996 12:00:00 AMCarrera 52 con Ave. Bolívar #65-98 Llano Largo21.00
Cooperativa de Quesos 'Las Cabras'Calle del Rosal 4Oviedo4Dairy ProductsQueso Cabrales1 kg pkg.63.3610/11/1996 12:00:00 AMÃ…kergatan 2421.00
Cooperativa de Quesos 'Las Cabras'Calle del Rosal 4Oviedo4Dairy ProductsQueso Cabrales1 kg pkg.360.6311/13/1996 12:00:00 AMGeislweg 1421.00
Cooperativa de Quesos 'Las Cabras'Calle del Rosal 4Oviedo4Dairy ProductsQueso Manchego La Pastora10 - 500 g pkgs.4.072/7/1997 12:00:00 AM43 rue St. Laurent38.00
Cooperativa de Quesos 'Las Cabras'Calle del Rosal 4Oviedo4Dairy ProductsQueso Manchego La Pastora10 - 500 g pkgs.58.885/14/1997 12:00:00 AMMagazinweg 738.00
Cooperativa de Quesos 'Las Cabras'Calle del Rosal 4Oviedo4Dairy ProductsQueso Manchego La Pastora10 - 500 g pkgs.48.175/21/1997 12:00:00 AMCarrera 52 con Ave. Bolívar #65-98 Llano Largo38.00
Mayumi's92 Setsuko Chuo-kuOsaka8SeafoodKonbu2 kg box34.2412/16/1996 12:00:00 AMBrook Farm Stratford St. Mary6.00
Mayumi's92 Setsuko Chuo-kuOsaka8SeafoodKonbu2 kg box5.4512/23/1996 12:00:00 AMWalserweg 216.00
Mayumi's92 Setsuko Chuo-kuOsaka8SeafoodKonbu2 kg box64.8610/9/1996 12:00:00 AMMaubelstr. 906.00
Mayumi's92 Setsuko Chuo-kuOsaka7ProduceTofu40 - 100 g pkgs.64.8610/9/1996 12:00:00 AMMaubelstr. 9023.25
Mayumi's92 Setsuko Chuo-kuOsaka7ProduceTofu40 - 100 g pkgs.0.5910/18/1996 12:00:00 AMTorikatu 3823.25
Mayumi's92 Setsuko Chuo-kuOsaka7ProduceTofu40 - 100 g pkgs.20.1212/6/1996 12:00:00 AMCity Center Plaza 516 Main St.23.25
Mayumi's92 Setsuko Chuo-kuOsaka2CondimentsGenen Shouyu24 - 250 ml bottles42.684/9/1997 12:00:00 AM1 rue Alsace-Lorraine15.50
Mayumi's92 Setsuko Chuo-kuOsaka2CondimentsGenen Shouyu24 - 250 ml bottles4.8810/7/1996 12:00:00 AMMaubelstr. 9015.50
Mayumi's92 Setsuko Chuo-kuOsaka2CondimentsGenen Shouyu24 - 250 ml bottles84.818/16/1996 12:00:00 AMCarrera 52 con Ave. Bolívar #65-98 Llano Largo15.50
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne3ConfectionsPavlova32 - 500 g boxes12.768/22/1996 12:00:00 AMAv. Copacabana, 26717.45
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne3ConfectionsPavlova32 - 500 g boxes0.129/3/1996 12:00:00 AMCarrera 52 con Ave. Bolívar #65-98 Llano Largo17.45
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne3ConfectionsPavlova32 - 500 g boxes17.529/20/1996 12:00:00 AM89 Jefferson Way Suite 217.45
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne6Meat/PoultryAlice Mutton20 - 1 kg tins6.279/10/1996 12:00:00 AMBoulevard Tirou, 25539.00
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne6Meat/PoultryAlice Mutton20 - 1 kg tins25.838/13/1996 12:00:00 AMMagazinweg 739.00
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne6Meat/PoultryAlice Mutton20 - 1 kg tins147.268/30/1996 12:00:00 AM2817 Milton Dr.39.00
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne8SeafoodCarnarvon Tigers16 kg pkg.21.188/29/1996 12:00:00 AMAvda. Azteca 12362.50
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne8SeafoodCarnarvon Tigers16 kg pkg.257.629/13/1996 12:00:00 AM2743 Bering St.62.50
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne8SeafoodCarnarvon Tigers16 kg pkg.52.8410/17/1996 12:00:00 AM43 rue St. Laurent62.50
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsTeatime Chocolate Biscuits10 boxes x 12 pieces191.6710/15/1996 12:00:00 AMP.O. Box 5559.20
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsTeatime Chocolate Biscuits10 boxes x 12 pieces29.769/6/1996 12:00:00 AMAv. Copacabana, 2679.20
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsTeatime Chocolate Biscuits10 boxes x 12 pieces84.818/16/1996 12:00:00 AMCarrera 52 con Ave. Bolívar #65-98 Llano Largo9.20
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsSir Rodney's Marmalade30 gift boxes1.358/28/1996 12:00:00 AMAv. Inês de Castro, 41481.00
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsSir Rodney's Marmalade30 gift boxes168.6412/16/1996 12:00:00 AMBerguvsvägen 881.00
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsSir Rodney's Marmalade30 gift boxes890.7812/4/1996 12:00:00 AMAlameda dos Canàrios, 89181.00
Page size:
 201 items in 7 pages
  • Sort Ascending
  • Sort Descending
  • Clear Sorting
  • Group By
  • Ungroup
  • Columns

This demo illustrates how the RadGrid can be configured to show MultiColumn headers.

  • Use ColumnGroups to define each level of multiheaders
  • Use ColumnGroupName property of GridColumn to assign a column to a specific multiheader.
  • Use HeaderContextMenu to show and hide columns and see how this works with the MultiColumn headers.
  • Column reordering and drag to group is supported only for headers representing actual grid columns. Column reordering is restricted to columns from the same group.
  • DefaultVB.aspx
<%@ Page Language="vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <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>
    <div class="demo-container no-bg">
    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" ShowGroupPanel="true" AllowSorting="true"
        DataSourceID="SqlDataSource1" AllowPaging="true" PageSize="30" AutoGenerateColumns="false" Width="100%">
        <ClientSettings AllowColumnsReorder="true" AllowDragToGroup="true" ReorderColumnsOnClient="true">
            <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
            <Resizing AllowColumnResize="true" EnableRealTimeResize="true" />
        </ClientSettings>
        <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>
        <MasterTableView EnableHeaderContextMenu="true">
            <ColumnGroups>
                <telerik:GridColumnGroup HeaderText="Product Details" Name="ProductDetails" HeaderStyle-HorizontalAlign="Center">
                </telerik:GridColumnGroup>
                <telerik:GridColumnGroup HeaderText="Location" Name="Location">
                </telerik:GridColumnGroup>
                <telerik:GridColumnGroup HeaderText="Category" Name="Category" ParentGroupName="ProductDetails">
                </telerik:GridColumnGroup>
                <telerik:GridColumnGroup HeaderText="Order Details" Name="OrderDetails" ParentGroupName="ProductDetails"
                    HeaderStyle-HorizontalAlign="Center">
                </telerik:GridColumnGroup>
            </ColumnGroups>
            <Columns>
                <telerik:GridBoundColumn UniqueName="SupplierName" DataField="SupplierName" HeaderText="Supplier Name">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="Address" DataField="Address" ColumnGroupName="Location"
                    HeaderText="Address">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="City" DataField="City" ColumnGroupName="Location"
                    HeaderText="City">
                </telerik:GridBoundColumn>
                <telerik:GridNumericColumn UniqueName="ID" DataField="ID" ColumnGroupName="Category"
                    HeaderText="ID">
                </telerik:GridNumericColumn>
                <telerik:GridBoundColumn UniqueName="CategoryName" DataField="CategoryName" ColumnGroupName="Category"
                    HeaderText="Name">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="ProductName" DataField="ProductName" ColumnGroupName="ProductDetails"
                    HeaderText="Name">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn UniqueName="Quantity" DataField="Quantity" ColumnGroupName="ProductDetails"
                    HeaderText="Quantity">
                </telerik:GridBoundColumn>
                <telerik:GridNumericColumn UniqueName="Freight" DataField="Freight" ColumnGroupName="OrderDetails"
                    HeaderText="Freight">
                </telerik:GridNumericColumn>
                <telerik:GridDateTimeColumn UniqueName="OrderDate" DataField="OrderDate" ColumnGroupName="OrderDetails"
                    HeaderText="Date">
                </telerik:GridDateTimeColumn>
                <telerik:GridBoundColumn UniqueName="OrderAddress" DataField="OrderAddress" ColumnGroupName="OrderDetails"
                    HeaderText="Address">
                </telerik:GridBoundColumn>
                <telerik:GridNumericColumn UniqueName="Price" DataField="Price" ColumnGroupName="ProductDetails"
                    HeaderText="Price">
                </telerik:GridNumericColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
        </div>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT pdc.ProductID as ProductID, s.CompanyName as SupplierName, pdc.CategoryID as ID, pdc.CategoryName as CategoryName,
                pdc.ProductName as ProductName, pdc.QuantityPerUnit as Quantity, o.Freight as Freight, o.OrderDate as OrderDate,
                o.ShipAddress as OrderAddress, pdc.UnitPrice as Price, s.City as City, s.Address as Address 
        FROM Suppliers s 
        INNER JOIN (SELECT p.ProductID as ProductID, p.SupplierID as SupplierID, p.ProductName as ProductName,
                           p.QuantityPerUnit as QuantityPerUnit, p.UnitPrice  as UnitPrice, od.OrderID as OrderID, c.CategoryID as CategoryID, c.CategoryName as CategoryName
                    FROM Products p 
                    INNER JOIN [Order Details] od ON p.ProductID = od.ProductID INNER JOIN Categories c on c.CategoryID=p.CategoryID
                    WHERE od.OrderID in 
                        (SELECT TOP(3) od1.OrderID 
                         FROM [Order Details] od1 
                         WHERE od1.ProductID=od.ProductID)
                   ) pdc on pdc.SupplierID=s.SupplierID
        INNER JOIN Orders o on o.OrderID=pdc.OrderID 
        ORDER BY pdc.ProductID"
        runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance