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
Formaggi Fortini s.r.l.Viale Dante, 75Ravenna4Dairy ProductsGorgonzola Telino12 - 100 g pkgs76.078/5/1996 12:00:00 AMTaucherstraße 1012.50
Formaggi Fortini s.r.l.Viale Dante, 75Ravenna4Dairy ProductsGorgonzola Telino12 - 100 g pkgs98.038/2/1996 12:00:00 AM2817 Milton Dr.12.50
Formaggi Fortini s.r.l.Viale Dante, 75Ravenna4Dairy ProductsGorgonzola Telino12 - 100 g pkgs58.177/10/1996 12:00:00 AMRua do Paço, 6712.50
Formaggi Fortini s.r.l.Viale Dante, 75Ravenna4Dairy ProductsMascarpone Fabioli24 - 200 g pkgs.140.517/17/1996 12:00:00 AMKirchgasse 632.00
Formaggi Fortini s.r.l.Viale Dante, 75Ravenna4Dairy ProductsMascarpone Fabioli24 - 200 g pkgs.74.169/25/1996 12:00:00 AM2817 Milton Dr.32.00
Formaggi Fortini s.r.l.Viale Dante, 75Ravenna4Dairy ProductsMascarpone Fabioli24 - 200 g pkgs.42.1110/22/1996 12:00:00 AM8 Johnstown Road32.00
Norske MeierierHatlevegen 5Sandvika4Dairy ProductsGeitost500 g51.307/9/1996 12:00:00 AMBoulevard Tirou, 2552.50
Norske MeierierHatlevegen 5Sandvika4Dairy ProductsGeitost500 g4.548/1/1996 12:00:00 AMP.O. Box 5552.50
Norske MeierierHatlevegen 5Sandvika4Dairy ProductsGeitost500 g4.567/31/1996 12:00:00 AM1029 - 12th Ave. S.2.50
Bigfoot Breweries3400 - 8th Avenue Suite 210Bend1BeveragesSasquatch Ale24 - 12 oz bottles12.768/22/1996 12:00:00 AMAv. Copacabana, 26714.00
Bigfoot Breweries3400 - 8th Avenue Suite 210Bend1BeveragesSasquatch Ale24 - 12 oz bottles41.769/26/1996 12:00:00 AMGarden House Crowther Way14.00
Bigfoot Breweries3400 - 8th Avenue Suite 210Bend1BeveragesSasquatch Ale24 - 12 oz bottles19.6411/20/1996 12:00:00 AM1 rue Alsace-Lorraine14.00
Bigfoot Breweries3400 - 8th Avenue Suite 210Bend1BeveragesSteeleye Stout24 - 12 oz bottles229.248/21/1996 12:00:00 AMTaucherstraße 1018.00
Bigfoot Breweries3400 - 8th Avenue Suite 210Bend1BeveragesSteeleye Stout24 - 12 oz bottles2.948/14/1996 12:00:00 AMGran Vía, 118.00
Bigfoot Breweries3400 - 8th Avenue Suite 210Bend1BeveragesSteeleye Stout24 - 12 oz bottles3.057/19/1996 12:00:00 AMRua da Panificadora, 1218.00
Svensk Sjöföda ABBrovallavägen 231Stockholm8SeafoodInlagd Sill24 - 250 g jars136.548/1/1996 12:00:00 AMTorikatu 3819.00
Svensk Sjöföda ABBrovallavägen 231Stockholm8SeafoodInlagd Sill24 - 250 g jars148.337/12/1996 12:00:00 AMStarenweg 519.00
Svensk Sjöföda ABBrovallavägen 231Stockholm8SeafoodInlagd Sill24 - 250 g jars168.229/5/1996 12:00:00 AM8 Johnstown Road19.00
Svensk Sjöföda ABBrovallavägen 231Stockholm8SeafoodGravad lax12 - 500 g pkgs.3.257/18/1996 12:00:00 AMSierras de Granada 999326.00
Svensk Sjöföda ABBrovallavägen 231Stockholm8SeafoodGravad lax12 - 500 g pkgs.11.261/8/1997 12:00:00 AM184, chaussée de Tournai26.00
Svensk Sjöföda ABBrovallavägen 231Stockholm8SeafoodGravad lax12 - 500 g pkgs.108.2610/24/1996 12:00:00 AMBerliner Platz 4326.00
Aux joyeux ecclésiastiques203, Rue des Francs-BourgeoisParis1BeveragesCôte de Blaye12 - 75 cl bottles191.6710/15/1996 12:00:00 AMP.O. Box 555263.50
Aux joyeux ecclésiastiques203, Rue des Francs-BourgeoisParis1BeveragesCôte de Blaye12 - 75 cl bottles162.3311/11/1996 12:00:00 AMKirchgasse 6263.50
Aux joyeux ecclésiastiques203, Rue des Francs-BourgeoisParis1BeveragesCôte de Blaye12 - 75 cl bottles360.6311/13/1996 12:00:00 AMGeislweg 14263.50
Aux joyeux ecclésiastiques203, Rue des Francs-BourgeoisParis1BeveragesChartreuse verte750 cc per bottle81.917/16/1996 12:00:00 AMCarrera 22 con Ave. Carlos Soublette #8-3518.00
Aux joyeux ecclésiastiques203, Rue des Francs-BourgeoisParis1BeveragesChartreuse verte750 cc per bottle58.177/10/1996 12:00:00 AMRua do Paço, 6718.00
Aux joyeux ecclésiastiques203, Rue des Francs-BourgeoisParis1BeveragesChartreuse verte750 cc per bottle5.749/4/1996 12:00:00 AM24, place Kléber18.00
New England Seafood CanneryOrder Processing Dept. 2100 Paul Revere Blvd.Boston8SeafoodBoston Crab Meat24 - 4 oz tins76.838/20/1996 12:00:00 AMTaucherstraße 1018.40
New England Seafood CanneryOrder Processing Dept. 2100 Paul Revere Blvd.Boston8SeafoodBoston Crab Meat24 - 4 oz tins76.078/5/1996 12:00:00 AMTaucherstraße 1018.40
New England Seafood CanneryOrder Processing Dept. 2100 Paul Revere Blvd.Boston8SeafoodBoston Crab Meat24 - 4 oz tins208.587/29/1996 12:00:00 AMBerliner Platz 4318.40
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