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
Forêts d'érables148 rue ChasseurSte-Hyacinthe2CondimentsSirop d'érable24 - 500 ml bottles86.532/10/1997 12:00:00 AM187 Suffolk Ln.28.50
Forêts d'érables148 rue ChasseurSte-Hyacinthe2CondimentsSirop d'érable24 - 500 ml bottles17.551/17/1997 12:00:00 AMTaucherstraße 1028.50
Forêts d'érables148 rue ChasseurSte-Hyacinthe2CondimentsSirop d'érable24 - 500 ml bottles180.452/24/1997 12:00:00 AMTorikatu 3828.50
Forêts d'érables148 rue ChasseurSte-Hyacinthe3ConfectionsTarte au sucre48 pies55.097/19/1996 12:00:00 AMMehrheimerstr. 36949.30
Forêts d'érables148 rue ChasseurSte-Hyacinthe3ConfectionsTarte au sucre48 pies125.778/9/1996 12:00:00 AMHeerstr. 2249.30
Forêts d'érables148 rue ChasseurSte-Hyacinthe3ConfectionsTarte au sucre48 pies229.248/21/1996 12:00:00 AMTaucherstraße 1049.30
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne2CondimentsVegie-spread15 - 625 g jars21.188/29/1996 12:00:00 AMAvda. Azteca 12343.90
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne2CondimentsVegie-spread15 - 625 g jars92.698/12/1996 12:00:00 AMBerguvsvägen 843.90
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne2CondimentsVegie-spread15 - 625 g jars214.2710/8/1996 12:00:00 AM187 Suffolk Ln.43.90
Plutzer Lebensmittelgroßmärkte AGBogenallee 51Frankfurt5Grains/CerealsWimmers gute Semmelknödel20 bags x 4 pieces110.3710/31/1996 12:00:00 AMMagazinweg 733.25
Plutzer Lebensmittelgroßmärkte AGBogenallee 51Frankfurt5Grains/CerealsWimmers gute Semmelknödel20 bags x 4 pieces101.9511/29/1996 12:00:00 AMKirchgasse 633.25
Plutzer Lebensmittelgroßmärkte AGBogenallee 51Frankfurt5Grains/CerealsWimmers gute Semmelknödel20 bags x 4 pieces22.778/26/1996 12:00:00 AMFauntleroy Circus33.25
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsLouisiana Fiery Hot Pepper Sauce32 - 8 oz bottles107.839/11/1996 12:00:00 AMC/ Romero, 3321.05
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsLouisiana Fiery Hot Pepper Sauce32 - 8 oz bottles65.837/8/1996 12:00:00 AMRua do Paço, 6721.05
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsLouisiana Fiery Hot Pepper Sauce32 - 8 oz bottles41.347/8/1996 12:00:00 AM2, rue du Commerce21.05
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsLouisiana Hot Spiced Okra24 - 8 oz jars17.689/9/1996 12:00:00 AMVia Ludovico il Moro 2217.00
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsLouisiana Hot Spiced Okra24 - 8 oz jars47.942/11/1997 12:00:00 AMKirchgasse 617.00
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsLouisiana Hot Spiced Okra24 - 8 oz jars68.523/14/1997 12:00:00 AMBoulevard Tirou, 25517.00
Bigfoot Breweries3400 - 8th Avenue Suite 210Bend1BeveragesLaughing Lumberjack Lager24 - 12 oz bottles69.324/10/1997 12:00:00 AMCalle Dr. Jorge Cash 32114.00
Bigfoot Breweries3400 - 8th Avenue Suite 210Bend1BeveragesLaughing Lumberjack Lager24 - 12 oz bottles24.915/21/1997 12:00:00 AM89 Chiaroscuro Rd.14.00
Bigfoot Breweries3400 - 8th Avenue Suite 210Bend1BeveragesLaughing Lumberjack Lager24 - 12 oz bottles76.568/19/1996 12:00:00 AMMagazinweg 714.00
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsScottish Longbreads10 boxes x 8 pieces7.458/23/1996 12:00:00 AMStrada Provinciale 12412.50
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsScottish Longbreads10 boxes x 8 pieces17.689/9/1996 12:00:00 AMVia Ludovico il Moro 2212.50
Specialty Biscuits, Ltd.29 King's WayManchester3ConfectionsScottish Longbreads10 boxes x 8 pieces107.839/11/1996 12:00:00 AMC/ Romero, 3312.50
Norske MeierierHatlevegen 5Sandvika4Dairy ProductsGudbrandsdalsost10 kg pkg.24.699/20/1996 12:00:00 AM67, rue des Cinquante Otages36.00
Norske MeierierHatlevegen 5Sandvika4Dairy ProductsGudbrandsdalsost10 kg pkg.0.129/3/1996 12:00:00 AMCarrera 52 con Ave. Bolívar #65-98 Llano Largo36.00
Norske MeierierHatlevegen 5Sandvika4Dairy ProductsGudbrandsdalsost10 kg pkg.1.619/18/1996 12:00:00 AMAvda. de la Constitución 222236.00
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne1BeveragesOutback Lager24 - 355 ml bottles29.769/6/1996 12:00:00 AMAv. Copacabana, 26715.00
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne1BeveragesOutback Lager24 - 355 ml bottles55.097/19/1996 12:00:00 AMMehrheimerstr. 36915.00
Pavlova, Ltd.74 Rose St. Moonie PondsMelbourne1BeveragesOutback Lager24 - 355 ml bottles55.287/25/1996 12:00:00 AM24, place Kléber15.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