ListView - Data and layout templates

Employees
Company: Ana Trujillo Emparedados y helados
Name: Ana Trujillo
Title: Owner
City: México D.F.
Country: Mexico
Phone: (5) 555-4729
Contact Photo
Company: Antonio Moreno Taquería
Name: Antonio Moreno
Title: Owner
City: México D.F.
Country: Mexico
Phone: (5) 555-3932
Contact Photo
Company: Around the Horn
Name: Thomas Hardy
Title: Sales Representative
City: London
Country: UK
Phone: (171) 555-7788
Contact Photo
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
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
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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?