[Solved] Popup modal=true is all greyed out in IE

[MNP]

I have a problem using the popup edit form in the grid. In IE 7, the modal form is all greyed out. This works fine in Firefox 3.5. All the demos work fine in IE, so I'm assuming it's a CSS problem?

Above this code is a bunch of other divs, but here is the basics of it.

 <div class="contentfull">
      <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
         <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="grdCourses">
               <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="grdCourses" />
               </UpdatedControls>
            </telerik:AjaxSetting>
         </AjaxSettings>
      </telerik:RadAjaxManager>

      <telerik:RadGrid ID="grdCourses" runat="server" AllowMultiRowEdit="false" AllowMultiRowSelection="false"
                     AllowSorting="true" Skin="Vista" Width="50%">
         <ClientSettings>
         <Scrolling AllowScroll="false" />
            <Selecting AllowRowSelect="true"/>
         </ClientSettings>
         <ExportSettings Excel-FileExtension="xls" Excel-Format="ExcelML" ExportOnlyData="True" OpenInNewWindow="True"></ExportSettings>
         <MasterTableView GridLines="None" EditMode="PopUp" CommandItemDisplay="TopAndBottom" AutoGenerateColumns="False" AllowPaging="False">
            <CommandItemSettings AddNewRecordText="Add New Course" />
            <Columns>
               <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
               <telerik:GridBoundColumn UniqueName="CourseID" HeaderText="ID" DataField="CourseID"></telerik:GridBoundColumn>
               <telerik:GridBoundColumn UniqueName="Title" DataField="Title" HeaderText="Title"  Visible="True" ItemStyle-HorizontalAlign="Left"></telerik:GridBoundColumn>
               <telerik:GridBoundColumn UniqueName="Description" DataField="Details" HeaderText="Description"  Visible="False"></telerik:GridBoundColumn>
               <telerik:GridButtonColumn UniqueName="Delete" CommandName="Delete" Text="Delete"></telerik:GridButtonColumn>
            </Columns>

            <EditFormSettings EditFormType="Template">
               <FormTemplate>
               <div>
 Hi Edit Form
</div>

               </FormTemplate>

               <PopUpSettings Height="800px" ScrollBars="None" Width="800px" Modal="true" />
            </EditFormSettings>
         </MasterTableView>
      </telerik:RadGrid>
   </div><!--contentfull-->

Any ideas? I'll keep trying to figure it out as I'm assuming it's a css problem.

[Mira]

Hello Matt,

Would you elaborate on what exactly do you mean by saying "the modal form is all greyed out"?

I am attaching a sample project using your code which looks like the PopUp Edit Form demo on my side under all browsers. Note that the whole window containing the grid except the pop-up form is grey and out of mouse focus. This is the expected look of the grid/page when Modal is set to true.

Kind regards,
Mira
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.

[MNP]

Thanks for the reply!

When i say the modal form is greyed out - it can be seen from this screenshot - http://media.mnp.ca/images/popup.jpg

That's what it looks like in IE. Firefox works as per it normally should. Like I said, it's probably a css issue, but I just can't figure it out!

Thanks for the help!

-Matt

[Mira]

Hello Matt,

As you can see from the project I attached in my previous post I am unable to replicate your issue.
Therefore, I recommend that you open a formal support ticket and attach a small working project with the described behavior illustrated which we can debug locally.

Sincerely yours,
Mira
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.