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

Data and layout templates

Employees
Company: Blondesddsl père et fils
Name: Frédérique Citeaux
Title: Marketing Manager
City: Strasbourg
Country: France
Phone: 88.60.15.31
Contact Photo
Company: Bottom-Dollarhhh Markets
Name: Elizabeth Lincoln
Title: Accounting Manager
City: Tsawassen
Country: Canada
Phone: (604) 555-4729
Contact Photo
Company: Centro comercial Moctezuma
Name: Francisco Chang
Title: Marketing Manager
City: México D.F.
Country: Mexico
Phone: (5) 555-3392
Contact Photo
Company: Consolidated Holdings
Name: Elizabeth Brown
Title: Sales Representative
City: London
Country: UK
Phone: (171) 555-2282
Contact Photo
Company: Du monde entier
Name: Janine Labrune
Title: Owner
City: Nantes
Country: France
Phone: 40.67.88.88
Contact Photo
Company: Eastern Connection
Name: Ann Devon
Title: Sales Agent
City: London
Country: UK
Phone: (171) 555-0297
Contact Photo
CustomersNo records for customers available.
Categories Beverages - Soft drinks, coffees, teas, beers, and ales :: Condiments - Sweet and savory sauces, relishes, spreads, and seasonings :: Confections - Desserts, candies, and sweet breads :: Dairy Products - Cheeses :: Grains/Cereals - Breads, crackers, pasta, and cereal :: Meat/Poultry - Prepared meats :: Produce - Dried fruit and bean curd :: Seafood - Seaweed and fish

This example demonstrates the usage of data and layout templates in RadListView for ASP.NET AJAX. These templates allows you to define the look and feel of the common layout template of the control (LayoutTemplate), the items in it (ItemTemplate/AlternatingItemTemplate and ItemSeparatorTemplate) and the content that will be shown when there is no data available (EmptyDataTemplate).

Keep in mind that you need to specify ItemPlaceholderID property value for RadListView which matches the id of an ASP.NET server control (with id and runat=server properties set) which will be used as a holder of the actual listview data content. The three RadListView instances on the example have asp PlaceHolder and asp Panels defined inside their LayoutTemplates for this purpose.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>

<%@ 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 href="styles.css" rel="stylesheet" />
</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">
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator" runat="server" DecoratedControls="Fieldset" Skin="Silk" EnableRoundedCorners="false" />
        <telerik:RadListView ID="RadListView1" DataSourceID="SqlDataSource1" runat="server" RenderMode="Lightweight" 
            ItemPlaceholderID="EmployeesContainer" Skin="Silk">
            <LayoutTemplate>
                <fieldset class="layoutFieldset ">
                    <legend>Employees</legend>
                    <asp:PlaceHolder ID="EmployeesContainer" runat="server"></asp:PlaceHolder>
                </fieldset>
            </LayoutTemplate>
            <ItemTemplate>
                <fieldset class="itemFieldset">
                    <legend>Company:
                            <%#Eval("CompanyName")%>
                    </legend>
                    <table>
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td style="width: 25%">Name:
                                        </td>
                                        <td style="width: 50%">
                                            <%#Eval("ContactName")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Title:
                                        </td>
                                        <td>
                                            <%#Eval("ContactTitle")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>City:
                                        </td>
                                        <td>
                                            <%# Eval("City")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Country:
                                        </td>
                                        <td>
                                            <%# Eval("Country")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Phone:
                                        </td>
                                        <td>
                                            <%#Eval("Phone")%>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td class="contactPhoto">
                                <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo"
                                    ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# Eval("Photo") == DBNull.Value? new System.Byte[0]: Eval("Photo") %>'></telerik:RadBinaryImage>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </ItemTemplate>
            <AlternatingItemTemplate>
                <fieldset class="altItemFieldset">
                    <legend>Company:
                            <%#Eval("CompanyName")%>
                    </legend>
                    <table>
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td style="width: 25%">Name:
                                        </td>
                                        <td style="width: 50%;">
                                            <%#Eval("ContactName")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Title:
                                        </td>
                                        <td>
                                            <%#Eval("ContactTitle")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>City:
                                        </td>
                                        <td>
                                            <%# Eval("City")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Country:
                                        </td>
                                        <td>
                                            <%# Eval("Country")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Phone:
                                        </td>
                                        <td>
                                            <%#Eval("Phone")%>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td class="contactPhoto">
                                <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo"
                                    ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# Eval("Photo") == DBNull.Value? new System.Byte[0]: Eval("Photo") %>'></telerik:RadBinaryImage>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </AlternatingItemTemplate>
        </telerik:RadListView>
        <div style="clear: both">
        </div>
        <telerik:RadListView ID="RadListView2" runat="server" RenderMode="Lightweight" DataSourceID="SqlDataSource2"
            ItemPlaceholderID="EmptyDataHolder" Skin="Silk">
            <LayoutTemplate>
                <asp:Panel ID="EmptyDataHolder" runat="server">
                </asp:Panel>
            </LayoutTemplate>
            <EmptyDataTemplate>
                <fieldset class="layoutFieldset">
                    <legend>Customers</legend>No records for customers available.
                </fieldset>
            </EmptyDataTemplate>
        </telerik:RadListView>
        <telerik:RadListView ID="RadListView3" runat="server" DataSourceID="SqlDataSource3"
            ItemPlaceholderID="CategoryItemsHolder" DataKeyNames="CategoryID" Skin="Silk">
            <LayoutTemplate>
                <fieldset class="layoutFieldset">
                    <legend>Categories</legend>
                    <asp:Panel ID="CategoryItemsHolder" runat="server">
                    </asp:Panel>
                </fieldset>
            </LayoutTemplate>
            <ItemTemplate>
                <span><strong>
                    <%# Eval("CategoryName") %>
                        - </strong>
                    <%# Eval("Description")%>
                </span>
            </ItemTemplate>
            <ItemSeparatorTemplate>
                <span class="itemSeparator">::</span>
            </ItemSeparatorTemplate>
        </telerik:RadListView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 6 * FROM [CustomerPhotos]"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, ContactName, CompanyName, Country, City FROM Customers WHERE 1 = 0"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT CategoryID, CategoryName, Description FROM Categories"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance