Client Side Control of Rad Rotator

[Albert Shenker]

I have the following Rotator Markup:

<telerik:RadRotator ID="rotGallerySlide"

runat="server"

Height="400px"

Width="500px"

ItemHeight="400px"

ItemWidth="500px"

RotatorType="FromCode"

OnClientItemShowing="slideShowingHandler_GPC"

>

<ItemTemplate>

some templated controld

</ItemTemplate>

</telerik:RadRotator>  <   asp:Button ID="btnFirst" runat="server" Text=" << " OnClientClick="navigate_GPC('First'); return false;" style="margin:0px 5px;" /><asp:Button ID="btnBack" runat="server" Text=" < " OnClientClick="navigate_GPC('Back'); return false;" style="margin:0px 5px;" /><asp:Button ID="btnNext" runat="server" Text=" > " OnClientClick="navigate_GPC('Next'); return false;" style="margin:0px 5px;" /><asp:Button ID="btnLast" runat="server" Text=" >> " OnClientClick="navigate_GPC('Last'); return false;" style="margin:0px 5px;" />

and the following Javascript:

window.onload = function() {
                 setTimeout(function() {
                    var firstImg = document.getElementById("<%= btnFirst.ClientId %>");
                    var backImg = document.getElementById("<%= btnBack.ClientId  %>");
                    firstImg.disabled = true;
                    backImg.disabled = true;
                 }, 100);
             }

        function navigate_GPC(navType) {
            var rotator = $find("<%= rotGallerySlide.ClientID %>");

            switch (navType) {
                case "First":
                    break;

                case "Back":
                    rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right)
                    break;

                case "Next":
                    rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left)
                    break;

                case "Last":
                    break;

            }

        }

        function slideShowingHandler_GPC(sender, args) {

            var firstImg = document.getElementById("<%= btnFirst.ClientId  %>");
            var backImg = document.getElementById("<%= btnBack.ClientId  %>");
            var nextImg = document.getElementById("<%= btnNext.ClientId  %>");
            var lastImg = document.getElementById("<%= btnLast.ClientId  %>");

            firstImg.disabled = false;
            backImg.disabled = false;
            nextImg.disabled = false;
            lastImg.disabled = false;

            var count = sender.get_items().length;
            var currentIndex = args.get_item().get_index() + 1;


            if   (!sender.isScrollingForward()) {   if (currentIndex == 0) {
                firstImg.disabled = true;
                backImg.disabled = true;
            } }

            if (currentIndex == count - 1) {
                lastImg.disabled = true;
                nextImg.disabled = true;
            }

        }

First off, the back and First buttons are disabled when the page loads because the user will be on the first "slide". Then I handle the button OnClientClick and, depending on the parameter passed to the handler, I navigate through the Rotator.

Is there a way for me to wire up the "First" and "Last" buttons? I have looked high and low on the telerik site for a way to set the currentIndex of the rotator, but to no avail.

Question 2) I have encountered some strange behavior. I use the rotator ItemShowingHandler to determine the current item index. If it is the first item, I want to disable the "Back" and "First" buttons. If it is the last item, I want to disable the "Next" and "Last" buttons. My code seems to work fine, however what happens is the following. After the page loads, If I click on the "Next" button, everything works as expected. The rotator moves to the second slide, and the "Back" and "First" buttons are enabled. However, if I proceed to click on "Back", a postback occurs. I don't see how this is possible in my code, since I set return false; in the button onClientClick attribute. I notice that if I don't set the button disabled property in the Window on load event, then the postback doesn't occur. The postback occurs whether I set the disabled property in window onload or in code behind in the page load event. Is there something about  disabling a button during page load that screws up the OnClientClick Event? Is there another point in which I can disable the buttons to avoid this prior to the page being shown?

[Fiko]

Hello Albert,

The provided code cannot be run because the ClientId is not a valid property for a server control. For example the btnFirst.ClientId should be changed to btnFirst.ClientID.  That is why I used a part of the provided code and implemented the desired behavior in a project and attached it to the thread. The code is rich commented and you could examine it and point the differences from your code. In the project I used this approach to implement the moving to First and Last items feature.

Please do not hesitate to contact us if you have any further problems.

Greetings,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Albert Shenker]

I made one change to your code because it seems you never "enabled' the opposite buttons when "First" or "Last" were clicked on:

function rotatorLoadHandler_GPC(sender, eventArgs) {
             if (sender.get_initialItemIndex() == (sender.get_items().length - 1)) {// If the "Last" button is clicked ;
                 disableRightButtons(true);
                 disableLeftButtons(false);  // I added this
             }
             else {// The rotator loads for the first time or the "First" button is clicked ;
                 disableRightButtons(false); // I added this
                 disableLeftButtons(true);
             }
         }

Also, when I click on "First", it seems the rotator navigates back one slide and then once the ajax kicks in, goes to the first slide. Any idea why this happens?

Lastly, (asside from the issue I just mentioned), this all works reasonably well. However, using an ajaxupdate to navigate ratator slides seems ilke an awful lot of overkill. I realize the Rotator is one of your older controls. I hope you guys will be releasing an update soon that includes the full client-side functionality (that one might expect)

By the way, since it seems you guys are keen on developing some more complicated controls (a-la the File Explorer control), you might look into the developmet of a "Gallery" or "Slide Show" control. I am building mine on top of the rad rotator. At this point it works reasonably well, though with some of the current limitations or rad rotator. I don't know if you guys would build it on top of rad rotator, like I did, but either way, this control would really be pretty simple. There would be a "SlideTemplate"  or "Step Template" that would allow the user to display any controls. Upon binding, the user could wire into the binding event to populate the template any way they want, or use some declarative binding techniques in the template. The key to the "Gallery" control would be the navigation buttons. You would ned standard "First", "Back", "Next" and "Last" Buttons. I more feature-rich implementation could introdue "Play" and "Pause" buttons to allow the user to play all slides with a certain duration... maybe even provide a slider or something that allows the user to change the play speed

[Albert Shenker]

I found out what was causing the issue I described with the scroller shifting during the ajax request. It was becuase I had a missing break; line in my code. Thanks for your help. I look forward to the client-side improvements in RadRotator. Is it wishful thinking to believe these might be part of the Q3 '09 release?

[Fiko]

Hello Albert,

In the project that I provided, the buttons are enabled by default and the code that you added is not necessary in this case. When the rotator is updated its OnClientLoad event is fired and the buttons are disabled depending on the current item index. If this index is 0 (the first button is clicked or the rotator loads for the first time) then the left buttons are disabled. Respectively, when the last button is clicked the left buttons are disabled.
We are currently working on implementing a client side function that will allow the initial path to be set on the client and we will do our best to implement it in one of the next releases.



Regards,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Rodrigo Selada]

Hi!

I was looking for the exact same functionality than Shenker: The first and last button client side support.

I have other projects where I use SlideShow control of the ASP.NET AJAX Control Toolkit which, among other things, let the client set the current visible item. I believe this is a demanding feature. It's senseless to do a partial postback to change the exhibit of something that is already fully loaded at the client. I'll be looking forward for it's support.


Regards,

Rodrigo S.

[Fiko]

Hello Rodrigo,

Selecting the currently shown item on the client is in our ToDo list and we will do our best to implement it in one of the future releases.

All the best,
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.