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

Detail Item Template

CategoryIDCategoryNameDescription
1BeveragesSoft drinks, coffees, teas, beers, and ales
CategoryImageChang
19.00		Guaraná Fantástica
4.50		Sasquatch Ale
14.00		Steeleye Stout
18.00		Côte de Blaye
263.50
2CondimentsSweet and savory sauces, relishes, spreads, and seasonings
CategoryImageChef Anton's Cajun Seasoning
22.00		Chef Anton's Gumbo Mix
21.35		Grandma's Boysenberry Spread
25.00		Northwoods Cranberry Sauce
40.00		Genen Shouyu
15.50
3ConfectionsDesserts, candies, and sweet breads
CategoryImageTeatime Chocolate Biscuits
9.20		Sir Rodney's Marmalade
81.00		Sir Rodney's Scones
10.00		NuNuCa Nuß-Nougat-Creme
14.00		Gumbär Gummibärchen
31.23
4Dairy ProductsCheeses
CategoryImageQueso Manchego La Pastora
38.00		Gorgonzola Telino
12.50		Mascarpone Fabioli
32.00		Geitost
2.50		Raclette Courdavault
55.00
5Grains/CerealsBreads, crackers, pasta, and cereal
CategoryImageTunnbröd
9.00		Singaporean Hokkien Fried Mee
14.00		Filo Mix
7.00		Gnocchi di nonna Alice
38.00		Ravioli Angelo
19.50
6Meat/PoultryPrepared meats
CategoryImageAlice Mutton
39.00		Thüringer Rostbratwurst
123.79		Perth Pasties
32.80		Tourtière
7.45		Pâté chinois
24.00
7ProduceDried fruit and bean curd
CategoryImageTofu
23.25		Rössle Sauerkraut
45.60		Manjimup Dried Apples
53.00		Longlife Tofu
10.00
8SeafoodSeaweed and fish
CategoryImageKonbu
6.00		Carnarvon Tigers
62.50		Nord-Ost Matjeshering
25.89		Inlagd Sill
19.00		Gravad lax
26.00

DetailItemTemplate is considered a part of the GridDataItem and is rendered in a new row right after the GridDataItem itself. The template is instantiated within a single cell that spans over the whole row/item.

There is a new item type in RadGrid - GridItemType.DetailTemplateItem. Due to the fact that the GridDetailTemplateItem is an integral part of the GridDataItem, ItemCreated and ItemDataBound events won't be triggered when it is created/bound. It is possible, however to get all items of type GridDetailTemplateItem by using the GetItems method of the GridTableView.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Styles.css
<%@ Page Language="C#" AutoEventWireup="true" Debug="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.GridExamplesCSharp.ColumnsAndRows.Rows.DetailItemTemplate.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div>
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="demo" DecoratedControls="All" EnableRoundedCorners="false" />
            <div class="demo-container" style="width: 800px">
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="EntityDS1"
                    OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound"
                    OnUnload="RadGrid1_Unload" Width="800px" CellSpacing="0" GridLines="None" Skin="Silk">
                    <MasterTableView DataKeyNames="CategoryID">
                        <Columns>
                            <telerik:GridBoundColumn DataField="CategoryID" UniqueName="CategoryID" HeaderText="CategoryID"
                                ItemStyle-Font-Size="11pt" />
                            <telerik:GridBoundColumn DataField="CategoryName" UniqueName="CategoryName" HeaderText="CategoryName"
                                ItemStyle-Font-Size="11pt" />
                            <telerik:GridBoundColumn DataField="Description" UniqueName="Description" HeaderText="Description"
                                ItemStyle-Font-Size="11pt" />
                        </Columns>
                        <DetailItemTemplate>
                            <asp:Table ID="ProductsTable" runat="server" CssClass="ProductTable">
                                <asp:TableRow Height="72px">
                                    <asp:TableCell>
                                        <asp:Image ID="CategoryImage" runat="server" AlternateText="CategoryImage" CssClass="CategoryImage" />
                                    </asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
                        </DetailItemTemplate>
                    </MasterTableView>
                    <HeaderStyle Font-Size="11pt" Height="25px" HorizontalAlign="Center" />
                    <ItemStyle HorizontalAlign="Center" Font-Size="10pt" />
                    <AlternatingItemStyle HorizontalAlign="Center" Font-Size="10pt" />
                </telerik:RadGrid>
            </div>
            <asp:EntityDataSource ID="EntityDS1" runat="server" ConnectionString="name=NorthwindReadOnlyEntities"
                DefaultContainerName="NorthwindReadOnlyEntities" EntitySetName="Categories" Select="it.[CategoryID], it.[CategoryName], it.[Description]">
            </asp:EntityDataSource>
        </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance