Rotate to a specific Item clientside

[Adam]

It appears that the clientside may be lacking this functionality or it's just not documented anywhere that I can find. If I have the index of the RotatorItem that I want to display in the rotator, how to do I tell the rotator to go to that specific item using javascript. I have multiple rotators on a page and I want to be able to make them all rotate to the same item when the user selects a different value in the drop down list. The one hang up is just getting them to go to the selected value.$0$0$0$0Thanks,$0$0Adam$0

[Georgi Tunev]

Hello Adam,

Currently InitialItemIndex can be set from the server only. It is in our ToDo list for one of the following updates to provide it in the client-side API as well.



Best wishes,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Malte Nørskov]

Hello.

It's been a while since this question was asked, so I'm wondering if its possible on the current version of the rotator?

Best regards,
Malte

[Fiko]

Hi Malte,

This feature is logged for implementation and we will do our best to add it in a subsequent build of RadRotator. Unfortunately, this task is not logged with high priority and I cannot tell you an exact estimate when it will be available. For the time being I recommend you use this approach in order to achieve the desired result.

I hope this helps.

Greetings,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Mike]

Hi. I have actually written a javascript function to do this. I have two rotators on a page that interact to make a custom image gallery. One rotator has the big image (one image only) and the other rotator has a bunch of little images (6 images at a time). When you click on the little image it loads that specific image in the big image rotator. Both rotators use the same XML datasource, which contains the image title, url, and description. I use a tooltipmanager to display the description when you hover over the big image:

<script  type="text/javascript">
     function MainFindImg(sender, args)
     {
          var mainRotator = $find('<%= _imgMainRotator.ClientID %>');
          var tinyRotator = $find('<%= _imgTinyRotator.ClientID %>');
          var mainImg = mainRotator.get_currentItem().get_index();
          var tinyImg = args.get_item().get_index();
          var orgScrollDur = mainRotator.get_scrollDuration
          mainRotator.set_scrollDuration = 200;

          if (tinyImg > mainImg)
          {
                while (mainImg < tinyImg)
                {
                     mainRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
                     mainImg++;
                }
          }
          else
          {
                while (mainImg > tinyImg)
                {
                     mainRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right);
                     mainImg--;
                }
          }

          mainRotator.set_scrollDuration = orgScrollDur;
     }

     function swap(imgId, state)
     {
          document.getElementById(imgId).src = "images/" + imgId + state + ".gif";
     }

     function MakeBigger(imgId)
     {
          document.getElementById(imgId).width="70";
          document.getElementById(imgId).height="41";
          document.getElementById(imgId).style.marginTop='4px';
          document.getElementById(imgId).style.marginLeft='1px';
     }

     function MakeSmaller(imgId)
     {
          document.getElementById(imgId).width="65";
          document.getElementById(imgId).height="38";
          document.getElementById(imgId).style.marginTop='6px';
          document.getElementById(imgId).style.marginLeft='3px';
     }
     var imgArray = new Array();
     var ctr = 0;
</script>
     <telerik:RadRotator ID="_imgMainRotator" RotatorType="FromCode" Skin="ANCustom" EnableEmbeddedSkins="false" ItemHeight="293" ScrollDirection="Left,Right" ScrollDuration="1000"
          DataSourceID="_imageXML" Width="510"  WrapFrames="false" Height="303"  BorderWidth="0" ItemWidth="510" CssClass="myRotator" runat="server">
          <ItemTemplate>
                 <img src="<%# XPath("url") %>.jpg" id="<%# XPath("url") %>" style="margin-left:8px;" alt="<%# XPath("url") %>" width="500" height="293" title="<%# XPath("url") %>" />
                 <asp:Label ID="_imgUrlLabel" Visible="false" runat="server"><%# XPath("url") %></asp:Label>
                 <script type="text/javascript">
                     imgArray[ctr] = '<%# XPath("url") %>';
                     ctr++;
                 </script>
          </ItemTemplate>
     </telerik:RadRotator>

     <div style="margin-left:15px;">
     <telerik:RadRotator ID="_imgTinyRotator" RotatorType="Buttons" Skin="ANCustom" EnableEmbeddedSkins="false" ItemHeight="49" ScrollDirection="Left,Right" ScrollDuration="1000"
          DataSourceID="_imageXML" Width="496" OnClientItemClicked="MainFindImg" WrapFrames="false" Height="53"  BorderWidth="0" ItemWidth="76" CssClass="myRotator" runat="server">
          <ItemTemplate>
                 <img src="<%# XPath("url") %>_sm.jpg" id="<%# XPath("url") %>_sm" style="margin-left:3px;margin-top:6px" onmouseover="MakeBigger('<%# XPath("url") %>_sm')" onmouseout="MakeSmaller('<%# XPath("url") %>_sm')" alt="Click to see..." width="65" height="38" title="<%# XPath("title") %>" />
          </ItemTemplate>
     </telerik:RadRotator>
     </div>
     <asp:XmlDataSource ID="_imageXML" XPath="images/image" runat="server"></asp:XmlDataSource>
     <telerik:RadToolTipManager ID="_tooltipMan" Skin="Office2007" Animation="Fade" Position="TopCenter" Width="438" ManualClose="false" RelativeTo="Element" OnAjaxUpdate="OnHover" runat="server"></telerik:RadToolTipManager>

     <script type="text/javascript">
        for (var i = 0; i < imgArray.length; i++)
        {
          var me = document.getElementById(imgArray[i]);
          me.removeAttribute("alt");
          me.removeAttribute("title");
        }
     </script>
</div>

[Malte Nørskov]

Hello Mike!

Thank you very much for responding to this thread, but I already started using another control since (I thought) the rotator did not have this function :o)

Kind regards,
Malte Nørskov Thy, Denmark

[Thomas]

what control did you end up using for this feature? was it a telerik control, or another product altogether?

there seems to be a surprising lack of functionality in some of these controls, and especially a surprising lack of documentation.

[Slav]

Hello Jordan,

The RadRotator has a setter function set_currentItemIndex for specifying the currently shown item by its index. You can find it in the RadRotator Client-Side help article.

Could you please provide more specific information about the features that are currently lacking in the RadControls for ASP.NET AJAX and which documentation articles need to be improved or added?

Greetings,
Slav
the Telerik team