Rotator not retaining the selection

[Kishan Gandikota]

Hi,

I have a RadRotator that shows the list of images and the rotator scrolls from top to bottom. I just want to illustrate my problem with an example. I have 5 images bound to the rotator control. At any point of time, only 2 images will show up. i scroll down and select image 4. I have OnItemClick event that does some action based on the image that i select. My objective is: I would want to retain the selection of 4th image (at least from the UI perspective). What is happening is: after the postback event, selection is lost in the radrotator event and rotator resets and shows the first item. Is there a way that i can retain the same image? I tried doing partial postback using AJAX to ensure rotator control is not updated. But even this didn't help. any help on this?

<telerik:RadRotator ID="thumbRotator" runat="server" RotatorType="Buttons" WrapFrames="false"
                        FrameDuration="1" ScrollDirection="Up, Down" OnItemClick="thumbRotator_ItemClick"
                        EnableEmbeddedSkins="false" Skin="FAPortalRotator" CssClass="rotatorVertical"
                        ItemWidth="300px" ItemHeight="225px">
                        <ItemTemplate>
                            <asp:Image ID="chartImage" runat="server" AlternateText="Image" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageURL")%>'
                                CssClass="thumbnail" />
                        </ItemTemplate>
                        <ControlButtons LeftButtonID="img_left" RightButtonID="img_right" />
                    </telerik:RadRotator>

Regards,
Kishan G K

[Marin Bratanov]

Hello Kishan,

Please examine the following help article, as it shows a neat approach that may help you achieve the desired behavior: http://www.telerik.com/help/aspnet-ajax/rotator-server-side-events.html and more specifically the fourth section, "OnItemClick event". In short - you need to set the rotator's initial item index to the index of the item that has been clicked:

protected void RadRotator1_ItemClick(object sender, RadRotatorEventArgs e)
{
    RadRotator rotator = sender as RadRotator;
    rotator.InitialItemIndex = e.Item.Index;// Persist the index
    //more custom functionality here
}

All the best,
Marin
the Telerik team

[Kishan Gandikota]

Hi Marin,

I have already read this article and tried this. What this is doing is: it is disturbing the order of images that is shown. I still want to retain the same order of images. So for my example: when i click on 4th image, rotator control will place this as the 1st image. I still want the image at their own positions but retaining the selection. Is there a way we can achieve that?

Regards,
Kishan G K

[Marin Bratanov]

Hello Kishan,

Indeed, the InitialItemIndex property sets the first item to be shown, it does not cycle to it. What I can suggest if this is not the desired behavior is that you inject a call to a JavaScript function that will use the set_currentItemIndex() client-side method of the RadRotator and use the index of the item that has been clicked that you get on the server.

For your convenience I created and attached a simple page that illustrates this approach. Please use this as basis to incorporate the functionality in your project. In the following link you can find a video from my experiment that shows the expected behavior: http://screencast.com/t/8QZ6ornD.


Kind regards,
Marin
the Telerik team

[Kishan Gandikota]

Hi Marin,

Thanks a lot!! I never knew there is a client side method "set_currentItemIndex" like this. Much appreciated!