Automatic scroll rotator needs pager to follow along

4 posts, 0 answers
  1. Geoff
    Geoff avatar
    27 posts
    Member since:
    May 2012

    Posted 13 Jun 2012 Link to this post

    Hello,

    I have created a rotator/pager following this example on the page.

    http://demos.telerik.com/aspnet-ajax/rotator/examples/pagerintegration/defaultcs.aspx

    I'm not sure what client side code I need to make the pager follow the item index that the rotator is on.

    Here is my current code.

    public partial class _Default : JJPro.Web.Page
        {
     
            string virtualPath = "~/Images/Headers";
            private void Page_Load(object sender, System.EventArgs e)
            {
     
     
                if (!IsPostBack)
                {
                    RadRotator1.DataSource = GetFilesInFolder(virtualPath);// Set datasource
                    RadRotator1.DataBind();
                }
     
     
     
            }
     
     
            // Returns all virtual paths to files located in the given virtual directory
            protected List<string> GetFilesInFolder(string folderVirtualPath)
            {
                string physicalPathToFolder = Server.MapPath(folderVirtualPath);// Get the physical path
                string[] physicalPathsCollection = System.IO.Directory.GetFiles(physicalPathToFolder);// Get all child files of the given folder
                List<string> virtualPathsCollection = new List<string>();// Contains the result
     
                foreach (String path in physicalPathsCollection)
                {
                    // The value of virtualPath will be similar to '~/PathToFolder/Image1.jpg
                    string virtualPath = VirtualPathUtility.AppendTrailingSlash(folderVirtualPath) + System.IO.Path.GetFileName(path);
                    virtualPathsCollection.Add(virtualPath);
                }
                return virtualPathsCollection;
            }
     
            protected void RadRotator1_DataBound(object sender, EventArgs e)
            {
                AddNavigationButtons();
            }
     
      
     
            private void AddNavigationButtons()
            {
                foreach (RadRotatorItem item in RadRotator1.Items)
                {
                    LinkButton linkButton = CreateLinkButton(item.Index);
                    ButtonsContainer.Controls.Add(linkButton);
                }
            }
     
            private LinkButton CreateLinkButton(int itemIndex)
            {
                // Create the LinkButton
                LinkButton button = new LinkButton();
                button.Text = (itemIndex + 1).ToString();// The test of the button
                button.ID = string.Format("Button{0}", itemIndex);// Assign an unique ID
     
     
                // Attach a JavaScript handler to the click event
                button.OnClientClick = string.Format("showItemByIndex({0}); return false;", itemIndex);
                button.Attributes.Add("onclick", "<script>testHello();</script>");
     
                 
     
                // Class which is applied to the newly added button
                button.CssClass = "buttonClass";
                return button;
            }
     
     
                 
     
     
        }
    function OnClientLoad(rotator, args) {
                  startRotator(rotator);
              }
     
              function startRotator(rotator) {
                  if (!rotator.autoIntervalID) {
                      rotator.autoIntervalID = window.setInterval(function () {
                          rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
                      }, rotator.get_frameDuration());
                  }
              }
     
              function stopRotator(rotator) {
                  if (rotator.autoIntervalID) {
                      window.clearInterval(rotator.autoIntervalID);
                      rotator.autoIntervalID = null;
                  }
              }
     
              function OnClientMouseOver(rotator) {
     
                  stopRotator(rotator);
     
              }
     
              function OnClientMouseOut(rotator) {
     
                  startRotator(rotator);
              }
     
              // Panel Buttons
     
              var lastShownButton;
              function showItemByIndex(index) {
                  // gets reference to the rotator object
                  var oRotator = $find("<%= RadRotator1.ClientID %>");
     
                  // Sets currently shown item by its index
                  oRotator.set_currentItemIndex(index);
     
                  if (lastShownButton)
                      lastShownButton.removeClass("btnHighlight");
     
     
                  var currentButton = getButtonByIndex(index);
                  currentButton.addClass("btnHighlight");
                  lastShownButton = currentButton;
              }
     
              function OnClientItemShown(oRotator, args) {
                  var currentIndex = args.get_item().get_index();
     
                  if (lastShownButton)
                      lastShownButton.removeClass("btnHighlight");
     
                  var currentButton = getButtonByIndex(currentIndex);
                  currentButton.addClass("btnHighlight");
                  lastShownButton = currentButton;
              }
     
              function getButtonByIndex(index) {
                  var buttonIdSelector = String.format("Button{0}:first", index);
                  var currentButton = $telerik.$(buttonIdSelector)
     
                  return currentButton;
              }
     
              function showItemByIndex(index) {
                  // get reference to the rotator object
                  var oRotator = $find("<%= RadRotator1.ClientID %>");
     
                  // Set currently shown item by its index
                  oRotator.set_currentItemIndex(index);
              }
     
              function testHello()
              {
              alert ("Works");
              }
     
      </script>
     
      <div class="rotatorCont">
              <div class="rotator">
      <div style=" margin-left: 0px;">
      <telerik:RadRotator RotatorType="Buttons" ID="RadRotator1" runat="server"
          Width="1012" ItemWidth="1012" ScrollDirection="Left, Right"
              SlideShowAnimation-Type="Fade"
              Height="300" ItemHeight="275" FrameDuration="4000" OnClientMouseOver="OnClientMouseOver" OnClientMouseOut="OnClientMouseOut"
          ScrollDuration="10"   SkinID="WebBlue" OnClientItemShown="OnClientItemShown"
              BorderStyle="None"  OnClientLoad="OnClientLoad" PauseOnMouseOver="False" SlideShowAnimation-Duration="500" BorderColor="Black" OnDataBound="RadRotator1_DataBound">
          <ItemTemplate>
              <div class="itemTemplate">
              <asp:Image ID="Image1" Width="1012" Height="275" runat="server" ImageUrl='<%# Container.DataItem  %>' AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>" />
              </div>
          </ItemTemplate>
          <ControlButtons LeftButtonID="leftArrow" RightButtonID="rightArrow" />
      </telerik:RadRotator>
                  <div class="links" onclick="stopRotator(rotator)">
                      <asp:Panel CssClass="ScrollerButtonsContainer" OnMouseOver="OnClientMouseOver" ID="ButtonsContainer" runat="server">
                      </asp:Panel>
                      <a href="#" id="leftArrow" title="Rotate Left" class="leftButton"></a><a href="#"
                          id="rightArrow" title="Rotate Right" class="rightButton"></a>
                  </div>
     
     
      </div>
      </div>
    /*Rotator Buttons Css*/
     
    .rotatorCont
    {
        width: 800px;
        height: 400px;
        margin: 10px 135px;
     
     
    }
     
    .rotator
    {
        margin: 0 auto;
        width: 500px;
        height: 220px;
     
    }
     
    .links
    {
        margin: 0px auto auto 780px;
        width: 381px;
        position:absolute;
        z-index: 5;
     
    }
     
    .ScrollerButtonsContainer
    {
        height: 22px;
        line-height: 22px;
        padding: 0 5px 0 2px;
         
    }
     
    .ScrollerButtonsContainer .buttonClass
    {
        display: inline-block;
        float: left;
        width: 22px;
        text-align: center;
        text-decoration: none;
        color: #eee;
         
    }
     
    .ScrollerButtonsContainer .buttonClass, .leftButton, .leftButton:hover, .rightButton, .rightButton:hover
    {
        background: url(/Images/ArrowSprite.gif) no-repeat;
     
    }
     
    .btnHighlight
    {
        background-position: 0 -110px !important;
        color: #9EDA29 !important;
    }
     
    .ScrollerButtonsContainer .buttonClass
    {
        background-position: 0 0;
    }
     
    .ScrollerButtonsContainer .buttonClass:hover
    {
        background-position: 0 -110px;
        color: #9EDA29;
    }
     
    .ScrollerButtonsContainer, .leftButton, .rightButton
    {
        float: left;
    }
     
    .leftButton, .rightButton
    {
        display: block;
        width: 22px;
        height: 22px;
    }
     
    .leftButton
    {
        background-position: 0 -22px;
    }
     
    .leftButton:hover
    {
        background-position: 0 -44px;
    }
     
    .rightButton
    {
        background-position: 0 -66px;
    }
     
    .rightButton:hover
    {
        background-position: 0 -88px;
    }
     
    .conf
    {
        clear: both;
        height: 100px;
    }
    .itemTemplate
    {
        width: 570px;
        height: 230px;
    }
     
    .info, .title
    {
        font-size: 14px;
    }
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 14 Jun 2012 Link to this post

    Geoff,

    I would suggest that you review this forum thread: Radrotator with pagination. The Telerik admin: Slav has provided a working demo to guide you in coordinating the pager with the RadRotator item index using JavaScript.

    Hope this helps!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Geoff
    Geoff avatar
    27 posts
    Member since:
    May 2012

    Posted 15 Jun 2012 Link to this post

    Hi Jumpstart,

    That is actually the example I have followed. However, the css for .btnHighlight doesn't seem to fire with the js. I believe it is because of the auto scrolling js and I'm not sure how to make it work with both. I'm a little new to js and asp.net altogether, so any help would be appreciated.

    Thanks!
  5. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 19 Jun 2012 Link to this post

    Hi Geoff,

    It appears that you are using the example from the online demo Pager Integration as a base for your project. You can include an auto scrolling functionality via the following approach:
    1. Attach a handler to the client-side event OnClientLoad.
    2. In the specified handler function use the Client-Side API of RadRotator to slide its items over a predefined period of time:
      function OnClientLoad(sender, args) { // this handler implements auto scrolling
          if (!sender.autoIntervalID) {
              sender.autoIntervalID = window.setInterval(function () {
                  sender.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
              }, sender.get_frameDuration());
          }
      }

    For your convenience I have attached a sample page that demonstrates this solution. You just have to attach the Northwind database to your project in order to run it. Please use this example as a base for your further development.


    All the best,
    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