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
G'day, Mate170 Prince Edward Parade Hunter's HillSydney7ProduceManjimup Dried Apples50 - 300 g pkgs.65.837/8/1996 12:00:00 AMRua do Paço, 6753.00
G'day, Mate170 Prince Edward Parade Hunter's HillSydney7ProduceManjimup Dried Apples50 - 300 g pkgs.11.617/5/1996 12:00:00 AMLuisenstr. 4853.00
G'day, Mate170 Prince Edward Parade Hunter's HillSydney7ProduceManjimup Dried Apples50 - 300 g pkgs.6.408/27/1996 12:00:00 AMRua da Panificadora, 1253.00
G'day, Mate170 Prince Edward Parade Hunter's HillSydney5Grains/CerealsFilo Mix16 - 2 kg boxes34.8612/19/1996 12:00:00 AM90 Wadhurst Rd.7.00
G'day, Mate170 Prince Edward Parade Hunter's HillSydney5Grains/CerealsFilo Mix16 - 2 kg boxes8.5610/21/1996 12:00:00 AM2, rue du Commerce7.00
G'day, Mate170 Prince Edward Parade Hunter's HillSydney5Grains/CerealsFilo Mix16 - 2 kg boxes0.4010/4/1996 12:00:00 AMCalle Dr. Jorge Cash 3217.00
G'day, Mate170 Prince Edward Parade Hunter's HillSydney6Meat/PoultryPerth Pasties48 pieces7.569/16/1996 12:00:00 AMGran Vía, 132.80
G'day, Mate170 Prince Edward Parade Hunter's HillSydney6Meat/PoultryPerth Pasties48 pieces76.838/20/1996 12:00:00 AMTaucherstraße 1032.80
G'day, Mate170 Prince Edward Parade Hunter's HillSydney6Meat/PoultryPerth Pasties48 pieces13.977/15/1996 12:00:00 AMRua do Mercado, 1232.80
Ma Maison2960 Rue St. LaurentMontréal6Meat/PoultryTourtière16 pies7.458/23/1996 12:00:00 AMStrada Provinciale 1247.45
Ma Maison2960 Rue St. LaurentMontréal6Meat/PoultryTourtière16 pies7.569/16/1996 12:00:00 AMGran Vía, 17.45
Ma Maison2960 Rue St. LaurentMontréal6Meat/PoultryTourtière16 pies10.1910/16/1996 12:00:00 AM12, rue des Bouchers7.45
Ma Maison2960 Rue St. LaurentMontréal6Meat/PoultryPâté chinois24 boxes x 2 pies54.8310/30/1996 12:00:00 AMBerliner Platz 4324.00
Ma Maison2960 Rue St. LaurentMontréal6Meat/PoultryPâté chinois24 boxes x 2 pies8.988/14/1996 12:00:00 AMBerguvsvägen 824.00
Ma Maison2960 Rue St. LaurentMontréal6Meat/PoultryPâté chinois24 boxes x 2 pies22.987/11/1996 12:00:00 AMHauptstr. 3124.00
Pasta Buttini s.r.l.Via dei Gelsomini, 153Salerno5Grains/CerealsGnocchi di nonna Alice24 - 250 g pkgs.48.297/22/1996 12:00:00 AM2817 Milton Dr.38.00
Pasta Buttini s.r.l.Via dei Gelsomini, 153Salerno5Grains/CerealsGnocchi di nonna Alice24 - 250 g pkgs.45.089/9/1996 12:00:00 AMAdenauerallee 90038.00
Pasta Buttini s.r.l.Via dei Gelsomini, 153Salerno5Grains/CerealsGnocchi di nonna Alice24 - 250 g pkgs.1.159/2/1996 12:00:00 AM59 rue de l'Abbaye38.00
Pasta Buttini s.r.l.Via dei Gelsomini, 153Salerno5Grains/CerealsRavioli Angelo24 - 250 g pkgs.12.698/15/1996 12:00:00 AMGran Vía, 119.50
Pasta Buttini s.r.l.Via dei Gelsomini, 153Salerno5Grains/CerealsRavioli Angelo24 - 250 g pkgs.41.347/8/1996 12:00:00 AM2, rue du Commerce19.50
Pasta Buttini s.r.l.Via dei Gelsomini, 153Salerno5Grains/CerealsRavioli Angelo24 - 250 g pkgs.55.097/19/1996 12:00:00 AMMehrheimerstr. 36919.50
Escargots Nouveaux22, rue H. VoironMontceau8SeafoodEscargots de Bourgogne24 pieces74.169/25/1996 12:00:00 AM2817 Milton Dr.13.25
Escargots Nouveaux22, rue H. VoironMontceau8SeafoodEscargots de Bourgogne24 pieces63.3610/11/1996 12:00:00 AMÃ…kergatan 2413.25
Escargots Nouveaux22, rue H. VoironMontceau8SeafoodEscargots de Bourgogne24 pieces124.1212/5/1996 12:00:00 AM8 Johnstown Road13.25
Gai pâturageBat. B 3, rue des AlpesAnnecy4Dairy ProductsRaclette Courdavault5 kg pkg.148.337/12/1996 12:00:00 AMStarenweg 555.00
Gai pâturageBat. B 3, rue des AlpesAnnecy4Dairy ProductsRaclette Courdavault5 kg pkg.208.587/29/1996 12:00:00 AMBerliner Platz 4355.00
Gai pâturageBat. B 3, rue des AlpesAnnecy4Dairy ProductsRaclette Courdavault5 kg pkg.26.938/7/1996 12:00:00 AMVia Ludovico il Moro 2255.00
Gai pâturageBat. B 3, rue des AlpesAnnecy4Dairy ProductsCamembert Pierrot15 - 300 g rounds84.818/16/1996 12:00:00 AMCarrera 52 con Ave. Bolívar #65-98 Llano Largo34.00
Gai pâturageBat. B 3, rue des AlpesAnnecy4Dairy ProductsCamembert Pierrot15 - 300 g rounds76.568/19/1996 12:00:00 AMMagazinweg 734.00
Gai pâturageBat. B 3, rue des AlpesAnnecy4Dairy ProductsCamembert Pierrot15 - 300 g rounds51.307/9/1996 12:00:00 AMBoulevard Tirou, 25534.00
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.
  • 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