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

Data and layout templates

Employees
Company: Gourmet Lanchonetes
Name: André Fonseca
Title: Sales Associate
City: Campinas
Country: Brazil
Phone: (11) 555-9482
Contact Photo
Company: Great Lakes Food Market
Name: Howard Snyder
Title: Marketing Manager
City: Eugene
Country: USA
Phone: (503) 555-7555
Contact Photo
Company: Hanari Carnes
Name: Mario Pontes
Title: Accounting Manager
City: Rio de Janeiro
Country: Brazil
Phone: (21) 555-0091
Contact Photo
Company: Hungry Owl All-Night Grocers
Name: Patricia McKenna
Title: Sales Associate
City: Cork
Country: Ireland
Phone: 2967 542
Contact Photo
Company: Island Trading
Name: Helen Bennett
Title: Marketing Manager
City: Cowes
Country: UK
Phone: (198) 555-8888
Contact Photo
Company: Königlich Essen
Name: Philip Cramer
Title: Sales Associate
City: Brandenburg
Country: Germany
Phone: 0555-09876
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