RadWindow Not Modal In IE (the best browser of all time)

[Michael]

Hey All,

We have a few select pages where the modality of all the RadWindows is not...well modal.  This occurs in Internet Explorer (IE6, IE7, IE8) only.  Firefox, Safari, and Chrome all display the RadWindows as expected (see attached).

We have tried 

1. Reordering the windows within the RadWindowManager
2. Removing all but one entry in <RadWindowManager><Windows>...
3. Using radopen() vs .set_navigateUrl() with a show()
4. Setting the modality on the client-side with .set_modal(true);
5. Setting the modality in the markup (Modal="True") on the RadWindowManager and the RadWindow themselves
6. Setting the modal in the codebehind 
7. Asking IE nicely

.aspx

<telerik:RadWindowManager runat="server" ID="rwmManager" VisibleStatusbar="False"
        OnClientClose="OnClientClose" OnClientShow="OnClientShow" EnableShadow="True"
        ShowContentDuringLoad="false" Skin="Office2007" Modal="True" Behaviors="Move"
        KeepInScreenBounds="True" ReloadOnShow="True">
        <Windows>
            <telerik:RadWindow runat="server" ID="rwLetter" Width="500" Height="300">
            </telerik:RadWindow>
            <telerik:RadWindow runat="server" ID="rwLookup" Width="1010" Height="600">
            </telerik:RadWindow>
            <telerik:RadWindow runat="server" ID="rwViewDocuments" Width="900" Height="400">
            </telerik:RadWindow>
            <telerik:RadWindow runat="server" ID="rvViewDuplicates" Width="700" Height="400">
            </telerik:RadWindow>
            <telerik:RadWindow runat="server" ID="rwGridEntry" Title="Add/Modifiy Detail Line"
                VisibleStatusbar="true" Width="1000" Height="650" ShowContentDuringLoad="false">
                <ContentTemplate>
                    <afs:Toolbar runat="server" ID="GridToolbar" />
                    <div id="destination" />
                </ContentTemplate>
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>

#destination has content that is filled in after render using jQuery.  I've remove this event with same effect thinking jQuery was the culprit. 

Any help is greatly appreciated.

Cheers,
Mike

[Svetlina Anati]

Hello Michael,

 Thank you for the provided demo code, I was able to reproduce the problem.

The problem seems to be in the RadWindow with ContentTemplate - in this case, we have moving content in the DOM and for some reason the modal overlay is added to the invisible element of the radWindow.

The easiest workaround I can provide for the time being is to set runat="server" attribute for the DIV as follows:

<telerik:RadWindowManager runat="server" ID="rwmManager" VisibleStatusbar="False"
      EnableShadow="True" ShowContentDuringLoad="false" Skin="Office2007" Modal="True"
      Behaviors="Move" KeepInScreenBounds="True" ReloadOnShow="True" VisibleOnPageLoad="true">
      <Windows>
          <telerik:RadWindow runat="server" ID="rwLetter" Width="500" Height="300">
          </telerik:RadWindow>
          <telerik:RadWindow runat="server" ID="rwLookup" Width="1010" Height="600">
          </telerik:RadWindow>
          <telerik:RadWindow runat="server" ID="rwViewDocuments" Width="900" Height="400">
          </telerik:RadWindow>
          <telerik:RadWindow runat="server" ID="rvViewDuplicates" Width="700" Height="400">
          </telerik:RadWindow>
          <telerik:RadWindow runat="server" ID="rwGridEntry" Title="Add/Modifiy Detail Line"
              VisibleStatusbar="true" Width="1000" Height="650" ShowContentDuringLoad="false">
              <ContentTemplate>
                  <div id="destination" runat="server" />
              </ContentTemplate>
          </telerik:RadWindow>
      </Windows>
  </telerik:RadWindowManager>

I understand that this is not a real solution and we will fix the problem or at least provide more information on the matter next week.

I updated your account with some telerik points for your kind cooperation.

Thank you once again for your report, I will follow you up here once I have some additional useful information about the problem.

Kind regards,
Svetlina
the Telerik team

[Svetlina Anati]

Hello Michael,

 I just notice that your DIV element has a self closing tag and this is the reason for the problem. This does not work under IE and hence the problem with the modal overlay parent occurs - more information about this is available below:

http://www.google.bg/#hl=bg&safe=strict&biw=1659&bih=951&rlz=1W1ADFA_en&q=div+self+closing+ie&aq=f&aqi=&aql=&oq=&fp=e439a2c802a5a497

This being said, please modify your content in order to be valid as shown below and this will fix the problem:

<telerik:RadWindowManager runat="server" ID="rwmManager" VisibleStatusbar="False"
      EnableShadow="True" ShowContentDuringLoad="false" Skin="Office2007" Modal="True"
      Behaviors="Move" KeepInScreenBounds="True" ReloadOnShow="True" VisibleOnPageLoad="true">
      <Windows>
          <telerik:RadWindow runat="server" ID="rwLetter" Width="500" Height="300">
          </telerik:RadWindow>
          <telerik:RadWindow runat="server" ID="rwLookup" Width="1010" Height="600">
          </telerik:RadWindow>
          <telerik:RadWindow runat="server" ID="rwViewDocuments" Width="900" Height="400">
          </telerik:RadWindow>
          <telerik:RadWindow runat="server" ID="rvViewDuplicates" Width="700" Height="400">
          </telerik:RadWindow>
          <telerik:RadWindow runat="server" ID="rwGridEntry" Title="Add/Modifiy Detail Line"
              VisibleStatusbar="true" Width="1000" Height="650" ShowContentDuringLoad="false">
              <ContentTemplate>
                  <div id="destination">< /div>
              </ContentTemplate>
          </telerik:RadWindow>
      </Windows>
  </telerik:RadWindowManager>

Greetings,
Svetlina
the Telerik team

[Michael]

Thanks for the reply Svetlina.  Your second suggestion (property closing the </div>) worked perfectly and really does explain why more compliant browsers were ok but not IE.

We've fixed this on the pages effected and will make it a policy amongst our developres to stick to opening and closing the markup especially on non-server side controls.

Again, I really appreciate the help.

Cheers,
Mike

[Roger]

Hello,

I have tried this fix in IE with no success. Everything works well in firefox and chrome. Here is my code:

... In my RadWindow's Cotent Template
<

 

div id="destination" runat="server">

 

 

    <Telerik:RadTabStrip ID="RadTabStrip" runat="server" MultiPageID="RadMultiPage" CausesValidation="false">

 

 

        <Tabs>

 

 

            <Telerik:RadTab runat="server" PageViewID="pv1" TabIndex="0" Text="xxx"></Telerik:RadTab>

 

 

        </Tabs>

 

    </

 

Telerik:RadTabStrip>

 

    <

 

div class="Tab_Content">

 

 

         <Telerik:RadMultiPage ID="RadMultiPage" runat="server" ScrollBars="Auto" SelectedIndex="0">

 

 

             <Telerik:RadPageView ID="pv1" runat="server" TabIndex="0">

 

 

                <My:Control ID="xxx" runat="server" />

 

 

            </Telerik:RadPageView>

 

         </Telerik:RadMultiPage>

 

     </

 

div>

 

 

</div>
...
I have also tried with this: <div id="destination" runat="server"> kalsjfd </div> and absolutely nothing in the content template.
All I see is a page filled by opacity(grayed out), and a textbox like object in the middle of the page.

Another issue on tab strip. Again, it works well in firefox and chrome, but no I.E. It shows tabs as hyperlinks assigned vertically.
I hope I have provided enough information.

Cheers,

Roger

 

[Marin Bratanov]

Hi Roger,

Your code seems fine to me, or at least the part we have. Please make sure that the user control is also valid HTML and does not throw JavaScript errors, as it is a part of the page where the RadWIndow is defined, and either of these occurring will result in some unexpected behavior.


Kind regards,
Marin
the Telerik team

[Brad]

I have an issue similar.  The windows open in modal in development, but after I deploy to the server, the windows no longer open in modal.  Also, the autosize does not work once deployed.

​<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Modal="True">
<Windows>
<telerik:RadWindow ID="RadWindow3" runat="server"
Animation="Slide" Modal="true" Overlay="true"
VisibleStatusbar="False" NavigateUrl="PP.aspx"
OpenerElementID="<%# ImageButtonPaymentPlan.ClientID %>"
Style="display: none;" Title="Payment Plan" Width="1000" Height="660" Behavior="Close, Move, Reload"
Behaviors="Close, Move, Reload" AutoSize="true">
</telerik:RadWindow>

<telerik:RadWindow ID="RadWindow1" runat="server"
Animation="Slide" Modal="true" Overlay="true"
VisibleStatusbar="False" NavigateUrl="JPH.aspx"
OpenerElementID="<%# ImageButtonJPH.ClientID %>"
Style="display: none;" Title="Hearing" Width="1000" Height="650" Behavior="Close, Move, Reload"
Behaviors="Close, Move, Reload" AutoSize="true">
</telerik:RadWindow>

<telerik:RadWindow ID="RadWindow2" runat="server"
Animation="Slide" Modal="true" Overlay="true"
VisibleStatusbar="False" NavigateUrl="VRB.aspx"
OpenerElementID="<%# ImageButtonVRB.ClientID %>"
Style="display: none;" Title="Registration Block" Width="1000" Height="650" Behavior="Close, Move, Reload"
Behaviors="Close, Move, Reload" AutoSize="true">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>

[Marin Bratanov]

Hello Brad,

The only reasons for such behavior I can think of are:

• you have more than one RadWindowManager in production, so the wrong RadWindow is opened (i.e., ones without the settings you have defined) because the global window.radopen() function is attached to the other manager (it was the first to be created). How to determine if this is the case and how to deal with it is explained here: http://www.telerik.com/help/aspnet-ajax/radwindow-troubleshooting-wrong-window-opened.html.
• If the problem occurs only under IE11, it is possible that the server does not recognize it and there are generic MS AJAX JavaScript errors that will prevent the page from working properly. How to deal with this is explained here: http://blogs.telerik.com/aspnet-ajax/posts/13-12-19/how-to-get-your-asp.net-application-working-in-ie11. Just about the same goes for IE10.

If neither is the case, I would advise opening a support ticket where you can send us an URL (and, if needed, login credentials), so we can examine the page in question. It would help if you also explain how exactly you open these RadWindows.


Regards,

Marin Bratanov
Telerik

 

 

[Brad]

My name is Olen, Brad is my boss who paid for the software.  But I'll answer to Brad here...

It's not that I have more than one radwindowmanager.  I did, but I removed them prior to my previous post.  What strikes me as odd is that this works great in development.  Also, it's not a browser problem.  I checked both links you provided.  I also opened the internal app in chrome and witnessed the same behavior.  I will not be able to let you login to the app, it's internal.  But I can do a goto meeting so that you can see the issue.

Thanks.

[Brad]

Fixed it!  There was two lines of code missing from the Web.Config.  In addition to that, I had another method to open pages that was being called on the click event.