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
New England Seafood CanneryOrder Processing Dept. 2100 Paul Revere Blvd.Boston8SeafoodJack's New England Clam Chowder12 - 12 oz cans3.677/24/1996 12:00:00 AMÃ…kergatan 249.65
New England Seafood CanneryOrder Processing Dept. 2100 Paul Revere Blvd.Boston8SeafoodJack's New England Clam Chowder12 - 12 oz cans65.837/8/1996 12:00:00 AMRua do Paço, 679.65
New England Seafood CanneryOrder Processing Dept. 2100 Paul Revere Blvd.Boston8SeafoodJack's New England Clam Chowder12 - 12 oz cans55.097/19/1996 12:00:00 AMMehrheimerstr. 3699.65
Leka Trading471 Serangoon Loop, Suite #402Singapore5Grains/CerealsSingaporean Hokkien Fried Mee32 - 1 kg pkgs.32.387/4/1996 12:00:00 AM59 rue de l'Abbaye14.00
Leka Trading471 Serangoon Loop, Suite #402Singapore5Grains/CerealsSingaporean Hokkien Fried Mee32 - 1 kg pkgs.24.699/20/1996 12:00:00 AM67, rue des Cinquante Otages14.00
Leka Trading471 Serangoon Loop, Suite #402Singapore5Grains/CerealsSingaporean Hokkien Fried Mee32 - 1 kg pkgs.47.309/19/1996 12:00:00 AM8 Johnstown Road14.00
Leka Trading471 Serangoon Loop, Suite #402Singapore1BeveragesIpoh Coffee16 - 500 g tins6.279/10/1996 12:00:00 AMBoulevard Tirou, 25546.00
Leka Trading471 Serangoon Loop, Suite #402Singapore1BeveragesIpoh Coffee16 - 500 g tins147.268/30/1996 12:00:00 AM2817 Milton Dr.46.00
Leka Trading471 Serangoon Loop, Suite #402Singapore1BeveragesIpoh Coffee16 - 500 g tins136.548/1/1996 12:00:00 AMTorikatu 3846.00
Leka Trading471 Serangoon Loop, Suite #402Singapore2CondimentsGula Malacca20 - 2 kg bags6.408/27/1996 12:00:00 AMRua da Panificadora, 1219.45
Leka Trading471 Serangoon Loop, Suite #402Singapore2CondimentsGula Malacca20 - 2 kg bags76.568/19/1996 12:00:00 AMMagazinweg 719.45
Leka Trading471 Serangoon Loop, Suite #402Singapore2CondimentsGula Malacca20 - 2 kg bags92.698/12/1996 12:00:00 AMBerguvsvägen 819.45
LyngbysildLyngbysild Fiskebakken 10Lyngby8SeafoodRogede sild1k pkg.34.8612/19/1996 12:00:00 AM90 Wadhurst Rd.9.50
LyngbysildLyngbysild Fiskebakken 10Lyngby8SeafoodRogede sild1k pkg.69.324/10/1997 12:00:00 AMCalle Dr. Jorge Cash 3219.50
LyngbysildLyngbysild Fiskebakken 10Lyngby8SeafoodRogede sild1k pkg.145.043/5/1997 12:00:00 AMSmagsloget 459.50
LyngbysildLyngbysild Fiskebakken 10Lyngby8SeafoodSpegesild4 - 450 g glasses126.3812/23/1996 12:00:00 AMKirchgasse 612.00
LyngbysildLyngbysild Fiskebakken 10Lyngby8SeafoodSpegesild4 - 450 g glasses214.2710/8/1996 12:00:00 AM187 Suffolk Ln.12.00
LyngbysildLyngbysild Fiskebakken 10Lyngby8SeafoodSpegesild4 - 450 g glasses12.768/22/1996 12:00:00 AMAv. Copacabana, 26712.00
Zaanse SnoepfabriekVerkoop Rijnweg 22Zaandam3ConfectionsZaanse koeken10 - 4 oz boxes52.8410/17/1996 12:00:00 AM43 rue St. Laurent9.50
Zaanse SnoepfabriekVerkoop Rijnweg 22Zaandam3ConfectionsZaanse koeken10 - 4 oz boxes17.551/17/1997 12:00:00 AMTaucherstraße 109.50
Zaanse SnoepfabriekVerkoop Rijnweg 22Zaandam3ConfectionsZaanse koeken10 - 4 oz boxes44.171/30/1997 12:00:00 AM23 Tsawassen Blvd.9.50
Zaanse SnoepfabriekVerkoop Rijnweg 22Zaandam3ConfectionsChocolade10 pkgs.73.791/3/1997 12:00:00 AMKirchgasse 612.75
Zaanse SnoepfabriekVerkoop Rijnweg 22Zaandam3ConfectionsChocolade10 pkgs.25.362/21/1997 12:00:00 AMBrook Farm Stratford St. Mary12.75
Zaanse SnoepfabriekVerkoop Rijnweg 22Zaandam3ConfectionsChocolade10 pkgs.47.454/15/1997 12:00:00 AMMataderos 231212.75
Karkki OyValtakatu 12Lappeenranta3ConfectionsMaxilaku24 - 50 g pkgs.79.708/27/1996 12:00:00 AMAv. dos Lusíadas, 2320.00
Karkki OyValtakatu 12Lappeenranta3ConfectionsMaxilaku24 - 50 g pkgs.63.799/12/1996 12:00:00 AMAvda. Azteca 12320.00
Karkki OyValtakatu 12Lappeenranta3ConfectionsMaxilaku24 - 50 g pkgs.58.177/10/1996 12:00:00 AMRua do Paço, 6720.00
Karkki OyValtakatu 12Lappeenranta3ConfectionsValkoinen suklaa12 - 100 g bars34.2412/16/1996 12:00:00 AMBrook Farm Stratford St. Mary16.25
Karkki OyValtakatu 12Lappeenranta3ConfectionsValkoinen suklaa12 - 100 g bars56.631/29/1997 12:00:00 AM8 Johnstown Road16.25
Karkki OyValtakatu 12Lappeenranta3ConfectionsValkoinen suklaa12 - 100 g bars64.1911/11/1996 12:00:00 AM1 rue Alsace-Lorraine16.25
Page size:
 231 items in 8 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.
  • DefaultCS.aspx
<%@ Page Language="c#"  %>

<%@ 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