Rotate to a specific Item clientside

8 posts, 0 answers
  1. Adam
    Adam avatar
    177 posts
    Member since:
    Oct 2012

    Posted 12 Sep 2008 Link to this post

    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
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 16 Sep 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Malte Nørskov
    Malte Nørskov avatar
    2 posts
    Member since:
    Dec 2009

    Posted 21 Dec 2009 Link to this post

    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
  5. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 24 Dec 2009 Link to this post

    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.
  6. Mike
    Mike avatar
    6 posts
    Member since:
    Jun 2009

    Posted 27 Jan 2010 Link to this post

    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> 
  7. Malte Nørskov
    Malte Nørskov avatar
    2 posts
    Member since:
    Dec 2009

    Posted 11 Feb 2010 Link to this post

    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
  8. Jordan
    Jordan avatar
    3 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    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.
  9. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 28 Mar 2013 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017