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

Pager Integration

  • 24
    Guaraná Fantástica

    Category: Beverages
    Unit Price: 4.50
    Units In Stock: 20
    Supplier: Refrescos Americanas LTDA
  • 34
    Sasquatch Ale

    Category: Beverages
    Unit Price: 14.00
    Units In Stock: 111
    Supplier: Bigfoot Breweries
  • 35
    Steeleye Stout

    Category: Beverages
    Unit Price: 18.00
    Units In Stock: 20
    Supplier: Bigfoot Breweries
  • 38
    Côte de Blaye

    Category: Beverages
    Unit Price: 263.50
    Units In Stock: 17
    Supplier: Aux joyeux ecclésiastiques
  • 39
    Chartreuse verte

    Category: Beverages
    Unit Price: 18.00
    Units In Stock: 69
    Supplier: Aux joyeux ecclésiastiques
  • 43
    Ipoh Coffee

    Category: Beverages
    Unit Price: 46.00
    Units In Stock: 17
    Supplier: Leka Trading
  • 67
    Laughing Lumberjack Lager

    Category: Beverages
    Unit Price: 14.00
    Units In Stock: 52
    Supplier: Bigfoot Breweries
  • 70
    Outback Lager

    Category: Beverages
    Unit Price: 15.00
    Units In Stock: 15
    Supplier: Pavlova, Ltd.
  • 75
    Rhönbräu Klosterbier

    Category: Beverages
    Unit Price: 7.75
    Units In Stock: 125
    Supplier: Plutzer Lebensmittelgroßmärkte AG
  • 76
    Lakkalikööri

    Category: Beverages
    Unit Price: 18.00
    Units In Stock: 57
    Supplier: Karkki Oy
  • 44
    Gula Malacca

    Category: Condiments
    Unit Price: 19.45
    Units In Stock: 27
    Supplier: Leka Trading
  • 61
    Sirop d'érable

    Category: Condiments
    Unit Price: 28.50
    Units In Stock: 113
    Supplier: Forêts d'érables
  • 63
    Vegie-spread

    Category: Condiments
    Unit Price: 43.90
    Units In Stock: 24
    Supplier: Pavlova, Ltd.
  • 65
    Louisiana Fiery Hot Pepper Sauce

    Category: Condiments
    Unit Price: 21.05
    Units In Stock: 76
    Supplier: New Orleans Cajun Delights
  • 66
    Louisiana Hot Spiced Okra

    Category: Condiments
    Unit Price: 17.00
    Units In Stock: 4
    Supplier: New Orleans Cajun Delights
    
  • Demo Configurator

Set Currently Shown Item By Its Index

The visible items shown in RadRotator can be controlled client-side by using its set_currentItemIndex method. This method sets the currently shown item by its index.

function showItemByIndex(index)
{
     // get reference to the rotator object
     var oRotator = $find("<%= RadRotator1.ClientID %>");
 
     // Set currently shown item by its index
     oRotator.set_currentItemIndex(index);
}
  • DefaultVB.aspx
  • ProductDetails.ascx
  • DefaultVB.aspx.vb
  • scripts.js
  • Styles.css
<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.PagerIntegration.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<!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" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</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 no-bg">
        <div class="rotatorCont">
            <div class="rotator">
                <telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" Skin="Silk" Width="470px" Height="364" ItemWidth="470px"
                                    ItemHeight="230" ScrollDuration="500" RotatorType="Buttons" DataSourceID="SqlDataSource1"
                                    OnDataBound="RadRotator1_DataBound" OnClientItemShown="OnClientItemShown" OnClientLoad="rotator_load">
                    <ItemTemplate>
                        <div class="itemTemplate">
                            <div class="imageStyle">
                                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ProductID", "~/Img/Northwind/Products/{0}.jpg") %>'
                                           AlternateText='<%# Eval("ProductID") %>'></asp:Image>
                            </div>
                            <div style="width: 200px; float: left; margin: 0 0 0 15px;">
                                <div style="padding-top: 20px;">
                                    <asp:Label CssClass="info" ID="ProductName" runat="server" Style="font-size: 24px;"><%# Eval("ProductName") %></asp:Label>
                                    <br />
                                    <br />
                                    <span class='title' style="color: #f00">Category:</span>
                                    <asp:Label CssClass="info" ID="Category" runat="server"><%# Eval("CategoryName")%></asp:Label>
                                    <br />
                                    <span class='title' style="color: #f00">Unit Price:</span>
                                    <asp:Label CssClass="info" ID="Label2" runat="server"><%# Eval("UnitPrice")%></asp:Label>
                                    <br />
                                    <span class='title' style="color: #f00">Units In Stock:</span>
                                    <asp:Label CssClass="info" ID="Label3" runat="server"><%# Eval("UnitsInStock")%></asp:Label>
                                    <br />
                                    <span class='title' style="color: #f00">Supplier:</span>
                                    <asp:Label CssClass="info" ID="Label6" runat="server"><%# Eval("CompanyName")%></asp:Label>
                                    <br />
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                    <ControlButtons LeftButtonID="leftBtn" RightButtonID="rightBtn"></ControlButtons>
                </telerik:RadRotator>
                <div class="links">
                    <asp:Panel ID="ButtonsContainer" CssClass="ButtonsContainer" runat="server" />
                    <a href="#" id="leftBtn" title="Rotate Left" class="leftButton"></a>
                    <a href="#" id="rightBtn" title="Rotate Right" class="rightButton"></a>
                </div>
            </div>
        </div>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                       ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP(15) * FROM [Products] INNER JOIN [Suppliers] ON Products.SupplierID=Suppliers.SupplierID INNER JOIN [Categories] ON Products.CategoryID=Categories.CategoryID">
    </asp:SqlDataSource>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                    <asp:ListItem Selected="True" Text="Change on mouseclick" Value="Mouseclick"></asp:ListItem>
                    <asp:ListItem Text="Change on mouseover" Value="Mouseover"></asp:ListItem>
                </asp:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance