This is a migrated thread and some comments may be shown as answers.

Rotator frame multiple rows

8 Answers 180 Views

Rotator

This is a migrated thread and some comments may be shown as answers.

sahil asked on 23 Jul 2009, 10:45 AM

    
            <%@ Page Language="C#" MasterPageFile="~/ShopMaster.master" AutoEventWireup="true" 
        
                Theme="ClientInner" CodeFile="" Inherits="" Title=" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik"%> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
               <table border="0" cellspacing="0" cellpadding="0" style="height: 200px;"> 
        
                   <tr> 
        
                   <td> 
        
                    <button onclick="$find('<%=thumbRotator.ClientID%>').showNext(Telerik.Web.UI.RotatorScrollDirection.Left);" 
        
                            type="button" > 
        
                        </button> 
        
                        <button onclick="$find('<%=thumbRotator.ClientID%>').showNext(Telerik.Web.UI.RotatorScrollDirection.Right);" 
        
                            type="button" > 
        
                        </button> 
        
                     </td> 
        
                   </tr> 
        
                    <tr> 
        
                        <td valign="top"> 
        
                                       <telerik:RadRotator ID="thumbRotator" 
        
                                       Width="960" 
        
                                       Height="960" 
        
                                      FrameDuration="100000" 
        
                                         ScrollDuration="500"  
        
                                         ItemWidth="240px"  
        
                                         RotatorType="FromCode" 
        
                                          AppendDataBoundItems="true" 
        
                                           ScrollDirection="Left" 
        
                                           SlideShowAnimation-Type="None" 
        
                                           SlideShowAnimation-Duration="500" 
        
                                           WrapFrames="false" 
        
                                           lo 
        
                                         runat="server" > 
        
                                        <ItemTemplate> 
        
                                        <table width="210" border="0" align="left" cellpadding="0" cellspacing="0"> 
        
                                                <tr> 
        
                                                    <td align="center" valign="middle"> 
        
                                                      <a href='NewsDetail.aspx?EID=<%# DataBinder.Eval(Container.DataItem,"NewsId")%>'> 
        
                                                      <img src='NewsImages/Thumb/<%# DataBinder.Eval(Container.DataItem,"ImagePath") %>'/> 
        
                                                         </a>     
        
                                                    </td> 
        
                                                </tr> 
        
                                                 <tr> 
        
                                            <td align="left" valign="top" class="mews_box_head"> 
        
                                             <%# Eval("Date") %> 
        
                                                <%# Eval ("Title") %> 
        
                                            </td> 
        
                                        </tr> 
        
                                        <tr> 
        
                                            <td align="left" valign="top"> 
        
                                                <div align="justify" width="236"> 
        
                                                <%# Eval("Description") %> 
        
                                                </div> 
        
                                            </td> 
        
                                        </tr> 
        
                                             </table> 
        
                                       </ItemTemplate> 
        
                                    </telerik:RadRotator> 
        
                           <br /> 
        
                         </td> 
        
                    </tr> 
        
                </table>

I have an rad rotator which is bind with list through database.

Problem::
I have to show 8 records on the page , 4 in first row and next 4 in second row.
when i click on next button , next records start from 9th to 16th shown on the same page.

1.) so how to make 2 rows , and insert 4 items in first row and other 4 items in second row in Item template of rad rotator???????
2.) when i will click on next button whole 8 frames are moved(mean 8 items are moved) and next 8 frames(mean next 8 items) are shown?????

Is these 2 things Possible.??

Thanks in advance.

8 Answers, 1 is accepted

answered on 07 Dec 2012, 08:34 AM

RadRotatorMultipleRows.zip

Hi Mashhoud,

I have attached a sample page that shows how to display two rows of images in a horizontally oriented RadRotator. You can use this example as a base for achieving the desired functionality.

Regards,
Slav
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 07 Dec 2012, 10:30 AM

Hi Fiko

I recieve your example and it was good, but the problem is when you pulling your data out of a database how you put your data in two tables?
I did that somehow by adding a counter to each datarow and show the odd rows in one rotator and the even rows in another one, but it's not very good, for example when you want to show an important data the order of showing those rows are very important and in this way it's nit possible to control it.
For a powerfull component like TELERIK, I think it's a bit of shame that not having a repeatcolumn property like datalist.
That's my opinion, no offence.

Best Regards

answered on 12 Dec 2012, 08:07 AM

Hi Mashhoud,

The RadRotator is designed to display one row/column of items, which is the expected scenario when you want to implement a rotation component. The functionality you suggest is not consistent with this type of control. If you have encountered rotator that implements this feature, please provide an example so that we can examine it.

Still, the RadRotator allows you to define the layout of every item, which can be used to display several rows/columns in one item. You have control over the items that will be displayed, as you can configure your data-source accordingly. In your case you want to display every odd and even datasource row in separate rotator rows. To do this you can create a new data-source, every record of which will contain two records from your original data-source - one from an even row and one from an odd row. Then you can data-bind the rotator to the new data-source and the HTML in the ItemTemplate of the rotator can be configured to display two rows, every one of which will use a record from the original data-source.

Regards,
Slav
the Telerik team