This is a migrated thread and some comments may be shown as answers.
Configure number of items to be scrolled
4 Answers 39 Views
This is a migrated thread and some comments may be shown as answers.
Vinod
Top achievements
Rank 1
Vinod asked on 08 May 2012, 05:59 PM
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.

4 Answers, 1 is accepted

Sort by
0
Accepted
Slav
Telerik team
answered on 11 May 2012, 10:42 AM
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.
0
Jaime
Top achievements
Rank 1
answered on 06 Feb 2013, 04:29 PM
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
}
0
Jaime
Top achievements
Rank 1
answered on 06 Feb 2013, 05:42 PM
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
0
Slav
Telerik team
answered on 11 Feb 2013, 10:48 AM
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.
Asked by
Vinod
Top achievements
Rank 1
Answers by
Slav
Telerik team
Jaime
Top achievements
Rank 1
Share this question
or