Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / Hierarchy with Templates

Drag a column header and drop it here to group by that column
 First NameLast NameTitleBirth DateCityCountry
12
 Page 1 of 2, items 1 to 5 of 9.
NancyDavolioSales Representative12/08/1948SeattleUSA
 
 CompanyNameOrderIDOrder dateOrder Total
  Orders count: 123Last order dates: 5/6/1998 
12345678910...
Page size:
select
 123 items in 18 pages
Ernst Handel1025807/17/1996$403.72
Wartian Herkku1027008/01/1996$1,376.00
Magazzini Alimentari Riuniti1027508/07/1996$15.36
QUICK-Stop1028508/20/1996$435.84
Tradição Hipermercados1029208/28/1996$1,296.00
Tortuga Restaurante1029308/29/1996$848.70
Tortuga Restaurante1030409/12/1996$954.40
Customer Image
BirthDate:12/08/1948
Country:USA
City:Seattle
Address:507 - 20th Ave. E. Apt. 2A
HomePhone:(206) 555-9857
AndrewFullerVice President, Sales02/19/1952TacomaUSA
JanetLeverlingSales Representative08/30/1963KirklandUSA
MargaretPeacockSales Representative09/19/1937RedmondUSA
StevenBuchananSales Manager03/04/1955LondonUK

  • The Hierarchy with templates grid demo shows how to have a structure resembling a standard hierarchy, which can be greatly customized, without setting hierarchical relations between the master and detail levels.
    The example shows a list of sales employees. In the detail table for each employee is the relevant information for all the sales made by the person, his/her contact information, along with a photograph, and a chart representing the sales revenue, broken down per product category.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.GridExamplesVBNET.Hierarchy.NestedViewTemplate.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
    <%@ 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">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
        <!-- custom head section -->
        <style type="text/css">
            .viewWrap
            {
                padding: 15px;
                background: #2291b5 0 0 url(Img/bluegradient.gif) repeat-x;
            }
            
            .contactWrap
            {
                padding: 10px 15px 15px 15px;
                background: #fff;
                color: #333;
            }
            
            .contactWrap td
            {
                padding: 0 20px 0 0;
            }
            
            .contactWrap td td
            {
                padding: 3px 20px 3px 0;
            }
            
            .contactWrap img
            {
                border: 1px solid #05679d;
            }
        </style>
        <!-- end of custom head section -->
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB"></telerik:Header>
        <!-- content start -->
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <telerik:RadGrid ID="RadGrid1" OnPreRender="RadGrid1_PreRender" DataSourceID="SqlDataSource1"
            runat="server" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"
            AllowPaging="True" PageSize="5" GridLines="None" ShowGroupPanel="true">
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID" AllowMultiColumnSorting="True"
                GroupLoadMode="Server">
                <NestedViewTemplate>
                    <asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="false">
                        <telerik:RadTabStrip runat="server" ID="TabStip1" MultiPageID="Multipage1" SelectedIndex="0">
                            <Tabs>
                                <telerik:RadTab runat="server" Text="Sales" PageViewID="PageView1">
                                </telerik:RadTab>
                                <telerik:RadTab runat="server" Text="Contact Information" PageViewID="PageView2">
                                </telerik:RadTab>
                                <telerik:RadTab runat="server" Text="Statistics Chart" PageViewID="PageView3">
                                </telerik:RadTab>
                            </Tabs>
                        </telerik:RadTabStrip>
                        <telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">
                            <telerik:RadPageView runat="server" ID="PageView1">
                                <asp:Label ID="Label1" Font-Bold="true" Font-Italic="true" Text='<%# Eval("EmployeeID") %>'
                                    Visible="false" runat="server" />
                                <telerik:RadGrid runat="server" ID="OrdersGrid" DataSourceID="SqlDataSource2" ShowFooter="true"
                                    AllowSorting="true" EnableLinqExpressions="false">
                                    <MasterTableView ShowHeader="true" AutoGenerateColumns="False" AllowPaging="true"
                                        DataKeyNames="OrderID" PageSize="7" HierarchyLoadMode="ServerOnDemand">
                                        <DetailTables>
                                            <telerik:GridTableView AutoGenerateColumns="false" DataKeyNames="OrderID" DataSourceID="SqlDataSource3"
                                                Width="100%">
                                                <ParentTableRelation>
                                                    <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" />
                                                </ParentTableRelation>
                                                <Columns>
                                                    <telerik:GridBoundColumn SortExpression="ProductName" HeaderText="Product name" HeaderButtonType="TextButton"
                                                        DataField="ProductName" UniqueName="ProductName">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridNumericColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                                                        DataField="UnitPrice" DataFormatString="{0:C}" Aggregate="Avg" FooterAggregateFormatString="Average price: {0:C}">
                                                    </telerik:GridNumericColumn>
                                                    <telerik:GridNumericColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                                        DataField="Quantity" Aggregate="Max" FooterAggregateFormatString="Max quantity: {0}">
                                                    </telerik:GridNumericColumn>
                                                    <telerik:GridNumericColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                                                        DataField="Discount" DataFormatString="{0:P}">
                                                    </telerik:GridNumericColumn>
                                                    <telerik:GridCalculatedColumn UniqueName="Total" DataFields="UnitPrice,Quantity,Discount"
                                                        Expression="IIf({2} = 0,{0}*{1}, {0}*{1}*{2})" HeaderText="Total" DataType="System.Double"
                                                        Aggregate="Sum" DataFormatString="{0:C}" FooterAggregateFormatString="Total cost: {0:C}" />
                                                </Columns>
                                                <SortExpressions>
                                                    <telerik:GridSortExpression FieldName="Quantity" SortOrder="Descending"></telerik:GridSortExpression>
                                                </SortExpressions>
                                            </telerik:GridTableView>
                                        </DetailTables>
                                        <Columns>
                                            <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="CompanyName" HeaderButtonType="TextButton"
                                                DataField="CompanyName" UniqueName="CompanyName">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                                DataField="OrderID" UniqueName="OrderID" Aggregate="Count" FooterAggregateFormatString="Orders count: {0}">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridDateTimeColumn SortExpression="OrderDate" HeaderText="Order date" HeaderButtonType="TextButton"
                                                DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:MM/dd/yyyy}"
                                                Aggregate="Last" FooterAggregateFormatString="Last order dates: {0:d}">
                                            </telerik:GridDateTimeColumn>
                                            <telerik:GridBoundColumn UniqueName="Total" DataField="Total" HeaderText="Order Total"
                                                SortExpression="Total" DataFormatString="{0:C}">
                                            </telerik:GridBoundColumn>
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid>
                                <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                                    ProviderName="System.Data.SqlClient" SelectCommand="SELECT Orders.OrderID, Orders.OrderDate, Orders.Freight, Customers.CompanyName, SUM(
                                        CASE WHEN [Order Details].Discount = 0     THEN 1
         ELSE [Order Details].Discount END
                                        * [Order Details].Quantity * [Order Details].UnitPrice) as Total    
                                        FROM (Orders LEFT JOIN Customers on Orders.CustomerID = Customers.CustomerID)
                                        FULL JOIN [Order Details] on Orders.OrderID = [Order Details].OrderID
                                        Where EmployeeID = @EmployeeID
                                        GROUP BY Orders.OrderID,Orders.OrderDate, Orders.Freight, Customers.CompanyName"
                                    runat="server">
                                    <SelectParameters>
                                        <asp:ControlParameter ControlID="Label1" PropertyName="Text" Type="String" Name="EmployeeID" />
                                    </SelectParameters>
                                </asp:SqlDataSource>
                                <asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                                    ProviderName="System.Data.SqlClient" SelectCommand="SELECT OrderID, [Order Details].UnitPrice, Quantity, Discount, Products.ProductName FROM ([Order Details] LEFT JOIN Products on [Order Details].ProductID = Products.ProductID) where OrderID = @OrderID"
                                    runat="server">
                                    <SelectParameters>
                                        <asp:SessionParameter Name="OrderID" SessionField="OrderID" Type="Int32" />
                                    </SelectParameters>
                                </asp:SqlDataSource>
                            </telerik:RadPageView>
                            <telerik:RadPageView runat="server" ID="PageView2" Width="460px">
                                <div class="contactWrap">
                                    <table cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td>
                                                <img src='<%# Page.ResolveUrl("~/Grid/Examples/Hierarchy/NestedViewTemplate/Img/") & (CType(Container.FindControl("Label1"), Label).Text) %>.jpg'
                                                    alt="Customer Image" />
                                            </td>
                                            <td>
    <asp:DetailsView ID="DetailsView1" AllowPaging="true" GridLines="None" Width="100%"
    DataSourceID="SqlDataSource4" runat="server" Font-Italic="true" AutoGenerateRows="false">
                                                    <Fields>
    <asp:BoundField DataFormatString="{0:MM/dd/yyyy}" HeaderText="BirthDate:" HtmlEncode="false"
    DataField="BirthDate" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
    <asp:BoundField HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" HeaderText="Country:"
    DataField="Country" />
    <asp:BoundField HeaderText="City:" DataField="City" HeaderStyle-Font-Italic="false"
    HeaderStyle-Font-Bold="true" />
    <asp:BoundField HeaderText="Address:" DataField="Address" HeaderStyle-Font-Italic="false"
    HeaderStyle-Font-Bold="true" />
    <asp:BoundField HeaderText="HomePhone:" DataField="HomePhone" HeaderStyle-Font-Italic="false"
    HeaderStyle-Font-Bold="true" />
                                                    </Fields>
                                                </asp:DetailsView>
                                                <asp:SqlDataSource ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                                                    ProviderName="System.Data.SqlClient" SelectCommand="SELECT BirthDate, Country, City, Address, HomePhone FROM Employees Where EmployeeID = @EmployeeID"
                                                    runat="server">
                                                    <SelectParameters>
                                                        <asp:ControlParameter ControlID="Label1" PropertyName="Text" Type="String" Name="EmployeeID" />
                                                    </SelectParameters>
                                                </asp:SqlDataSource>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </telerik:RadPageView>
                            <telerik:RadPageView runat="server" ID="PageView3">
                                <telerik:RadChart ID="RadChart1" DataSourceID="SqlDataSource5" runat="server" OnItemDataBound="RadChart1_ItemDataBound"
                                    Width="465px" Height="260px" DefaultType="Pie" AutoLayout="true" AutoTextWrap="true"
                                    CreateImageMap="false">
                                    <ChartTitle>
                                        <TextBlock Text="Order Total">
                                        </TextBlock>
                                    </ChartTitle>
                                    <Series>
                                        <telerik:ChartSeries DataYColumn="spentMoney" Name="spentMoney" Type="Pie">
                                            <Appearance LegendDisplayMode="ItemLabels">
                                            </Appearance>
                                        </telerik:ChartSeries>
                                    </Series>
                                </telerik:RadChart>
                                <asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                                    SelectCommand="SELECT TOP 10 p.productId, p.ProductName as pName, sum(od.UnitPrice*od.Quantity) AS spentMoney, c.EmployeeID as cID, c.FirstName as cName FROM products as p, orders as o, [order details] as od, employees as c WHERE p.productID = od.productID and od.OrderID = o.OrderID and c.EmployeeID = o.EmployeeID and (c.EmployeeID = @EmployeeID) GROUP BY c.EmployeeID, c.FirstName, p.productID, p.ProductName, od.UnitPrice">
                                    <SelectParameters>
                                        <asp:ControlParameter ControlID="Label1" PropertyName="Text" Type="String" Name="EmployeeID" />
                                    </SelectParameters>
                                </asp:SqlDataSource>
                            </telerik:RadPageView>
                        </telerik:RadMultiPage>
                    </asp:Panel>
                </NestedViewTemplate>
                <Columns>
                    <telerik:GridBoundColumn SortExpression="FirstName" HeaderText="First Name" HeaderButtonType="TextButton"
                        DataField="FirstName" UniqueName="FirstName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="LastName" HeaderText="Last Name" HeaderButtonType="TextButton"
                        DataField="LastName" UniqueName="LastName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="Title" HeaderText="Title" HeaderButtonType="TextButton"
                        DataField="Title" UniqueName="Title">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="BirthDate" DataFormatString="{0:MM/dd/yyyy}"
                        HeaderText="Birth Date" HeaderButtonType="TextButton" DataField="BirthDate" UniqueName="BirthDate">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="City" HeaderText="City" HeaderButtonType="TextButton"
                        DataField="City" UniqueName="City">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="Country" HeaderText="Country" HeaderButtonType="TextButton"
                        DataField="Country" UniqueName="Country">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowDragToGroup="true" />
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Employees"
            runat="server"></asp:SqlDataSource>
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451