Rotator - DataSources

LinqDataSource
  • Customer image
    Maria Anders
    Berlin
    Germany
  • Customer image
    Ana Trujillo
    México D.F.
    Mexico
  • Customer image
    Antonio Moreno
    México D.F.
    Mexico
  • Customer image
    Thomas Hardy
    London
    UK
  • Customer image
    Christina Berglund
    Luleå
    Sweden
    
EntityDataSource
  • Customer image
    Maria Anders
    Berlin
    Germany
  • Customer image
    Ana Trujillo
    México D.F.
    Mexico
  • Customer image
    Antonio Moreno
    México D.F.
    Mexico
  • Customer image
    Thomas Hardy
    London
    UK
  • Customer image
    Christina Berglund
    Luleå
    Sweden
    
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
This example shows how to bind the RadRotator control to two .NET35 datasource - LINQ and Entity DataSources.
The databinding is the very simple and straightforward. These are the steps in order to bind to an LinqDataSource
  1. Add a new "LINQ to SQL classes" using Visual Studio's "Add New Item" dialog.
  2. Open "Server Explorer" view in Visual Studio and expand the tables in the desired Database
  3. Drag and drop the database table into the Design Surface area
  4. Add a new LinqDataSource control to the page where RadRotator is declared and configure it to use the newly created LINQ classes
  5. Set the RadRotator's DataSourceID to the one assigned to the LinqDataSource control.

You may also see how to utilize Telerik OpenAccess ORM as a data access layer for our AJAX controls by visiting the OpenAccess ORM live demos here.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.DataBinding.ServerSideBinding.DataSources.DefaultCS"CodeFile="DefaultCS.aspx.cs" Language="C#"  %>

<!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" type="text/css" />
</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">
        <fieldset class="fieldsetClass">
            <legend>LinqDataSource</legend>
            <telerik:RadRotator RenderMode="Lightweight" runat="server" ID="RadRotator1" DataSourceID="LinqDataSource1"
                ScrollDirection="Right" Width="600px" ItemWidth="300px" Height="120px" ItemHeight="120px">
                <ItemTemplate>
                    <div class="itemTemplateWithButtons">
                        <asp:Image ID="CustomerImage" runat="server" AlternateText="Customer image" ImageUrl='<%#Eval("CustomerID", "~/Img/Northwind/Customers/{0}.jpg")%>'
                            CssClass="customerImage"></asp:Image>
                        <div class="customerProp">
                            <div class="customerName">
                                <asp:Label ID="CustomerName" runat="server"><%# DataBinder.Eval(Container.DataItem,"ContactName") %></asp:Label>
                            </div>
                            <div class="customerCity">
                                <asp:Label ID="CustomerCity" runat="server"><%# DataBinder.Eval(Container.DataItem, "City")%></asp:Label>
                            </div>
                            <div class="customerCountry">
                                <asp:Label ID="CustomerCountry" runat="server"><%# DataBinder.Eval(Container.DataItem, "Country")%></asp:Label>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
        </fieldset>
    </div>
    <div class="demo-container">
        <fieldset class="fieldsetClass">
            <legend>EntityDataSource</legend>
            <telerik:RadRotator RenderMode="Lightweight" runat="server" ID="RadRotator2" DataSourceID="EntityDataSource1"
                ScrollDirection="Left" Width="600px" ItemWidth="300px" Height="120px" ItemHeight="120px">
                <ItemTemplate>
                    <div class="itemTemplateWithButtons">
                        <asp:Image ID="CustomerImage" runat="server" AlternateText="Customer image" ImageUrl='<%#Eval("CustomerID", "~/Img/Northwind/Customers/{0}.jpg")%>'
                            CssClass="customerImage"></asp:Image>
                        <div class="customerProp">
                            <div class="customerName">
                                <asp:Label ID="CustomerName" runat="server"><%# DataBinder.Eval(Container.DataItem,"ContactName") %></asp:Label>
                            </div>
                            <div class="customerCity">
                                <asp:Label ID="CustomerCity" runat="server"><%# DataBinder.Eval(Container.DataItem, "City")%></asp:Label>
                            </div>
                            <div class="customerCountry">
                                <asp:Label ID="CustomerCountry" runat="server"><%# DataBinder.Eval(Container.DataItem, "Country")%></asp:Label>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
        </fieldset>
        <%--Select 5 customers - LinqDataSource1_Selecting handler--%>
        <asp:LinqDataSource ID="LinqDataSource1" runat="server" OnSelecting="LinqDataSource1_Selecting">
        </asp:LinqDataSource>
        <%--Select 5 customers--%>
        <asp:EntityDataSource ID="EntityDataSource1" runat="server" ConnectionString="name=NorthwindReadOnlyEntities"
            DefaultContainerName="NorthwindReadOnlyEntities" CommandText="SELECT VALUE top(5) c from NorthwindReadOnlyEntities.Customers as c">
        </asp:EntityDataSource>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?