Nested RadRotator not showing Images

2 posts, 0 answers
  1. Joby
    Joby avatar
    25 posts
    Member since:
    Nov 2010

    Posted 02 Apr 2012 Link to this post

    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
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 05 Apr 2012 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top