Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

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
 
 CompanyNameOrderIDOrder dateOrder Total
  Orders count: 123Last order dates: 5/6/1998 
Data pager
Data pager
Page size:
PageSizeComboBox
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.

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.

C# VB
Show code in new window Demo isolation steps
<%@ 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>Hierarchy with templates in ASP.NET AJAX Grid</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="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <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: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}">
                                                </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: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>
Telerik UI for ASP.NET AJAX Q3'14 Release is here