Grid - Multi-Column Headers

Drag a column header and drop it here to group by that column
Supplier NameLocationProduct Details
AddressCityCategoryNameQuantityOrder DetailsPrice
IDNameFreightDateAddress
Exotic Liquids49 Gilbert St.London1BeveragesChai10 boxes x 20 bags76.838/20/1996 12:00:00 AMTaucherstraße 1018.00
Exotic Liquids49 Gilbert St.London1BeveragesChai10 boxes x 20 bags147.268/30/1996 12:00:00 AM2817 Milton Dr.18.00
Exotic Liquids49 Gilbert St.London1BeveragesChai10 boxes x 20 bags12.699/30/1996 12:00:00 AM89 Chiaroscuro Rd.18.00
Exotic Liquids49 Gilbert St.London1BeveragesChang24 - 12 oz bottles148.337/12/1996 12:00:00 AMStarenweg 519.00
Exotic Liquids49 Gilbert St.London1BeveragesChang24 - 12 oz bottles140.517/17/1996 12:00:00 AMKirchgasse 619.00
Exotic Liquids49 Gilbert St.London1BeveragesChang24 - 12 oz bottles3.677/24/1996 12:00:00 AMÅkergatan 2419.00
Exotic Liquids49 Gilbert St.London2CondimentsAniseed Syrup12 - 550 ml bottles22.778/26/1996 12:00:00 AMFauntleroy Circus10.00
Exotic Liquids49 Gilbert St.London2CondimentsAniseed Syrup12 - 550 ml bottles34.821/6/1997 12:00:00 AMAve. 5 de Mayo Porlamar10.00
Exotic Liquids49 Gilbert St.London2CondimentsAniseed Syrup12 - 550 ml bottles64.453/25/1997 12:00:00 AMAve. 5 de Mayo Porlamar10.00
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsChef Anton's Cajun Seasoning48 - 6 oz jars77.9210/10/1996 12:00:00 AMC/ Araquil, 6722.00
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsChef Anton's Cajun Seasoning48 - 6 oz jars15.5110/23/1996 12:00:00 AMEstrada da saúde n. 5822.00
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsChef Anton's Cajun Seasoning48 - 6 oz jars47.309/19/1996 12:00:00 AM8 Johnstown Road22.00
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsChef Anton's Gumbo Mix36 boxes79.708/27/1996 12:00:00 AMAv. dos Lusíadas, 2321.35
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsChef Anton's Gumbo Mix36 boxes48.297/22/1996 12:00:00 AM2817 Milton Dr.21.35
New Orleans Cajun DelightsP.O. Box 78934New Orleans2CondimentsChef Anton's Gumbo Mix36 boxes140.517/17/1996 12:00:00 AMKirchgasse 621.35
Grandma Kelly's Homestead707 Oxford Rd.Ann Arbor2CondimentsGrandma's Boysenberry Spread12 - 8 oz jars47.309/19/1996 12:00:00 AM8 Johnstown Road25.00
Grandma Kelly's Homestead707 Oxford Rd.Ann Arbor2CondimentsGrandma's Boysenberry Spread12 - 8 oz jars64.8610/9/1996 12:00:00 AMMaubelstr. 9025.00
Grandma Kelly's Homestead707 Oxford Rd.Ann Arbor2CondimentsGrandma's Boysenberry Spread12 - 8 oz jars154.688/1/1997 12:00:00 AM43 rue St. Laurent25.00
Grandma Kelly's Homestead707 Oxford Rd.Ann Arbor7ProduceUncle Bob's Organic Dried Pears12 - 1 lb pkgs.25.092/27/1997 12:00:00 AM2, rue du Commerce30.00
Grandma Kelly's Homestead707 Oxford Rd.Ann Arbor7ProduceUncle Bob's Organic Dried Pears12 - 1 lb pkgs.30.9612/17/1996 12:00:00 AMP.O. Box 55530.00
Grandma Kelly's Homestead707 Oxford Rd.Ann Arbor7ProduceUncle Bob's Organic Dried Pears12 - 1 lb pkgs.48.297/22/1996 12:00:00 AM2817 Milton Dr.30.00
Grandma Kelly's Homestead707 Oxford Rd.Ann Arbor2CondimentsNorthwoods Cranberry Sauce12 - 12 oz jars23.2911/1/1996 12:00:00 AM1029 - 12th Ave. S.40.00
Grandma Kelly's Homestead707 Oxford Rd.Ann Arbor2CondimentsNorthwoods Cranberry Sauce12 - 12 oz jars249.0611/4/1996 12:00:00 AMTaucherstraße 1040.00
Grandma Kelly's Homestead707 Oxford Rd.Ann Arbor2CondimentsNorthwoods Cranberry Sauce12 - 12 oz jars350.644/18/1997 12:00:00 AM12, rue des Bouchers40.00
Tokyo Traders9-8 Sekimai Musashino-shiTokyo6Meat/PoultryMishi Kobe Niku18 - 500 g pkgs.204.474/23/1997 12:00:00 AMTaucherstraße 1097.00
Tokyo Traders9-8 Sekimai Musashino-shiTokyo6Meat/PoultryMishi Kobe Niku18 - 500 g pkgs.296.439/30/1997 12:00:00 AM8 Johnstown Road97.00
Tokyo Traders9-8 Sekimai Musashino-shiTokyo6Meat/PoultryMishi Kobe Niku18 - 500 g pkgs.44.121/21/1997 12:00:00 AMRua do Mercado, 1297.00
Tokyo Traders9-8 Sekimai Musashino-shiTokyo8SeafoodIkura12 - 200 ml jars34.8811/19/1996 12:00:00 AMCarrera 52 con Ave. Bolívar #65-98 Llano Largo31.00
Tokyo Traders9-8 Sekimai Musashino-shiTokyo8SeafoodIkura12 - 200 ml jars76.078/5/1996 12:00:00 AMTaucherstraße 1031.00
Tokyo Traders9-8 Sekimai Musashino-shiTokyo8SeafoodIkura12 - 200 ml jars13.848/8/1996 12:00:00 AMAvda. Azteca 12331.00
Page size:
 231 items in 8 pages
  • Sort Ascending
  • Sort Descending
  • Clear Sorting
  • Group By
  • Ungroup
  • Columns
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>
    <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>
    <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>

Find Assistance

Help Us Improve

Was this example helpful?