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

[Meghanath Singh]

Hi,

I've a radrotator (which has property

EnableRandomOrder="true"  and

 

PauseOnMouseOver

 

="false"

 

 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;
    debugger;
    if (typeof sender._nextItemIndex === "undefined")
        objArgs = 0;
    else {


        if (sender._nextItemIndex == null)
            objArgs = 0;
        else
            objArgs = sender._nextItemIndex;
    }
    //sender.get_currentItem().get_index();
    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(objArgs);

}

<telerik:RadAjaxManager ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
       runat="server" DefaultLoadingPanelID="LoadingPanel1">
       <AjaxSettings>

           <telerik:AjaxSetting AjaxControlID="chkRotationType">
               <UpdatedControls>
                   <telerik:AjaxUpdatedControl ControlID="radRotProducts" />
               </UpdatedControls>
           </telerik:AjaxSetting>
           <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
               <UpdatedControls>

                   <telerik:AjaxUpdatedControl ControlID="detailsPanel" />
               </UpdatedControls>
           </telerik:AjaxSetting>
       </AjaxSettings>
   </telerik:RadAjaxManager>

<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">
                                  <ItemTemplate>
                                      <asp:Image runat="server" ID="imgProduct" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"Image")%>'
                                          CssClass="RotatorItem" />
                                  </ItemTemplate>

                                  <ControlButtons  OnClientButtonClick="OnClientButtonClick" />
                              </telerik:RadRotator>

                          </div>
                      </div>
                  </telerik:RadAjaxPanel>

[Slav]

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,
Slav
the Telerik team