All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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);
}
<%@ 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>