Urgent Requirement plz:How to get the radrotator to be shown next when i clicked on controlbuttons in client side code

2 posts, 0 answers
  1. Meghanath Singh
    Meghanath Singh avatar
    5 posts
    Member since:
    Jun 2008

    Posted 15 Dec 2011 Link to this post


    I've a radrotator (which has property

    EnableRandomOrder="true"  and






     as below. In the attached image below, Next Item to be shown is Disease Analytics when i click on the ControlButtons in right side. How can i access the index/ item itself on click of the control button in javacript. I need the next item/previous item to be shown when i click on the controlbuttons in javascript only as I've to update the description of the selected item using ajaxmanager and also on random click on the radrotator item(which is an image) corresponding description has to be shown.
     Below is the javascript for

    <ControlButtons OnClientButtonClick="OnClientButtonClick" />

    function OnClientButtonClick(sender, args) {
        var objArgs;
        if (typeof sender._nextItemIndex === "undefined")
            objArgs = 0;
        else {
            if (sender._nextItemIndex == null)
                objArgs = 0;
                objArgs = sender._nextItemIndex;
        $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(objArgs);

    <telerik:RadAjaxManager ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
           runat="server" DefaultLoadingPanelID="LoadingPanel1">
               <telerik:AjaxSetting AjaxControlID="chkRotationType">
                       <telerik:AjaxUpdatedControl ControlID="radRotProducts" />
               <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                       <telerik:AjaxUpdatedControl ControlID="detailsPanel" />

    <telerik:RadAjaxPanel ID="AjaxPanel1" CssClass="rotNoButtonsBack" runat="server" LoadingPanelID="LoadingPanel1">
                          <div class="mainDiv">
                              <div class="rotatorBackground">
                                  <%-- ItemWidth and ItemHeight include 2x5(pixels) margin and 1x2(pixels) border --%>
                                  <telerik:RadRotator ID="radRotProducts" RotatorType="CarouselButtons" runat="server"
                                  EnableRandomOrder="true" PauseOnMouseOver="false"
                                  OnClientItemClicked="OnClientItemClicked"    Width="800px" Height="400px" CssClass="rotatorCarouselStyle" ItemHeight="200"
                                      FrameDuration="2000" ItemWidth="300" ScrollDuration="500">
                                          <asp:Image runat="server" ID="imgProduct" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"Image")%>'
                                              CssClass="RotatorItem" />
                                      <ControlButtons  OnClientButtonClick="OnClientButtonClick" />
  2. Slav
    Slav avatar
    1351 posts

    Posted 20 Dec 2011 Link to this post

    Hi Meghanath,

    You can get the current item index of the RadRotator on the client event OnClientButtonClick by retrieving the current item via the client method get_currentItem and then its index via get_index. Having this index, you can easily calculate the index of the item that will be selected  after the control button is clicked . The item itself can be referenced by getting the RadRotator's items via the client method get_items and pointing to the according item with the calculated index.

    You can find attached a sample page, demonstrating the suggested approach. Please use it as a reference for implementing your desired scenario.

    I would suggest checking the RadRotator Client-Side help article, containing a list of the RadRotator's client-side methods, which you may use to control the behavior of the control via JavaScript.

    All the best,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. DevCraft R3 2016 release webinar banner
Back to Top