Automatic scroll rotator needs pager to follow along

[Geoff]

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;
}

[Richard]

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!

[Geoff]

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!

[Slav]

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