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
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsSir Rodney's Scones24 pkgs. x 4 pieces3.257/18/1996 12:00:00 AMSierras de Granada 999310.00
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsSir Rodney's Scones24 pkgs. x 4 pieces3.057/19/1996 12:00:00 AMRua da Panificadora, 1210.00
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsSir Rodney's Scones24 pkgs. x 4 pieces0.5910/18/1996 12:00:00 AMTorikatu 3810.00
PB Knäckebröd ABKaloadagatan 13Göteborg5Grains/CerealsGustaf's Knäckebröd24 - 500 g pkgs.9.212/4/1997 12:00:00 AMBerkeley Gardens 12 Brewery21.00
PB Knäckebröd ABKaloadagatan 13Göteborg5Grains/CerealsGustaf's Knäckebröd24 - 500 g pkgs.149.495/30/1997 12:00:00 AMTorikatu 3821.00
PB Knäckebröd ABKaloadagatan 13Göteborg5Grains/CerealsGustaf's Knäckebröd24 - 500 g pkgs.41.347/8/1996 12:00:00 AM2, rue du Commerce21.00
PB Knäckebröd ABKaloadagatan 13Göteborg5Grains/CerealsTunnbröd12 - 250 g pkgs.135.3512/27/1996 12:00:00 AMBerliner Platz 439.00
PB Knäckebröd ABKaloadagatan 13Göteborg5Grains/CerealsTunnbröd12 - 250 g pkgs.0.7811/7/1996 12:00:00 AMAdenauerallee 9009.00
PB Knäckebröd ABKaloadagatan 13Göteborg5Grains/CerealsTunnbröd12 - 250 g pkgs.108.2610/24/1996 12:00:00 AMBerliner Platz 439.00
Refrescos Americanas LTDAAv. das Americanas 12.890Sao Paulo1BeveragesGuaraná Fantástica12 - 355 ml cans22.987/11/1996 12:00:00 AMHauptstr. 314.50
Refrescos Americanas LTDAAv. das Americanas 12.890Sao Paulo1BeveragesGuaraná Fantástica12 - 355 ml cans146.067/23/1996 12:00:00 AMKirchgasse 64.50
Refrescos Americanas LTDAAv. das Americanas 12.890Sao Paulo1BeveragesGuaraná Fantástica12 - 355 ml cans26.938/7/1996 12:00:00 AMVia Ludovico il Moro 224.50
Heli Süßwaren GmbH & Co. KGTiergartenstraße 5Berlin3ConfectionsNuNuCa Nuß-Nougat-Creme20 - 450 g glasses4.8810/7/1996 12:00:00 AMMaubelstr. 9014.00
Heli Süßwaren GmbH & Co. KGTiergartenstraße 5Berlin3ConfectionsNuNuCa Nuß-Nougat-Creme20 - 450 g glasses3.1011/6/1996 12:00:00 AMRua Orós, 9214.00
Heli Süßwaren GmbH & Co. KGTiergartenstraße 5Berlin3ConfectionsNuNuCa Nuß-Nougat-Creme20 - 450 g glasses96.0411/25/1996 12:00:00 AM12, rue des Bouchers14.00
Heli Süßwaren GmbH & Co. KGTiergartenstraße 5Berlin3ConfectionsGumbär Gummibärchen100 - 250 g bags34.8811/19/1996 12:00:00 AMCarrera 52 con Ave. Bolívar #65-98 Llano Largo31.23
Heli Süßwaren GmbH & Co. KGTiergartenstraße 5Berlin3ConfectionsGumbär Gummibärchen100 - 250 g bags108.2610/24/1996 12:00:00 AMBerliner Platz 4331.23
Heli Süßwaren GmbH & Co. KGTiergartenstraße 5Berlin3ConfectionsGumbär Gummibärchen100 - 250 g bags12.7510/16/1996 12:00:00 AMCarrera 52 con Ave. Bolívar #65-98 Llano Largo31.23
Heli Süßwaren GmbH & Co. KGTiergartenstraße 5Berlin3ConfectionsSchoggi Schokolade100 - 100 g pieces73.022/10/1997 12:00:00 AM2743 Bering St.43.90
Heli Süßwaren GmbH & Co. KGTiergartenstraße 5Berlin3ConfectionsSchoggi Schokolade100 - 100 g pieces76.568/19/1996 12:00:00 AMMagazinweg 743.90
Heli Süßwaren GmbH & Co. KGTiergartenstraße 5Berlin3ConfectionsSchoggi Schokolade100 - 100 g pieces81.917/16/1996 12:00:00 AMCarrera 22 con Ave. Carlos Soublette #8-3543.90
Plutzer Lebensmittelgroßmärkte AGBogenallee 51Frankfurt7ProduceRössle Sauerkraut25 - 825 g cans125.778/9/1996 12:00:00 AMHeerstr. 2245.60
Plutzer Lebensmittelgroßmärkte AGBogenallee 51Frankfurt7ProduceRössle Sauerkraut25 - 825 g cans6.279/10/1996 12:00:00 AMBoulevard Tirou, 25545.60
Plutzer Lebensmittelgroßmärkte AGBogenallee 51Frankfurt7ProduceRössle Sauerkraut25 - 825 g cans40.269/23/1996 12:00:00 AMAdenauerallee 90045.60
Plutzer Lebensmittelgroßmärkte AGBogenallee 51Frankfurt6Meat/PoultryThüringer Rostbratwurst50 bags x 30 sausgs.257.629/13/1996 12:00:00 AM2743 Bering St.123.79
Plutzer Lebensmittelgroßmärkte AGBogenallee 51Frankfurt6Meat/PoultryThüringer Rostbratwurst50 bags x 30 sausgs.79.708/27/1996 12:00:00 AMAv. dos Lusíadas, 23123.79
Plutzer Lebensmittelgroßmärkte AGBogenallee 51Frankfurt6Meat/PoultryThüringer Rostbratwurst50 bags x 30 sausgs.66.297/30/1996 12:00:00 AM5ª Ave. Los Palos Grandes123.79
Nord-Ost-Fisch Handelsgesellschaft mbHFrahmredder 112aCuxhaven8SeafoodNord-Ost Matjeshering10 - 200 g glasses146.067/23/1996 12:00:00 AMKirchgasse 625.89
Nord-Ost-Fisch Handelsgesellschaft mbHFrahmredder 112aCuxhaven8SeafoodNord-Ost Matjeshering10 - 200 g glasses12.698/15/1996 12:00:00 AMGran Vía, 125.89
Nord-Ost-Fisch Handelsgesellschaft mbHFrahmredder 112aCuxhaven8SeafoodNord-Ost Matjeshering10 - 200 g glasses7.569/16/1996 12:00:00 AMGran Vía, 125.89
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