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

Pager Integration

  • 1
    Chai

    Category: Beverages
    Unit Price: 18.00
    Units In Stock: 39
    Supplier: Exotic Liquids
  • 2
    Chang

    Category: Beverages
    Unit Price: 19.00
    Units In Stock: 17
    Supplier: Exotic Liquids
  • 3
    Aniseed Syrup

    Category: Condiments
    Unit Price: 10.00
    Units In Stock: 13
    Supplier: Exotic Liquids
  • 4
    Chef Anton's Cajun Seasoning

    Category: Condiments
    Unit Price: 22.00
    Units In Stock: 53
    Supplier: New Orleans Cajun Delights
  • 5
    Chef Anton's Gumbo Mix

    Category: Condiments
    Unit Price: 21.35
    Units In Stock: 0
    Supplier: New Orleans Cajun Delights
  • 6
    Grandma's Boysenberry Spread

    Category: Condiments
    Unit Price: 25.00
    Units In Stock: 120
    Supplier: Grandma Kelly's Homestead
  • 7
    Uncle Bob's Organic Dried Pears

    Category: Produce
    Unit Price: 30.00
    Units In Stock: 15
    Supplier: Grandma Kelly's Homestead
  • 8
    Northwoods Cranberry Sauce

    Category: Condiments
    Unit Price: 40.00
    Units In Stock: 6
    Supplier: Grandma Kelly's Homestead
  • 9
    Mishi Kobe Niku

    Category: Meat/Poultry
    Unit Price: 97.00
    Units In Stock: 29
    Supplier: Tokyo Traders
  • 10
    Ikura

    Category: Seafood
    Unit Price: 31.00
    Units In Stock: 31
    Supplier: Tokyo Traders
  • 11
    Queso Cabrales

    Category: Dairy Products
    Unit Price: 21.00
    Units In Stock: 22
    Supplier: Cooperativa de Quesos 'Las Cabras'
  • 12
    Queso Manchego La Pastora

    Category: Dairy Products
    Unit Price: 38.00
    Units In Stock: 86
    Supplier: Cooperativa de Quesos 'Las Cabras'
  • 13
    Konbu

    Category: Seafood
    Unit Price: 6.00
    Units In Stock: 24
    Supplier: Mayumi's
  • 14
    Tofu

    Category: Produce
    Unit Price: 23.25
    Units In Stock: 35
    Supplier: Mayumi's
  • 15
    Genen Shouyu

    Category: Condiments
    Unit Price: 15.50
    Units In Stock: 39
    Supplier: Mayumi's
    
  • 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);
}
  • DefaultCS.aspx
  • ProductDetails.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • ProductDetails.ascx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.PagerIntegration.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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