RadRotator and RadWindow

5 posts, 0 answers
  1. Dick
    Dick avatar
    36 posts
    Member since:
    Sep 2007

    Posted 23 Feb 2011 Link to this post

    We have a RadWindowManager on a Page. We open RadWindows using Javascript

    var oManager = GetRadWindowManager();
    oManager.open("./Popup.aspx", "Popup");

    Everything works fine.
    When I dynamically add a RadRotator to my page using the code below the RadWindow Script stops working. Instead of opening a window the page does a postback.

    radRotator.ID = "twitter" + ContentItem.ContentItemId;
    radRotator.CssClass = "RSSFountainClass";
    radRotator.RotatorType =(TwitterRotatorType>0) ? TwitterRotatorType : RotatorType.AutomaticAdvance;
    radRotator.ScrollDirection = RotatorScrollDirection.Up;
    radRotator.ScrollDuration = ScrollDuration;
    radRotator.FrameDuration = FrameDuration;
    radRotator.ItemTemplate = new RotatorItemTemplate(ContentItem, RSSItemTemplateClass, RSSItemDateTimeClass, RSSItemDateClass, RSSItemTimeClass, RSSItemTitleClass);
    radRotator.Height = new Unit(Height, UnitType.Pixel);
    radRotator.DataSource = RSSDataSource();
    radRotator.InitialItemIndex = -1;
    radRotator.DataBind();
     
    Controls.Add(radRotator);


    When i disable the handler, the script works again.

    Below the handler code:

    private class RotatorItemTemplate : ITemplate
    {
        Label literal;
     
        private ContentItem ContentItem { get; set; }
     
        private string RSSItemTemplateClass { get; set; }
     
        private string RSSItemDateTimeClass { get; set; }
     
        private string RSSItemDateClass { get; set; }
     
        private string RSSItemTimeClass { get; set; }
     
        private string RSSItemTitleClass { get; set; }
     
        public RotatorItemTemplate(ContentItem contentItem, string rssItemTemplateClass, string rssItemDateTimeClass, string rssItemDateClass, string rssItemTimeClass, string rssItemTitleClass)
        {
            literal = new Label();
     
            ContentItem = contentItem;
            RSSItemTemplateClass = rssItemTemplateClass;
            RSSItemDateTimeClass = rssItemDateTimeClass;
            RSSItemDateClass = rssItemDateClass;
            RSSItemTimeClass = rssItemTimeClass;
            RSSItemTitleClass = rssItemTitleClass;
        }
     
        public void InstantiateIn(Control container)
        {
            literal = new Label();
            literal.DataBinding += TwitterItem_ItemDataBound;
            container.Controls.Add(literal);
        }
     
        /// <summary>
        /// TwitterItem_ItemDataBound Method
        /// </summary>
        /// <param name="sender">An object</param>
        /// <param name="e">An EventArgs</param>
        /// <returns>A void</returns>
        private void TwitterItem_ItemDataBound(object sender, EventArgs e)
        {
            Label labelControl = (Label)sender;
            RadRotatorItem rotatorItem = (RadRotatorItem)labelControl.NamingContainer;
     
            XPathNavigator xPathNavigator = ((IXPathNavigable)rotatorItem.DataItem).CreateNavigator();
     
            HtmlGenericControl htmlGenericControlItem = new HtmlGenericControl();
            htmlGenericControlItem.Attributes.Add("onclick", "window.open('" +
                 ((ContentItem.FileTitle == TwitterType.Follow.ToString())
                ? xPathNavigator.SelectSingleNode("link").Value
                : xPathNavigator.SelectSingleNode("link/@href").Value)
            + "', '_blank')");
             
            if (!string.IsNullOrEmpty(RSSItemTemplateClass))
                htmlGenericControlItem.Attributes.Add("class", RSSItemTemplateClass);
            
     
            HtmlGenericControl htmlGenericControlDateTime = new HtmlGenericControl();
            if (!string.IsNullOrEmpty(RSSItemDateTimeClass))
                htmlGenericControlDateTime.Attributes.Add("class", RSSItemDateTimeClass);
     
            HtmlGenericControl htmlGenericControlTime = new HtmlGenericControl();
            if (!string.IsNullOrEmpty(RSSItemTimeClass))
                htmlGenericControlTime.Attributes.Add("class", RSSItemTimeClass);
            htmlGenericControlTime.Controls.Add(new LiteralControl(
                ((ContentItem.FileTitle == TwitterType.Follow.ToString())
                    ? Convert.ToDateTime(xPathNavigator.SelectSingleNode("pubDate").Value).ToShortDateString()
                : xPathNavigator.SelectSingleNode("author/name").Value))
                );
     
            HtmlGenericControl htmlGenericControlDate = new HtmlGenericControl();
            if (!string.IsNullOrEmpty(RSSItemDateClass))
                htmlGenericControlDate.Attributes.Add("class", RSSItemDateClass);
            htmlGenericControlDate.Controls.Add(new LiteralControl(
                ((ContentItem.FileTitle == TwitterType.Follow.ToString())
                ? Convert.ToDateTime(xPathNavigator.SelectSingleNode("pubDate").Value).ToShortTimeString()
                : xPathNavigator.SelectSingleNode("updated").Value))
                );
     
            htmlGenericControlDateTime.Controls.Add(htmlGenericControlDate);
            htmlGenericControlDateTime.Controls.Add(htmlGenericControlTime);             
            htmlGenericControlItem.Controls.Add(htmlGenericControlDateTime);
     
            HtmlGenericControl htmlGenericControlTitle = new HtmlGenericControl();
            if (!string.IsNullOrEmpty(RSSItemTitleClass))
                htmlGenericControlTitle.Attributes.Add("class", RSSItemTitleClass);
            htmlGenericControlTitle.Controls.Add(new LiteralControl(
                ((ContentItem.FileTitle == TwitterType.Follow.ToString())
                ? xPathNavigator.SelectSingleNode("title").Value
                 : xPathNavigator.SelectSingleNode("content").Value)));
     
            htmlGenericControlItem.Controls.Add(htmlGenericControlTitle);
     
            labelControl.Controls.Add(htmlGenericControlItem);
        }
    }

    Can anyone help me to solve this problem? Why does the page perform a postback after adding the Rotator handler.
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 25 Feb 2011 Link to this post

    Hi,

    After extended testing I was unable to reproduce the issue that you are experiencing. First of all, you need to make sure there are no JavaScript errors on the page, because this may cancel the scripts that follow, thus making the page not working properly.
    Please, find attached the test project that I was using and let me know if you have the same setup at your end. You could incorporate your modification to this same project and send it back so that I can investigate it further.

    All the best,
    Nikodim
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dick
    Dick avatar
    36 posts
    Member since:
    Sep 2007

    Posted 27 Feb 2011 Link to this post

    The only javascript error is a null reference error on the function GetRadWindowManager().
     When I disable the line ‘
    literal.DataBinding += TwitterItem_ItemDataBound;

    ’ in my code the error disappears and the application is functioning normaly.


    The difference between your example and our code lies in the fact that we implement RadWindowManager server side.

  5. Niko
    Admin
    Niko avatar
    387 posts

    Posted 28 Feb 2011 Link to this post

    Hi,

    I will need several clarifications on the issue you are having:
    1. How are you instantiating the RadWindowManager? Please, provide the code you are using. If the RadWindowManager is not instantiated, then the GetRadWindowManager method will fail to get any window manager, which will lead no window being opened.
    2. You need to open a window when clicking on a rotator item, don't you? I should suppose so, based on the following code from the TwitterItem_ItemDataBound method:
      htmlGenericControlItem.Attributes.Add("onclick", "window.open('" +
                   ((ContentItem.FileTitle == TwitterType.Follow.ToString())
                  ? xPathNavigator.SelectSingleNode("link").Value
                  : xPathNavigator.SelectSingleNode("link/@href").Value)
              + "', '_blank')");
    3. If my guess in point 2 is correct, you'd better use the rotator OnClientItemClicked event handler and implement the window opening in the handler function.
    Please, find attached a sample implementation that is an improved version of the project last attached. Here are the changes I have made:
    1. Make sure there is a RadWindowManager instantiated on the page.
    2. Set the OnClientItemClicked property value to the client function handler:
      radRotator.OnClientItemClicked = "openWindow";
    3. Remove the assignment of the onclick attribute from the TwitterItem_ItemDataBound method. The rotator OnClientItemClicked event should take care of the click.
    4. In the data binding method for the rotator item add an attribute data-url to the content root element with the value of the url that needs to be opened. The attribute's name is derived from the HTML5 data API, where any data that needs to be associated with an HTML element should be in the form data-{variable}. After that this data can be consumed through the jQuery data method.
      private void OnDataBinding(object sender, EventArgs e)
      {
          var image = (Image)sender;
          var rotatorItem = (RadRotatorItem)image.NamingContainer;
          var data = (RotatorDataItem)rotatorItem.DataItem;
          image.ImageUrl = String.Format(image.ImageUrl, data.Image);
          image.Attributes.Add("data-url", data.Url);
      }
    5. Implement the openWindow handler on the client-side. Make sure to capture the element with the data-url. Here is my implementation:
      function openWindow(rotator, args)
      {
          var windowManager = GetRadWindowManager();
          var extItem = $telerik.$(args.get_item().get_element()).find("[data-url]");
          windowManager.open(extItem.data("url"), "sites");
      }

    Hope this will solve your issue. Please, let me know if need further help on the implementation.

    Greetings,
    Nikodim
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. Dick
    Dick avatar
    36 posts
    Member since:
    Sep 2007

    Posted 05 Mar 2011 Link to this post

    I solved the problem. The problem was caused by a markup-language mistake. 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017