radrotator asynchronous loading pictures

4 posts, 0 answers
  1. Berrabah
    Berrabah avatar
    37 posts
    Member since:
    Feb 2012

    Posted 05 Jul 2012 Link to this post

    I would like to use a RadRotator that get the url pictures from an sql db and display it with two button (next and previous) so first that display the first picture and then the others like this way http://www.cantoncomunique.fr 
    Thank you
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Jul 2012 Link to this post

    Hi Berrabah,

    You can use RadBinaryImage for binding images from database. Here is the sample code.

    <telerik:RadRotator ID="RadRotator1" runat="server" Width="470px" Height="364" ItemWidth="470px" ItemHeight="230" ScrollDuration="500" RotatorType="Buttons" DataSourceID="SqlDataSource2"  >
         <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("Picture") %>' AutoAdjustImageControlSize="false" Width="90px" Height="110px" />

    Hope this helps.

  3. DevCraft R3 2016 release webinar banner
  4. Berrabah
    Berrabah avatar
    37 posts
    Member since:
    Feb 2012

    Posted 11 Jul 2012 Link to this post

    Hi Princy and thank you for your help,
    I have stored just the URL of pictures in the Database cause I have many pictures (more than 50) and I can't put there all in the Datatable so I get dynamically a list of url pictures and I bind this list with RadRotator, I use a JavaScript function to show the next and previous picturs :

    <script type="text/javascript">
        function showNextItem(clickedButton, rotator, direction) {
    <div class="rotator">

        <div class="boutonsuivant" onclick="showNextItem(this, $find('<%= myrotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;" >
            <asp:ImageButton ID="btnsuivant" runat="server" ImageUrl="~/App_Themes/Default/images/suivant.png" />
        <div class="boutonprecedent" onclick="showNextItem(this, $find('<%= myrotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Right); return false;" >
            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/App_Themes/Default/images/precedent.png" />        

        <telerik:RadRotator runat="server" ID="myrotator" Height="400px" Width="1024px" 
            RotatorType="FromCode" FrameDuration="5000">
                    <telerik:RadBinaryImage runat="server" ID="imagerotator" 
                        DataValue='<%# Container.DataItem %>' Height="400px" Width="1024px" 
                        ResizeMode="Crop" />

    The probleme is that some times the RadRotator crashe so what should I do 
  5. Slav
    Slav avatar
    1351 posts

    Posted 16 Jul 2012 Link to this post

    Hello Berrabah,

    I would recommend setting the RadRotator properties ItemWidth and ItemHeight as explained in the help article How to configure RadRotator to ensure that its items will be scrolled as expected.

    Aside from this, your setup of the RadRotator appears to be correct. Please elaborate on the problem that you encountered and provide reliable steps for reproduction so that I can examine it and suggest an according solution.

    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