Grid - Hierarchy with Templates

Drag a column header and drop it here to group by that column
 First NameLast NameTitleBirth DateCityCountry
Data pager
Data pager
12
 Page 1 of 2, items 1 to 5 of 9.
NancyDavolioSales Representative12/08/1948SeattleUSA
 
 CompanyNameHyperLink ColumnOrderIDOrder dateOrder Total
   Orders count: 123Last order dates: 5/6/1998 
Data pager
Data pager
Page size:
PageSizeComboBox
select
 123 items in 18 pages
Ernst HandelSearch Google for 'Ernst Handel'1025807/17/1996$403.72
Wartian HerkkuSearch Google for 'Wartian Herkku'1027008/01/1996$1,376.00
Magazzini Alimentari RiunitiSearch Google for 'Magazzini Alimentari Riuniti'1027508/07/1996$15.36
QUICK-StopSearch Google for 'QUICK-Stop'1028508/20/1996$435.84
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
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
Isolate this demo as a stand-alone application

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.
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Hierarchy.NestedViewTemplate.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" 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>
    <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" />
    <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 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 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 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>
                                </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="460px">
                                <div class="contactWrap">
                                    <table cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td>
                                                <img src='<%# Page.ResolveUrl("~/Grid/Examples/Hierarchy/Hierarchy-with-templates/Img/") + (Container.FindControl("Label1") as 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>
                                                        <asp:BoundField HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" HeaderText="Country:"
                                                            DataField="Country"></asp:BoundField>
                                                        <asp:BoundField HeaderText="City:" DataField="City" HeaderStyle-Font-Italic="false"
                                                            HeaderStyle-Font-Bold="true"></asp:BoundField>
                                                        <asp:BoundField HeaderText="Address:" DataField="Address" HeaderStyle-Font-Italic="false"
                                                            HeaderStyle-Font-Bold="true"></asp:BoundField>
                                                        <asp:BoundField HeaderText="HomePhone:" DataField="HomePhone" HeaderStyle-Font-Italic="false"
                                                            HeaderStyle-Font-Bold="true"></asp:BoundField>
                                                    </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"></asp:ControlParameter>
                                                    </SelectParameters>
                                                </asp:SqlDataSource>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </telerik:RadPageView>
                            <telerik:RadPageView runat="server" ID="PageView3">
                                <telerik:RadHtmlChart runat="server" ID="PieChart1" Width="465px" Height="260px"
                                    DataSourceID="SqlDataSource5" Transitions="false">
                                    <ChartTitle Text="Browser Usage for April 2012">
                                        <Appearance Align="Center" Position="Top"></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">
            </ClientSettings>
        </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Employees"
        runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?