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

Data and layout templates

Employees
Company: Berglunds snabbköp
Name: Christina Berglund
Title: Order Administrator
City: Luleå
Country: Sweden
Phone: 0921-12 34 65
Contact Photo
Company: Blauer See Delikatessen
Name: Hanna Moos 1
Title: Sales Representative
City: Mannheim
Country: Germany
Phone: 0621-08460
Contact Photo
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: Chop-suey Chinese
Name: Yang Wang
Title: Owner
City: Bern
Country: Switzerland
Phone: 0452-076545
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.

  • DefaultVB.aspx
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false"  %>

<%@ 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" EnableRoundedCorners="false" Skin="Silk" />
        <telerik:RadListView ID="RadListView1" DataSourceID="SqlDataSource1" runat="server" RenderMode="Lightweight" Skin="Silk"
            ItemPlaceholderID="EmployeesContainer">
            <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='<%# IIf(Eval("Photo") IsNot DBNull.Value, Eval("Photo"),New System.Byte(-1) {})%>'></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='<%# IIf(Eval("Photo") IsNot DBNull.Value, Eval("Photo"),New System.Byte(-1) {})%>'></telerik:RadBinaryImage>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </AlternatingItemTemplate>
        </telerik:RadListView>
        <div style="clear: both">
        </div>
        <telerik:RadListView ID="RadListView2" runat="server" RenderMode="Lightweight" DataSourceID="SqlDataSource2" Skin="Silk"
            ItemPlaceholderID="EmptyDataHolder">
            <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" Skin="Silk"
            ItemPlaceholderID="CategoryItemsHolder" DataKeyNames="CategoryID">
            <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