Button RadRotator

[Christopher Susilraj]

Hi sir,
          We are using  button type radrotator sir....

Our need is images are showing in rad rotator by two rows sir...Normally It shows image single row only...

I have attach my screenshot file sir....

Please kindly check it and say how to use rotator in two rows nu sir....
 
I am waiting for your valuable answer sir.

Regards
Balaji.J

[Niko]

Hi,

Your best option is to create the rotator so that a single rotator item will consist of two images one on top of the other. The group of items will be rotated together.
Please, check the attached sample page for a sample implementation.

Greetings,
Niko
the Telerik team

[Christopher Susilraj]

Thanks for your kindly reply

But we are using the Single image column in table with Unique Id sir....
In your   sample code  the same image Name with same ID  displayed in two rows of Rotator sir....

In our project each images having Unique ID values sir....

The below Telerik Rotator attributes used in our project sir...

<telerik:RadRotator ID="radRotator" runat="server" Width="260px" Height="58px" ItemHeight="110px" WrapFrames="false"
                                            RotatorType="Buttons" OnItemClick="LinkButton1_Click" ItemWidth="100px"    Style="margin-left: 0px">
                                             <ItemTemplate>
                                                <div style=" margin-top: 0px;">
                                                    <img src='<%# Eval("image") %>' title='<%# Eval("SolutionManager") %>' style="cursor: pointer" />
                                                </div>
                                                <asp:HiddenField ID="RespondentId" runat="server" Value='<%# Eval("RespondentId") %>' />
                                                <asp:HiddenField ID="SolutionManager" runat="server" Value='<%# Eval("SolutionManager") %>' />
                                            </ItemTemplate>                                                
                                        </telerik:RadRotator>

I have also attached  Table Screenshot also sir.....

Our need is display images with unique Id values  in double rows of Radrotator sir...

Please kindly reply for my issue sir.....I am waiting for your valuable answer......


Regards
Balaji.J

[Niko]

Hi Balaji,

If that is the case, then you may wish to split the respondents in two different rotators, one above the other and thus they will look like one and the same rotator, but the different items will contain one image only. 
You may end up with the following implementation:

dRotator InitialItemIndex="4" ID="rotatorRow1" runat="server" Width="900" ItemWidth="300" Height="220" ItemHeight="220" FrameDuration="1" RotatorType="AutomaticAdvance" ScrollDuration="3000" PauseOnMouseOver="false">
    <ItemTemplate>
        <asp:Image ID="Image1" runat="server" SlideID='<%# Eval("id") %>' ImageUrl='<%# Eval("image") %>' AlternateText='<%# VirtualPathUtility.GetFileName(Eval("image").ToString()) %>' />
    </ItemTemplate>
</telerik:RadRotator>
<telerik:RadRotator InitialItemIndex="4" ID="rotatorRow2" runat="server" Width="900" ItemWidth="300" Height="220" ItemHeight="220" FrameDuration="1" RotatorType="AutomaticAdvance" ScrollDuration="3000" PauseOnMouseOver="false">
    <ItemTemplate>
        <asp:Image ID="Image1" runat="server" SlideID='<%# Eval("id") %>' ImageUrl='<%# Eval("image") %>' AlternateText='<%# VirtualPathUtility.GetFileName(Eval("image").ToString()) %>' />
    </ItemTemplate>
</telerik:Rad

Hope this helps.

Greetings,
Niko
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Christopher Susilraj]

Thanks sir,
                    Please explain with sample code for that two rotators how to store image with correspond Respondent values...

Please kindly send sample code sir.......


Regards
Balaji.J

[Niko]

Hello Balaji,

Please, find attached the sample implementation that I was created, resembling your use case.

All the best,
Niko
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Christopher Susilraj]

Thanks sir,
                   I saw your sample code sir, In your code your are using same images with same id values for tworotators sir,
But our need is each row showing different images  with unique Id value sir....

please kindly explain with sample code using different images in two rotators sir




Regards
Balaji.J

[Niko]

Hello Balaji,

The data source provided to the Rotator is of minor importance for this example. You can simply change the values in the code-behind file and thus you will get different images. All you need to do in your application scenario is divide the data that you have collected in two IEnumerable collections and supply them to the rotator. Here is a sample with different ids and different images:

rotatorRow1.DataSource = new[] {
    new { image = "~/content/motorcycles/1.png", id = 1 },
    new { image = "~/content/motorcycles/2.png", id = 2 },
    new { image = "~/content/motorcycles/3.png", id = 3 },
    new { image = "~/content/motorcycles/4.png", id = 4 }
};
rotatorRow2.DataSource = new[] {
    new { image = "~/content/motorcycles/5.png", id = 5 },
    new { image = "~/content/motorcycles/6.png", id = 6 },
    new { image = "~/content/motorcycles/7.png", id = 7 },
    new { image = "~/content/motorcycles/8.png", id = 8 }
};

Hope this helps.

All the best,
Niko
the Telerik team