Nested RadRotator not showing Images

[Joby]

Hi,
I have nested radrotator means rotator inside rotator "     

ASPX
  
<telerik:RadRotator runat="server" ID="RadRotator1" RotatorType="AutomaticAdvance"
            Skin="Web20" SlideShowAnimation-Type="Fade" ScrollDirection="Up" Width="800px"
            ItemWidth="700px" Height="900px" ItemHeight="300px" FrameDuration="2000" OnItemDataBound="RadRotator1_ItemDataBound">
            <ItemTemplate>
                <div class="outerDiv">
                    <asp:HiddenField runat="server" ID="hdnParentId" Value='<%# DataBinder.Eval(Container.DataItem, "ParentId")%>' />
                    <telerik:RadRotator runat="server" ID="RadRotator2" RotatorType="AutomaticAdvance"
                        Skin="Web20" ScrollDirection="Left" Width="300px" FrameDuration="200" ItemWidth="300px"
                        Height="250px" ItemHeight="250px" OnItemDataBound="RadRotator2_ItemDataBound">
                        <ItemTemplate>
                            <asp:Image ID="CustomerImage" CssClass="recipeImage" Width="300px" Height="250px"
                                runat="server" AlternateText="Recipe Image" ImageUrl='<%#Eval("Name_Image", "~/IMAGES/{0}.jpg")%>' />
                        </ItemTemplate>
                    </telerik:RadRotator>
                    <div class="detail">
                        <div class="recipeName">
                            <asp:Label ID="lblRecipeName" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Menu_Compiler_Description")%>'></asp:Label>
                        </div>
                        <fieldset>
                            <legend>Recipe</legend>
                            <div class="recipe">
                                <%# DataBinder.Eval(Container.DataItem, "Recipe_Name")%>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </ItemTemplate>
            <SlideShowAnimation Type="Fade"></SlideShowAnimation>
        </telerik:RadRotator>"


Code Behind

 protected void RadRotator1_ItemDataBound(object sender, RadRotatorEventArgs e)
        {
            HiddenField hdnParentId = (HiddenField)e.Item.FindControl("hdnParentId");
            Telerik.Web.UI.RadRotator RadRotator2 = (Telerik.Web.UI.RadRotator)e.Item.FindControl("RadRotator2");
            DataSet ds = new DataSet();
            SqlHelper objSQL = new SqlHelper();
            ds = objSQL.ExecuteDataset("Test_Menu_Details", hdnParentId.Value);
            if (ds.Tables.Count > 0)
            {
                RadRotator2.DataSource = ds.Tables[0];
                RadRotator2.DataBind();
            }
        }

When i am executing this,Parent radrotator working correctly.Child radrotator after showing first image its not showing working.When i look into the RadRotator2_ItemDataBound event its working correctly and i can see the image bindings.

Thanks

[Slav]

Hello Joby,

It appears that the orientation of the outer RadRotator is altering the proper positioning of the inner rotator control's items. Please add the following CSS class in the head section of your page and specify it in the CssClass property of the inner RadRotator in order to ensure that its items will be ordered horizontally:

<style type="text/css">
    .innerRotator .rrClipRegion .rrItemsList li
    {
        float: left !important;
    }
</style>

<telerik:RadRotator runat="server" ID="RadRotator1" RotatorType="AutomaticAdvance"
    Skin="Web20" SlideShowAnimation-Type="Fade" ScrollDirection="Up" Width="800px"
    ItemWidth="700px" Height="900px" ItemHeight="300px" FrameDuration="2000" OnItemDataBound="RadRotator1_ItemDataBound">
    <ItemTemplate>
        <div class="outerDiv">
            <asp:HiddenField runat="server" ID="hdnParentId" Value='<%# DataBinder.Eval(Container.DataItem, "ParentId")%>' />
            <telerik:RadRotator runat="server" ID="RadRotator2" CssClass="innerRotator" RotatorType="AutomaticAdvance"
                Skin="Web20" ScrollDirection="Left" Width="300px" FrameDuration="200" ItemWidth="300px"
                Height="250px" ItemHeight="250px" OnItemDataBound="RadRotator2_ItemDataBound">
                <ItemTemplate>
                    <asp:Image ID="CustomerImage" CssClass="recipeImage" Width="300px" Height="250px"
                        runat="server" AlternateText="Recipe Image" ImageUrl='<%#Eval("Name_Image", "~/IMAGES/{0}.jpg")%>' />
                </ItemTemplate>
            </telerik:RadRotator>
            <div class="detail">
                <div class="recipeName">
                    <asp:Label ID="lblRecipeName" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Menu_Compiler_Description")%>'></asp:Label>
                </div>
                <fieldset>
                    <legend>Recipe</legend>
                    <div class="recipe">
                        <%# DataBinder.Eval(Container.DataItem, "Recipe_Name")%>
                    </div>
                </fieldset>
            </div>
        </div>
    </ItemTemplate>
    <SlideShowAnimation Type="Fade"></SlideShowAnimation>
</telerik:RadRotator>

Greetings,
Slav
the Telerik team