ListView - Declarative Binding

SqlDataSource

Products
Category name: Beverages
Soft drinks, coffees, teas, beers, and ales
Category Photo
Category name: Condiments
Sweet and savory sauces, relishes, spreads, and seasonings
Category Photo
Category name: Confections
Desserts, candies, and sweet breads
Category Photo
Category name: Dairy Products
Cheeses
Category Photo
Category name: Grains/Cereals
Breads, crackers, pasta, and cereal
Category Photo
Category name: Meat/Poultry
Prepared meats
Category Photo
Category name: Produce
Dried fruit and bean curd
Category Photo
Category name: Seafood
Seaweed and fish
Category Photo

XmlDataSource

Cities New York :: Paris :: London :: Oslo :: Sofia :: Liverpool :: Seattle :: San Francisco :: Boston :: Miami :: Denver :: Dallas :: Madrid :: Barcelona :: Amsterdam :: Moscow :: Brussels :: Bonn :: Dublin :: St.Paul

ObjectDataSource

Shippers
Speedy Express (503) 555-9831
United Package (503) 555-3199
Federal Shipping (503) 555-9931
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadListView can be bound to the following ASP 2.x DataSource control types:

  • SqlDataSource
  • ObjectDataSource
  • XmlDataSource
  • AccessDataSource

All you need to do is set the DataSourceID property of the listview to the ID of the Data Source control. Then you can use ASP.NET binding expressions (Eval or Bind) for the fields that will be visualized in the control.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • ListView.xml
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.DataBinding.NET2DataSourceControls.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="H4H5H6" />
    <div class="demo-container">
        <h3>SqlDataSource</h3>
        <telerik:RadListView ID="RadListView1" RenderMode="Lightweight" DataSourceID="SqlDataSource1" runat="server"
            ItemPlaceholderID="ProductItemContainer" DataKeyNames="CategoryID">
            <LayoutTemplate>
                <fieldset>
                    <legend>Products</legend>
                    <asp:PlaceHolder ID="ProductItemContainer" runat="server"></asp:PlaceHolder>
                </fieldset>
            </LayoutTemplate>
            <ItemTemplate>
                <fieldset class="categoryFieldset">
                    <legend>Category name:
                        <%# Eval("CategoryName") %></legend>
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="categoryDescription">
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                            <%# Eval("Description")%>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td class="categoryImage">
                                <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Category Photo" CssClass="binaryImage"
                                    ToolTip="Category Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# Eval("Picture") %>'></telerik:RadBinaryImage>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </ItemTemplate>
        </telerik:RadListView>
        <br />
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td valign="top">
                    <h3>XmlDataSource</h3>
                    <telerik:RadListView ID="RadListView2" runat="server" RenderMode="Lightweight" DataSourceID="XmlDataSource1"
                        ItemPlaceholderID="CityItemsHolder">
                        <LayoutTemplate>
                            <fieldset>
                                <legend>Cities</legend>
                                <asp:Panel ID="CityItemsHolder" runat="server">
                                </asp:Panel>
                            </fieldset>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <span>
                                <%#Eval("Text") %></span>
                        </ItemTemplate>
                        <ItemSeparatorTemplate>
                            <span class="itemSeparator">::</span>
                        </ItemSeparatorTemplate>
                    </telerik:RadListView>
                </td>
                <td valign="top">
                    <h3>ObjectDataSource</h3>
                    <telerik:RadListView ID="RadListView3" runat="server" DataSourceID="ObjectDataSource1"
                        ItemPlaceholderID="ShippersHolder">
                        <LayoutTemplate>
                            <fieldset class="shipperFieldset">
                                <legend>Shippers</legend>
                                <asp:Panel ID="ShippersHolder" runat="server">
                                </asp:Panel>
                            </fieldset>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <table width="100%">
                                <colgroup>
                                    <col title="Shipper name" />
                                    <col title="Phone" />
                                </colgroup>
                                <tr>
                                    <td class="shipperCell">
                                        <%# Eval("CompanyName") %>
                                    </td>
                                    <td class="shipperCell">
                                        <%# Eval("Phone") %>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:RadListView>
                </td>
            </tr>
        </table>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT CategoryID, CategoryName, Description, Picture FROM Categories"></asp:SqlDataSource>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="ShippersDataSetTableAdapters.ShippersTableAdapter"
            SelectMethod="GetData"></asp:ObjectDataSource>
        <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="ListView.xml"></asp:XmlDataSource>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?