This is a migrated thread and some comments may be shown as answers.

RestrictedZone Not Working in IE7

9 Answers 145 Views

Window

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

answered on 17 Mar 2009, 01:04 PM

I have a similar issue with the restricted zone when dealing with imbedded tabstrips and MDI in IE7. For example, if I point one of the pages in a tab to a page containing tabs, when moving from one tab to the other in the embedded tabs and back again several times, the restriction zone goes for a walk. Here are the pages for you to reproduce: (nothing in the code behinds)
For the outside tabs:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tabs1.aspx.cs" Inherits="tabs1" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head id="Head1" runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    </asp:ScriptManager> 
        
                    <div> 
        
                        <script type="text/javascript">  
        
                       function OnClientTabSelected(sender,args)  
        
                        {   
        
                            var manager = $find("<%=RadWindowManager1.ClientID %>");   
        
                            var windows = manager.get_windows();  
        
                            var tabStrip = $find( "<%=RadTabStrip1.ClientID %>");  
        
                            var selIndex = tabStrip.get_selectedIndex();  
        
                             for (var i=0; i < windows.length; i++)  
        
                             {  
        
                                var win = windows[i];  
        
                                if (i == selIndex)  
        
                                {  
        
                                    win.show();   
        
                                }  
        
                                else  
        
                                {   
        
                                    win.hide();   
        
                                }  
        
                             }   
        
                        }  
        
                        </script> 
        
                        <telerik:RadWindowManager ShowContentDuringLoad="false" VisibleStatusbar="false" VisibleTitlebar="false" RestrictionZoneID="RestrictionZone" Width="644px" Height="400px" Behaviors="None" 
        
                            ID="RadWindowManager1" runat="server">  
        
                            <Windows>   
        
                                <telerik:RadWindow ID="RadWindow1" VisibleOnPageLoad="true" Title="Outside Tab 1" NavigateUrl="tabs2.aspx" runat="server">  
        
                                </telerik:RadWindow> 
        
                                <telerik:RadWindow ID="RadWindow2" VisibleOnPageLoad="true" Title="Outside Tab 2" NavigateUrl="tabs2.aspx" runat="server">  
        
                                </telerik:RadWindow> 
        
                                <telerik:RadWindow ID="RadWindow3" VisibleOnPageLoad="true" Title="Outside Tab 3" NavigateUrl="tabs2.aspx" runat="server">  
        
                                </telerik:RadWindow> 
        
                            </Windows> 
        
                        </telerik:RadWindowManager> 
        
                        <telerik:RadTabStrip Width="644px" Align="Justify" OnClientTabSelected="OnClientTabSelected" ID="RadTabStrip1" runat="server">  
        
                            <Tabs>   
        
                                <telerik:RadTab runat="server" Selected="true" Text="Outside Tab 1">   
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab runat="server" Selected="true" Text="Outside Tab 2">   
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab runat="server" Selected="true" Text="Outside Tab 3">   
        
                                </telerik:RadTab> 
        
                            </Tabs> 
        
                        </telerik:RadTabStrip> 
        
                        <div id="RestrictionZone" style="width:644px; height:400px;"></div> 
        
                        <br /> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

and for the inside tabs:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tabs2.aspx.cs" Inherits="tabs2" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head id="Head1" runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    </asp:ScriptManager> 
        
                    <div> 
        
                        <script type="text/javascript">  
        
                       function OnClientTabSelected(sender,args)  
        
                        {   
        
                            var manager = $find("<%=RadWindowManager1.ClientID %>");   
        
                            var windows = manager.get_windows();  
        
                            var tabStrip = $find( "<%=RadTabStrip1.ClientID %>");  
        
                            var selIndex = tabStrip.get_selectedIndex();  
        
                             for (var i=0; i < windows.length; i++)  
        
                             {  
        
                                var win = windows[i];  
        
                                if (i == selIndex)  
        
                                {  
        
                                    win.show();   
        
                                }  
        
                                else  
        
                                {   
        
                                    win.hide();   
        
                                }  
        
                             }   
        
                        }  
        
                        </script> 
        
                        <telerik:RadWindowManager ShowContentDuringLoad="false" VisibleStatusbar="false" VisibleTitlebar="false" RestrictionZoneID="RestrictionZone" Width="600px" Height="300px" Behaviors="None" 
        
                            ID="RadWindowManager1" runat="server">  
        
                            <Windows>   
        
                                <telerik:RadWindow ID="RadWindow1" Title="Inside Tab 1" NavigateUrl="http://www.sitefinity.com" runat="server">  
        
                                </telerik:RadWindow> 
        
                                <telerik:RadWindow ID="RadWindow2" VisibleOnPageLoad="true" Title="Inside Tab 2" NavigateUrl="http://www.telerik.com" runat="server">  
        
                                </telerik:RadWindow> 
        
                                <telerik:RadWindow ID="RadWindow3" Title="Inside Tab 3" NavigateUrl="http://www.telerik.com/support/documentation.aspx" runat="server">  
        
                                </telerik:RadWindow> 
        
                            </Windows> 
        
                        </telerik:RadWindowManager> 
        
                        <telerik:RadTabStrip Width="600px" Align="Justify" OnClientTabSelected="OnClientTabSelected" ID="RadTabStrip1" runat="server">  
        
                            <Tabs>   
        
                                <telerik:RadTab runat="server" Text="Inside Tab 1">   
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab runat="server" Selected="true" Text="Inside Tab 2">  
        
                                </telerik:RadTab>   
        
                                <telerik:RadTab runat="server" Text="Inside Tab 3">  
        
                                </telerik:RadTab> 
        
                            </Tabs> 
        
                        </telerik:RadTabStrip> 
        
                        <div id="RestrictionZone" style="width:600px; height:300px;"></div> 
        
                        <br /> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

To replicate problem, select "Inside Tab 1", then "Inside Tab 2", and then back to "Inside Tab 1" again etc. It becomes very noticable after 5 or 6 times back and forth. No issues with Firefox 3.0.7. I also upgraded to RadControls_for_ASP.NET_AJAX_2009_1_311 (great product, btw!)

Any thoughts, suggestions?

answered on 18 Mar 2009, 10:10 AM

Hi Bruce Chariot,

It seems that for some reason when the restriction zone itself is in a RadWindow there is some problem with the logic, but at this point I cannot tell what is the exact reason.
The good news however is that there is an easy workaround - just center the window when showing it - since it is in a restriction zone, it will position itself correctly:

e.g. in your dialog page:

    
            function OnClientTabSelected(sender,args)   
        
            {    
        
                var manager = $find("<%=RadWindowManager1.ClientID %>");    
        
                var windows = manager.get_windows();   
        
                var tabStrip = $find( "<%=RadTabStrip1.ClientID %>");   
        
                var selIndex = tabStrip.get_selectedIndex();   
        
                 for (var i=0; i < windows.length; i++)   
        
                 {   
        
                    var win = windows[i];   
        
                    if (i == selIndex)   
        
                    {   
        
                        win.show(); 
        
                        win.center();    
        
                    }   
        
                    else   
        
                    {    
        
                        win.hide();    
        
                    }   
        
                 }    
        
            }

Greetings,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.