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

Data and layout templates

Employees
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: FISSA Fabrica Inter. Salchichas S.A.
Name: Diego Roel
Title: Accounting Manager
City: Madrid
Country: Spain
Phone: (91) 555 94 44
Contact Photo
Company: Folk och fä HB
Name: Maria Larsson
Title: Owner
City: Bräcke
Country: Sweden
Phone: 0695-34 67 21
Contact Photo
Company: Frankenversand
Name: Peter Franken
Title: Marketing Manager
City: München
Country: Germany
Phone: 089-0877310
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