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

Client-side Items Management

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
    

The RadRotator has three methods that allow the developer to manage the control's items on the client-side.

  • addRotatorItem(radRotatorItemData, index) - adds a new item to the RadRotator's client-side item collection at the specified index. The HTML markup of the new items is configured in the Html property of the radRotatorItemData object that is passed to this method. If the radRotatorItemData parameter is not specified, an empty item will be inserted. If the index parameter is not set, the new item will be added at the end of the collection.
    radRotatorItemData = {
         Html: "<div>Item's content</div>"
    };
  • removeRotatorItem(index) - removes an item from the RadRotator's client-side item collection. If the index parameter is not set, the last item from the collection will be removed.
  • clearItems() - clears the RadRotator's client-side item collection

Important: The changes, made via these methods, will affect only the client-side items collection and they will not be persisted on the server. The listed client-side methods are supported for all RadRotator modes, except CoverFlow and Carousel

This example illustrates how to use the RadRotator's Client API items management functions.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.ClientAPIControl.DefaultVB"CodeFile="DefaultVB.aspx.vb" Language="vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 type="text/javascript" src="scripts.js"></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="rotatorWrapper gradient">
            <telerik:RadRotator RenderMode="Lightweight" runat="server" ID="RadRotator1" Width="540" Height="113" ItemWidth="159"
                                ItemHeight="113" RotatorType="Buttons" Skin="Web20" OnClientLoad="rotator_load">
                <ItemTemplate>
                    <div style="width: 159px; height: 111px;">
                        <div class='buttonWrapper'>
                            <a href="#" onclick="AddRotatorItem(event); return false;" class="AddItem" title="Add item">
                            </a>
                            <a href="#" onclick="RemoveRotatorItem(event); return false;" class="RemoveItem"
                               title="Remove item"></a>
                        </div>
                        <span class='message'>
                        <%# Container.DataItem %>
                        </span>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
            <telerik:RadButton RenderMode="Lightweight" ID="rb1" runat="server" Text="Clear RadRotator" Skin="WebBlue"
                               CssClass="clearButton" AutoPostBack="false" OnClientClicked="OnClientClicked">
                <Icon PrimaryIconCssClass="rbRemove"></Icon>
            </telerik:RadButton>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance