[Solved] Disable Scrolling if Not enough items to Scroll Through

[virt]

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,

[Shinu]

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.

[virt]

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.

[virt]

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.

[Fiko]

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.