Disable Scrolling if Not enough items to Scroll Through

5 posts, 0 answers
  1. virt
    virt avatar
    27 posts
    Member since:
    Sep 2008

    Posted 18 Nov 2009 Link to this post

    Hello,

    How can I disable the scrolling if I don't have enough items to scroll through? For example my rotator is high enough to display 3 items, and I want to disable the scrolling (nothing should happen when user tries to scroll) if there are 3 or less items in rotator. I still want Buttons to be displayed though.

    Thank you,
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Nov 2009 Link to this post

    Hello,

    You can stop scrolling Rotator when the number of items is less than 2 from clientside as shown below. Attach OnClientLoad event to RadRotator.

    JavaScript:
      
    function OnClientLoad(sender, args) {  
         
        itemCount = sender.get_items().length;  
        if (itemCount<=3)  
        {  
            sender.stop();  
        }  
    }  

    Another option is setting "RotatorType" as "FromCode" from server side if there is less than three items (work if you have not implemented any code to advance the items).

    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. virt
    virt avatar
    27 posts
    Member since:
    Sep 2008

    Posted 19 Nov 2009 Link to this post

    Shinu,

    Thank you for your reply. Setting RotatorType to FromCode will not work for me as this will "hide" the buttons altogether. I need buttons to be present, just not operational.

    The first solution that you proposed - setting OnClientLoad will not work either. As far as I understand it just stops automatic scrolling. I don't think I clearly explained what I need. I need to "disable" button scrolling. When user clicks buttons (up, down, left, right) - nothing should happen - no scrolling.

    Thank you,
    a.
  5. virt
    virt avatar
    27 posts
    Member since:
    Sep 2008

    Posted 20 Nov 2009 Link to this post

    I was able to use Shinu suggestion to get Rotator to execute my own function on button click using following:

    function OnClientLoad(sender, args) { 
       itemCount = sender.get_items().length; 
          if (itemCount <= 3) { 
             sender.add_buttonClick(abc); 
          } 
    function abc() { return false; } 
                                                     

    Now when I click Rotator buttons they do execute abc() function. The question is - how do I cancel scroll even from this function?

    Thanks,
    a.
  6. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 23 Nov 2009 Link to this post

    Hello Virt,

    In your scenario you could use this approach:

    Rotator's declaration:
    <telerik:RadRotator ID="rotatorSelectImage" runat="server" Width="140px" Height="100px"
        DataSourceID="XmlDataSource1" ScrollDuration="500" FrameDuration="2000" ItemHeight="100px"
        ItemWidth="100px" RotatorType="Buttons" Skin="Vista" OnClientLoad="OnRotatorLoad">
        <ItemTemplate>
            <div>
                <asp:Image ID="Image1" runat="server" CssClass="imgSize" ImageUrl='<%# XPath("ImageURL") %>'
                    AlternateText="IMAGE" />
            </div>
        </ItemTemplate>
    </telerik:RadRotator>


    The JavaScript handlers:
    <script type="text/javascript">
        function OnRotatorButtonClick(oRotator, args)
        {
            // Cancel
            args.set_cancel(true);
        }
     
        function OnRotatorLoad(oRotator, args)
        {
            if (oRotator.get_items().length < 3)
            {
                oRotator.add_buttonClick(OnRotatorButtonClick);
            }
        }
     
    </script>

    I hope this helps.

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