Configure number of items to be scrolled

5 posts, 1 answers
  1. Vinod
    Vinod avatar
    1 posts
    Member since:
    Mar 2012

    Posted 08 May 2012 Link to this post

    Hi,
    Currently in one of our application we are planning to use RadRotator for rotating the items (e.g. Images) on click of left , right buttons. I found this can be achieved by setting the RotatorType="Buttons" in RadRotator. We have a requirement that, the number of items displayed and number of items scrolled on click of left or right button is configurable. From documentation i figured out how to configure the number of items to be displayed (i.e. by setting ItemWidth and Width properties appropriately). Is there any way to configure the number of items to be scrolled on click of right or left button.
    Thanks in advance.

  2. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 11 May 2012 Link to this post

    Hello Vinod,

    The number of rotated items in a RadRotator cannot be modified out-of-the-box. Nevertheless, such functionality can be implemented via the client-side API of the rotator control by setting its property RotatorType to FromCode, adding two HTML elements that will be used as control buttons and handling the onclick event of these elements in order to scroll the RadRotator.

    For your convenience I have prepared an example that demonstrates the suggested approach. The value of the select element determines how many items should be rotated. Please use the attached sample as a reference for incorporating the desired feature into your actual project.

    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
  4. Jaime
    Jaime avatar
    12 posts
    Member since:
    Feb 2013

    Posted 06 Feb 2013 Link to this post

    I used the sample code you provided and keep getting an error message telling me that the get_frameDuration object is null or undefined. I took the javascript code from your sample and added it to a seperate js file which I am able to debug and can see how the getRotaror function is not returning a ClientID so the variable rotator is actually null. I can seem to find the reason for this so I thought maybe you could take a look at the code and let me know what you see.

    Thanks for any help/suggestion you could provide.

    My ascx code;

    <a href="javascript:;" onclick="showNextItem(Telerik.Web.UI.RotatorScrollDirection.Right); return false;"
                style="float: left;"><asp:Image ID="LeftArrow" runat="server" ImageUrl="/DesktopModules/Summary/i/LeftArrow.png" /></a>
    <telerik:radrotator runat="server" id="summaryScoreList" CssClass="horizontalRotator" ScrollDuration="500" FrameDuration="2000" width="970px" Height="305px" itemheight="303px" Skin="Black" rotatortype="FromCode">   
                <ItemTemplate>
                    <div class="span_3 col Dashboard_lst" style="background: url('<%=ModulePath%>i/MetricTiles.png'); background-position: center; width: 310px; height: 303px; padding-left: 1em;">
                        <div class="ProdDesc">
                            <asp:Label ID="txtScore1Title" cssClass="ProdDesc_1" Text='<%# DataBinder.Eval(Container.DataItem, "Score1Title") %>' runat="server"></asp:Label><br />
                            <asp:Label ID="lblScore1Descr" cssClass="ProdDesc_2" Text='<%# DataBinder.Eval(Container.DataItem, "Score1Descr") %>' runat="server"></asp:Label>
                        </div>
                        <br />
                        <div class="Score">
                            <asp:Label ID="lblScore1" cssclass="Score_Label" Text='<%# getValue(DataBinder.Eval(Container.DataItem, "Score1"), DataBinder.Eval(Container.DataItem, "ScoreType")) %>' runat="server"></asp:Label>
                            <asp:Label id="lblOrdinal1Descr" runat="server" cssclass="OrdinalDescr" Text='<%# DataBinder.Eval(Container.DataItem, "Ordinal1Descr") %>' />
                        </div>
                        <div style="margin-right: 1em; margin-top: .3em;">
                            <asp:ImageButton ID="btnMoreInfo" runat="server" ImageUrl='/DesktopModules/Summary/i/MoreInfo.png' ImageAlign="right" />
                        </div>
                        <br />
                        <div class="second_score">
                            <asp:Label ID="txtScore2Title" Text='<%# DataBinder.Eval(Container.DataItem, "Score2Title") %>' runat="server"></asp:Label>
                            <asp:Label ID="lblScore2" Text='<%# getValue(DataBinder.Eval(Container.DataItem, "Score2"),DataBinder.Eval(Container.DataItem, "ScoreType")) %>' runat="server"></asp:Label>
                            <asp:Label id="lblOrdinal2Descr" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Ordinal2Descr") %>' /> 
                    <asp:Label ID="txtScore3Title" Text='<%# DataBinder.Eval(Container.DataItem, "Score3Title") %>' runat="server"></asp:Label>
                            <asp:Label ID="lblScore3" Text='<%# getValue(DataBinder.Eval(Container.DataItem, "Score3"),DataBinder.Eval(Container.DataItem, "ScoreType")) %>' runat="server"></asp:Label>
                            <asp:Label id="lblOrdinal3Descr" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Ordinal2Descr") %>' />
                        </div>
                        <br />
                        <div>
                            <div>
                                <asp:Label ID="lblChart" CssClass="lblChart" Text="Chart Goes Here" runat="server"></asp:Label>
                            </div>
                        </div>
                        <div>
                            <asp:Label ID="txtChartDescr" CssClass="lblChart" Text="Chart Description Goes Here" runat="server"></asp:Label>
                        </div>
                    </div>
                </ItemTemplate>  
    </telerik:radrotator>
    <a href="javascript:;" onclick="showNextItem(Telerik.Web.UI.RotatorScrollDirection.Left); return false;">
                <asp:Image ID="RightArrow" runat="server" ImageUrl="/DesktopModules/Summary/i/RightArrow.png" /></a>


    My js code;
    function getRotator() {
        return $find("<%=dnn_ctr413_View_summaryScoreList.ClientID %>");
    }
     
    function showNextItem(direction) {
        var slidesCount = 1; // gets the number of slides
        var rotator = getRotator(); // references the rotator control
        var frameDuration = rotator.get_frameDuration(); // stores the current FrameDuration of RadRotator
     
        rotator.set_frameDuration(0); // the FrameDuration is set to 0 in order to achieve a smooth sliding
        // the number of slides are made via the showNext method and by setting an interval
        rotator.showNext(direction);
        if (slidesCount > 1) {
            var x = 0;
            var intervalID = setInterval(function () {
                getRotator().showNext(direction);
                if (++x == parseInt(slidesCount - 1)) {
                    window.clearInterval(intervalID);
                }
            }, getRotator().get_scrollDuration());
        }
        rotator.set_frameDuration(frameDuration); // after the rotation is finished, the FrameDuration is restored
    }
  5. Jaime
    Jaime avatar
    12 posts
    Member since:
    Feb 2013

    Posted 06 Feb 2013 Link to this post

    I got this to work but still need some help with the left right images since i want to use my own images for the left/right buttons. Any Suggestions?

    Thanks,

    Jaime
  6. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 11 Feb 2013 Link to this post

    Hello Jaime,

    Please clarify what is the problem with the RadRotator control buttons so that I can help you accordingly. Placing the images that will be used as rotator control buttons in the anchor elements that initiate the sliding of the items should help you create custom buttons. In addition, you can use CSS styles to adjust the location of the buttons element, since you will most probably want to place them around the rotator.

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