RadRotator and RadWindow

[Dick]

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.

[Niko]

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

[Dick]

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.

[Niko]

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

[Dick]

I solved the problem. The problem was caused by a markup-language mistake.