Configure number of items to be scrolled

[Vinod]

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.

[Slav]

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

[Jaime]

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

}


[Jaime]

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

[Slav]

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