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

Edit PopUp - Modal Whole Screen

5 Answers 294 Views

Grid

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

William asked on 23 Aug 2011, 08:57 PM

radgrid-modal.jpg

When the edit popup window appears in the RadGrid, the modal covers the whole screen. This prevents you from using the popup window. I could only reproduce this error in IE7 on one specific RadGrid. I've confirmed that my settings are similar to the working RadGrid, but I still can't manage to make the popup appear in front of the modal. See attached image and ASP code below. This only occurs for the the "usersRadGrid".

<telerik:RadAjaxLoadingPanel ID="usersGroupsLoadingPanel" runat="server" Skin="Vista" />

<telerik:RadAjaxPanel ID="usersGroupsPanel" runat="server" LoadingPanelID="usersGroupsLoadingPanel">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Vista" MultiPageID="RadMultiPage1"

SelectedIndex="0">

<Tabs>

<telerik:RadTab Text="Users">

</telerik:RadTab>

<telerik:RadTab Text="Groups">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">

<telerik:RadPageView ID="RadPageView1" runat="server">

<telerik:RadGrid ID="usersRadGrid" runat="server" AutoGenerateColumns="false" AllowPaging="true" OnItemCommand="usersRadGrid_ItemCommand" OnItemDataBound="usersRadGrid_ItemDataBound">

<MasterTableView runat="server" CommandItemDisplay="Top" NoMasterRecordsText="No user records found. Please try another search."

EditMode="PopUp">

<Columns>

<telerik:GridEditCommandColumn />

<telerik:GridBoundColumn DataField="FirstName" AllowFiltering="true" HeaderText="First Name" />

<telerik:GridBoundColumn DataField="LastName" AllowFiltering="true" HeaderText="Last Name" />

<telerik:GridBoundColumn DataField="EmployeeID" AllowFiltering="true" HeaderText="Employee ID" />

<telerik:GridBoundColumn DataField="ID" AllowFiltering="true" HeaderText="ID" Visible="false" />

</Columns>

<CommandItemSettings AddNewRecordText="Add New User" ShowAddNewRecordButton="true" />

<CommandItemTemplate>

<telerik:RadTextBox ID="userSearchFirstName" runat="server" EmptyMessage="Search First Name" CssClass="padding" />

<telerik:RadTextBox ID="userSearchLastName" runat="server" EmptyMessage="Search Last Name" CssClass="padding" />

<telerik:RadTextBox ID="userSearchID" runat="server" EmptyMessage="Search Employee ID" CssClass="padding" />

<telerik:RadButton ID="userSearchBtn" runat="server" Text="Search" CssClass="padding" OnClick="userSearchBtn_Click" />

<asp:Label ID="userSearchNotify" runat="server" Text="* At Least One Field Must Be Filled Out" CssClass="error" Visible="false" />

<div style="float:right;padding-right:20px;margin:5px 5px 5px 0px;">

<input class="rgAdd" style="margin-right:0px;" />

<asp:LinkButton ID="userAddRecord" runat="server" CommandName="InitInsert">Add New User</asp:LinkButton>

</div>

</CommandItemTemplate>

<EditFormSettings PopUpSettings-Modal="true" EditFormType="Template" PopUpSettings-Width="500px">

<FormTemplate>

<table width="500px" border="0">

<tr>

<td>First Name: </td>

<td><telerik:RadTextBox ID="editUserFirstName" runat="server" /></td>

<td>Last Name: </td>

<td><telerik:RadTextBox ID="editUserLastName" runat="server" /></td>

</tr>

<tr>

<td>Employee ID: </td>

<td>

<telerik:RadTextBox ID="editUserID" runat="server" />

<asp:Label ID="userID" runat="server" Text='<%#Bind("ID") %>' Visible="false" />

</td>

<td>Department: </td>

<td><telerik:RadTextBox ID="editUserDepartment" runat="server" EmptyMessage="No Department Set" /></td>

</tr>

<tr>

<td>Email: </td>

<td><telerik:RadTextBox ID="editUserEmail" runat="server" EmptyMessage="No Email Set" /></td>

<td>Last Updated: </td>

<td><telerik:RadTextBox ID="editUserLastUpdate" runat="server" ReadOnly="true" /></td>

</tr>

<tr>

<td>Active: </td>

<td>

<telerik:RadComboBox ID="editUserActive" runat="server" Width="60px">

<Items>

<telerik:RadComboBoxItem Value="1" Text="Yes" />

<telerik:RadComboBoxItem Value="0" Text="No" />

</Items>

</telerik:RadComboBox>

</td>

<td>Vendor User: </td>

<td>

<telerik:RadComboBox ID="editUserVendor" runat="server" Width="60px">

<Items>

<telerik:RadComboBoxItem Value="1" Text="Yes" />

<telerik:RadComboBoxItem Value="0" Text="No" />

</Items>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>User Name: </td>

<td><telerik:RadTextBox ID="editUserUsername" runat="server" /></td>

<td>Password: </td>

<td><telerik:RadTextBox ID="editUserPassword" runat="server" EmptyMessage="No Password Set" /></td>

</tr>

<tr>

<td>PIN: </td>

<td colspan="3"><telerik:RadTextBox ID="editUserPIN" runat="server" /><asp:Label ID="PINvalue" runat="server" Visible="false" /></td>

</tr>

<tr>

<td>User Groups: </td>

<td><telerik:RadListBox ID="editUserCurrentGroups" runat="server" AllowTransfer="true" TransferToID="editUserAvailGroups" EnableDragAndDrop="true" SelectionMode="Multiple" EmptyMessage="User Doesn't Belong To Any Groups" width="190px" Height="200px"/></td>

<td colspan="2"><telerik:RadListBox ID="editUserAvailGroups" runat="server" EnableDragAndDrop="true" SelectionMode="Multiple" EmptyMessage="No Groups Available" width="175px" Height="200px" /></td>

</tr>

<tr>

<td colspan="1"><telerik:RadButton ID="editUserUpdateBtn" runat="server" Text="Save" CommandName="Update" /></td>

<td colspan="1"><telerik:RadButton ID="editUserClearBtn" runat="server" Text="Clear Badge" OnClick="editUserClearBtn_Click" /></td>

<td colspan="2"><asp:Label ID="editUserNotify" runat="server" Text="" CssClass="error" Visible="false" /></td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">

<telerik:RadGrid ID="groupsRadGrid" runat="server" AutoGenerateColumns="false" DataSourceID="groupsRadGridDataSource" AllowAutomaticUpdates="true">

<MasterTableView runat="server" CommandItemDisplay="Top" NoMasterRecordsText="No Groups Found" EditMode="InPlace" DataKeyNames="ID">

<Columns>

<telerik:GridEditCommandColumn HeaderStyle-Width="60px" />

<telerik:GridBoundColumn DataField="Name" AllowFiltering="true" HeaderText="Group Name" />

</Columns>

<CommandItemSettings AddNewRecordText="Add New Group" ShowRefreshButton="false" ShowAddNewRecordButton="false" />

</MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource ID="groupsRadGridDataSource" runat="server"

ConnectionString="<%$ ConnectionStrings:AssetWhereConnectionString %>"

SelectCommand="SELECT ID, Name FROM dbo.UserGroup" SelectCommandType="Text"

UpdateCommand="UPDATE dbo.UserGroup SET Name=@Name WHERE ID=@ID">

<UpdateParameters>

<asp:Parameter Name="ID" />

<asp:Parameter Name="Name" />

</UpdateParameters>

</asp:SqlDataSource>

</telerik:RadPageView>

</telerik:RadMultiPage>

</telerik:RadAjaxPanel>

5 Answers, 1 is accepted

answered on 30 Aug 2011, 07:50 AM

Hi William ,

You can try this way to check browser version and change the edit mode of the RadGrid:

C#

protected void Page_Load(object sender, EventArgs e)

{

System.Web.HttpBrowserCapabilities browser = Request.Browser;

if (browser.Browser == "IE" && browser.Version == "7.0")

{

RadGrid1.MasterTableView.EditMode = GridEditMode.InPlace;

}

I hope this helps.

Best wishes,
Galin
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

answered on 30 Dec 2011, 08:20 AM

Hello Virgil,

As Dimo stated in the forum thread Shinu referred to, some scenarios with the modal popup edit form in IE7 are not supported and won't be fixed. For others, we may have workarounds we can suggest. In any case, it would be best if you can send us a sample project demonstrating your particular scenario. Thus, we can advise you with an approach that will work for you.

Veli
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now