New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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
 
  • Sales
  • Contact Information
  • Statistics Chart
 CompanyNameHyperLink ColumnOrderIDOrder dateOrder Total
   Orders count: 117Last order dates: 5/5/1998 
Page size:
Tradição HipermercadosSearch Google for 'Tradição Hipermercados'1029208/28/1996$1,296.00
Tortuga RestauranteSearch Google for 'Tortuga Restaurante'1029308/29/1996$848.70
Tortuga RestauranteSearch Google for 'Tortuga Restaurante'1030409/12/1996$954.40
Romero y tomilloSearch Google for 'Romero y tomillo'1030609/16/1996$498.50
Du monde entierSearch Google for 'Du monde entier'1031109/20/1996$268.80
Rattlesnake Canyon GrocerySearch Google for 'Rattlesnake Canyon Grocery'1031409/25/1996$232.70
Rattlesnake Canyon GrocerySearch Google for 'Rattlesnake Canyon Grocery'1031609/27/1996$2,835.00
Customer Image
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

This feature of RadGrid gives you the freedom to design the overall structure and appearance of detail tables in hierarchical grid. Thus based on your custom preferences you have the ability model the look and feel of the child table container in order to display the detail info in non table-dependant format.  The functionality is especially useful when you would like to present the related content providing separate view for each detail item or tabs for navigation between the entries.

The detail table template should be specified between the NestedViewTemplate tags of its parent GridTableView. The template will appear when you expand the respective parent item. Keep in mind that it is up to you to decide how to define the relation between the parent and child data in order to filter the data visualized in the detail template. Also note that when you set NestedView template at a given level the regular detail tables definitions you may at the same level will be disregarded.

Instructions

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 presents 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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.GridExamplesVBNET.Hierarchy.NestedViewTemplate.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
     <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" OnPreRender="RadGrid1_PreRender" DataSourceID="SqlDataSource1"
        runat="server" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"
        AllowPaging="True" PageSize="5" GridLines="None" ShowGroupPanel="true" OnItemCreated="RadGrid1_ItemCreated"
        OnItemCommand="RadGrid1_ItemCommand">
        <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 RenderMode="Lightweight" 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"></asp:Label>
                            <telerik:RadGrid RenderMode="Lightweight" 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"></telerik:GridRelationFields>
                                            </ParentTableRelation>
                                            <Columns>
                                                <telerik:GridHyperLinkColumn SortExpression="ProductName" DataTextFormatString="Search Google for '{0}'"
                                                    DataNavigateUrlFields="ProductName" UniqueName="ProductName" DataNavigateUrlFormatString="http://www.google.com/search?hl=en&amp;q={0}&amp;btnG=Google+Search"
                                                    HeaderText="HyperLink Column" DataTextField="ProductName">
                                                </telerik:GridHyperLinkColumn>
                                                <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}">
                                                </telerik:GridCalculatedColumn>
                                            </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:GridHyperLinkColumn SortExpression="CompanyName" DataTextFormatString="Search Google for '{0}'"
                                            DataNavigateUrlFields="CompanyName" UniqueName="CompanyName" DataNavigateUrlFormatString="http://www.google.com/search?hl=en&amp;q={0}&amp;btnG=Google+Search"
                                            HeaderText="HyperLink Column" DataTextField="CompanyName">
                                        </telerik:GridHyperLinkColumn>
                                        <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>
                                <ClientSettings AllowDragToGroup="true">
                                    <Scrolling AllowScroll="true" ScrollHeight="" />
                                </ClientSettings>
                                <PagerStyle PageButtonCount="3" Mode="NextPrevAndNumeric" ShowPagerText="false" />
                            </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"></asp:ControlParameter>
                                </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"></asp:SessionParameter>
                                </SelectParameters>
                            </asp:SqlDataSource>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="PageView2" Width="100%">
                            <telerik:RadListView runat="server" ID="RadListView" DataSourceID="SqlDataSource4" ItemPlaceholderID="CustomersContainer"
                                OnPreRender="RadListView_PreRender">
                                <LayoutTemplate>
                                    <div class="contactWrap RadListView RadListView_<%# Container.Skin %>">
                                        <asp:PlaceHolder ID="CustomersContainer" runat="server"></asp:PlaceHolder>
                                    </div>
                                </LayoutTemplate>
                                <ItemTemplate>
                                    <div class="template">
                                        <img src='<%# Page.ResolveUrl("~/Grid/Examples/Hierarchy/Hierarchy-with-templates/Img/") & Eval("EmployeeID")  %>.jpg'
                                            alt="Customer Image" />
                                        <table cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td class="title">Country:</td>
                                                <td><%# Eval("Country") %></td>
                                            </tr>
                                            <tr>
                                                <td class="title">City:</td>
                                                <td><%# Eval("City") %></td>
                                            </tr>
                                            <tr>
                                                <td class="title">Address:</td>
                                                <td><%# Eval("Address") %></td>
                                            </tr>
                                            <tr>
                                                <td class="title">HomePhone:</td>
                                                <td><%# Eval("HomePhone") %></td>
                                            </tr>
                                        </table>
                                    </div>
                                </ItemTemplate>
                            </telerik:RadListView>
                            <asp:SqlDataSource ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                                ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmployeeID, Country, City, Address, HomePhone FROM Employees Where EmployeeID = @EmployeeID"
                                runat="server">
                                <SelectParameters>
                                    <asp:ControlParameter ControlID="Label1" PropertyName="Text" Type="String" Name="EmployeeID"></asp:ControlParameter>
                                </SelectParameters>
                            </asp:SqlDataSource>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="PageView3">
                            <telerik:RadHtmlChart runat="server" ID="PieChart1" Height="260px" Width="420px" OnPreRender="PieChart1_PreRender"
                                DataSourceID="SqlDataSource5" Transitions="false">
                                <Appearance>
                                    <FillStyle BackgroundColor="Transparent" />
                                </Appearance>
                                <ChartTitle Text="Browser Usage for April 2012">
                                    <Appearance Align="Center" Position="Top">
                                        <TextStyle Margin="0 0 20 0" />
                                    </Appearance>
                                </ChartTitle>
                                <Legend>
                                    <Appearance Position="Right" Visible="true">
                                    </Appearance>
                                </Legend>
                                <PlotArea>
                                    <Series>
                                        <telerik:PieSeries StartAngle="90" DataFieldY="spentMoney" NameField="pName">
                                            <LabelsAppearance Position="OutsideEnd">
                                            </LabelsAppearance>
                                        </telerik:PieSeries>
                                    </Series>
                                </PlotArea>
                            </telerik:RadHtmlChart>
                            <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"></asp:ControlParameter>
                                </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">
            <Scrolling AllowScroll="true" ScrollHeight="" />
        </ClientSettings>
    </telerik:RadGrid>
        </div>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Employees"
        runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance