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

Binding to ASP DataSource Components

RadRotator supports binding to all ASP.NET 2.0 DataSource components, including

  • AccessDataSource

  • SqlDataSource

  • XmlDataSource

  • ObjectDataSource

  • SiteMapDataSource

  • LinqDataSource

To bind to a DataSource component, all you need to do is set the DataSourceID property of the rotator to the ID of the DataSource component.

Bind to SqlDataSource

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT * FROM [Customers] WHERE Country = 'Argentina' OR Country = 'Austria' OR Country = 'Belgium' OR Country = 'Canada' OR Country = 'Denmark' OR Country = 'Finland' OR Country = 'Mexico' OR Country = 'Norway'">
</asp:SqlDataSource>
<telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" Width="305px" Height="114px"
    ScrollDuration="500" FrameDuration="2000" ItemHeight="110" ItemWidth="100" DataSourceID="SqlDataSource1">
    <ItemTemplate>
        <asp:Image ID="CustomerImage" runat="server" ImageAlign="Left" ImageUrl='<%# String.Format("~/Img/Northwind/Customers/Thumbs/{0}.jpg", DataBinder.Eval(Container.DataItem, "CustomerID")) %>' />
    </ItemTemplate>
</telerik:RadRotator>

Bind to XmlDataSource

<telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" RotatorType="AutomaticAdvance" ScrollDirection="Up"
    ScrollDuration="2000" runat="server" DataSourceID="XmlDataSource1" Width="500"
    Height="200" FrameDuration="0">
    <ItemTemplate>
        <div class="module" style="width: 500px">
            <strong><a href='<%# XPath("link") %>' target="_blank">
                <%# XPath( "title") %></a></strong>
            <%# XPath( "pubDate") %>
        </div>
    </ItemTemplate>
</telerik:RadRotator>
<asp:XmlDataSource ID="XmlDataSource1" XPath="rss/channel/item" runat="server" DataFile="https://www.telerik.com/support.rss">
</asp:XmlDataSource>

The AccessDataSource is a table-based DataSource component. It can be used to bind the rotator declaratively at design time.

<asp:AccessDataSource runat="server" ID="AccessDataSource1" DataFile="~/App_Data/Nwind.mdb"
    SelectCommand="SELECT * FROM [Customers]   WHERE Country = 'Argentina' OR Country = 'Austria' OR Country = 'Belgium' OR Country = 'Canada' OR Country = 'Denmark' OR Country = 'Finland' OR Country = 'Mexico' OR Country = 'Norway'">
</asp:AccessDataSource>

Both rotators from the screenshot below are bound to this data source

RotatorDeclarativeDataBinding

<telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" DataSourceID="AccessDataSource1"
    Width="300px" Height="114px" ScrollDirection="Right" RotatorType="AutomaticAdvance">
    <ItemTemplate>
        <div style="width: 300px; height: 110px;">
            <asp:Image ID="CustomerImage" runat="server" ImageAlign="Left" ImageUrl='<%# String.Format("~/Rotator/Img/Northwind/Customers/Thumbs/{0}.jpg", DataBinder.Eval(Container.DataItem, "CustomerID")) %>'
                CssClass="RotatorItem" />
            <span class="title">Name: </span>
            <asp:Label CssClass="info" ID="Name" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ContactName") %>'>          
            </asp:Label>
            <br />
            <span class="title">Company Name:</span>
            <asp:Label CssClass="info" ID="cName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "CompanyName")%>'></asp:Label>
            <br />
            <span class='title'>Contact Title:</span>
            <asp:Label CssClass="info" ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ContactTitle")%>'></asp:Label>
            <br />
            <span class='title'>Address:</span>
            <asp:Label CssClass="info" ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Address")%>'></asp:Label>
            <br />
            <span class='title'>City:</span>
            <asp:Label CssClass="info" ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "City")%>'></asp:Label>
            <br />
            <span class='title'>Country:</span>
            <asp:Label CssClass="info" ID="Label4" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Country")%>'></asp:Label>
        </div>
    </ItemTemplate>
</telerik:RadRotator>
<telerik:RadRotator RenderMode="Lightweight" ID="RadRotator2" runat="server" DataSourceID="AccessDataSource1"
    RotatorType="AutomaticAdvance" Width="104px" Height="144px" ScrollDirection="Down">
    <ItemTemplate>
        <asp:Image runat="server" ID="Image" ImageUrl='<%# String.Format("~/Rotator/Img/Northwind/Customers/Thumbs/{0}.jpg", DataBinder.Eval(Container.DataItem, "CustomerID")) %>'
            CssClass="RotatorItem" AlternateText="Customer Image" />
    </ItemTemplate>
</telerik:RadRotator>

See Also

In this article