adding placeholder items to Rotator, dynamically

3 posts, 0 answers
  1. David
    David avatar
    38 posts
    Member since:
    May 2013

    Posted 06 Aug 2013 Link to this post

    This query has come about from the fact that i dont believe you can scroll - using the Rotator Buttons - by one Rotator Item at a time (

    this is my code so far

    <telerik:RadRotator Width="350px" Height="75px"  ItemHeight="75px" ItemWidth="75px" CssClass="horizontalRotator" WrapFrames="false" ScrollDuration="500"  RotatorType="Buttons"   runat="server" ID="imageRotator">
        <ItemTemplate >
           <img id="imgCarousel2" class="item" width="75" height="75" class="item" src="<%#Eval("PhotoFile")%>"alt="" onclick="ChangeRecipePhoto('<%#Eval("PhotoFile")%>','<%#Eval("PhotoID")%>')" />                                                      

    imageRotator.DataSource = Photos()

       <style type="text/css">
           .item {
         border: solid 10px #fff;
         margin: 1px;

    now, the amount of images that need to be shown could be 7,8,9 or anything else.
    my RadRotator Width has been set so that it fits 4 images at any point in its scrolling:
    e.g. the RadRotator is 350px in Width.
    the inidividual items in the RadRotator are 75px in Width
    This means that 75 * 4 is 300 (+ an extra 40px for the Buttons - as per this page:
    and an extra 10px for the extra border width i have added to the Style).

    unfortunately, this means that if the amount of images is 5, the first page will show 4 images fine, but when i scroll using the Rotator scroll button, the next screen is of 1 image and an empty space that could accomodate another 3 images. 

    i suppose i have 3 solutions that i would be keen to see if exists.

    1. that it is possible to scroll one image at a time so that it doesn't show the empty space

    2. dynamically add the necessary amount of 'placeholder' images so that it doesn't have the empty space (e.g if amount of images is less than the next multiple of 4, add the required amount of 'placeholders' to get it to be the next multiple of 4).

    3. some other means of showing that the blank space is by design and not looking like there should be images.


  2. Marin Bratanov
    Marin Bratanov avatar
    5126 posts

    Posted 08 Aug 2013 Link to this post

    Hello David,

    Have you examined the project my colleague Slav posted in in the same thread: It seems to work fine for me (I only added a few more items to the datasource). You can find this modified version and a short video with the behavior on my end attached as a reference.

    You can now extend it with the API the conrtol exposes like in this demo: by using custom buttons instead of the built-in ones. You can also find an example of this attached.

    On adding "dummy" images - after databinding the rotator you can add/remove images with its client-side API as shown in this demo: In its OnClientLoad event you can check the get_items().length property to see how many items you have and generate a few dummy items.

    You can also consider iterating through the datasource first and check the count of items it returns, then add a few dummy items there that will point, for example, to an image that will indicate there are no more images in the given gallery, so that the entireviewport of the rotator is filled up.

    Yet another thing you can consider is setting the WrapFrames property to true so that there are no blank spaces.

    Marin Bratanov
    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 the blog feed now.
  3. David
    David avatar
    38 posts
    Member since:
    May 2013

    Posted 08 Aug 2013 Link to this post

    thank you for the response.
    you've given me lots to think about, and answered all my questions.

    i admit, i didn't see the example by Slav in the link i posted! 
    the AutoRotator for 1 item is interesting, but for my current requirements i didn't want it to Automatically rotate. i can see myself using it in the future though.
    I also didn't feel that it should continually scroll on clicking the button (1-10 and then back to 1 again) due to the design of the page.

    I modified the 'ScrollOne' function that you demoed, like so:

    function scrollOne(direction) {
        var rotator = $find("<%=RadRotator1.ClientID%>");

    <telerik:RadRotator  ControlButtons-RightButtonID="buttRight" ControlButtons-LeftButtonID="buttLeft" style="float:left;" Width="610px" Height="190"  ItemHeight="150px" ItemWidth="150px" WrapFrames="false" ScrollDuration="500"  RotatorType="Buttons"  runat="server" ID="RadRotator1"  >
                          <ItemTemplate >
                              <asp:Label ID="Label1"  CssClass="item" Width="150px" style="background-color:floralwhite; text-align:center;" runat="server" text='<%#Eval("PhotoName")%>' ></asp:Label>
                              <img id="imgCarousel2"  class="item" width="150" height="150"  src="<%#Eval("PhotoFile")%>"alt=""  onclick="ChangeRecipePhoto('<%#Eval("PhotoFile")%>','<%#Eval("PhotoID")%>')" />

    this has given me *almost* what i want, in the sense that - for some reason - when I click my buttons, sometimes it advances 1 item (e.g from item 2 to 3 - out of 10 items) and sometimes it advanced 2 items (e.g from item 3 to 5 - out of 10 items).

    This is still acceptable as it gets rid of the original problem of having blank spaces at the end of the scrolling movement.

    thank you for your help
Back to Top