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

Detail Item Template

CategoryIDCategoryNameDescription
1BeveragesSoft drinks, coffees, teas, beers, and ales
CategoryImageSasquatch Ale
14.00		Steeleye Stout
18.00		Côte de Blaye
263.50		Chartreuse verte
18.00		Ipoh Coffee
46.00
2CondimentsSweet and savory sauces, relishes, spreads, and seasonings
CategoryImageGula Malacca
19.45		Sirop d'érable
28.50		Vegie-spread
43.90		Louisiana Fiery Hot Pepper Sauce
21.05		Louisiana Hot Spiced Okra
17.00
3ConfectionsDesserts, candies, and sweet breads
CategoryImageSir Rodney's Marmalade
81.00		Sir Rodney's Scones
10.00		NuNuCa Nuß-Nougat-Creme
14.00		Gumbär Gummibärchen
31.23		Schoggi Schokolade
43.90
4Dairy ProductsCheeses
CategoryImageMascarpone Fabioli
32.00		Geitost
2.50		Raclette Courdavault
55.00		Camembert Pierrot
34.00		Gudbrandsdalsost
36.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
CategoryImageThüringer Rostbratwurst
123.79		Perth Pasties
32.80		Tourtière
7.45		Pâté chinois
24.00
7ProduceDried fruit and bean curd
CategoryImageManjimup Dried Apples
53.00		Longlife Tofu
10.00
8SeafoodSeaweed and fish
CategoryImageNord-Ost Matjeshering
25.89		Inlagd Sill
19.00		Gravad lax
26.00		Boston Crab Meat
18.40		Jack's New England Clam Chowder
9.65

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