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

Modal poup not working "indise modal edit grid"

6 Answers 206 Views

Grid

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

aykut asked on 29 Apr 2011, 11:05 AM

Untitled.jpg

I have a radgrid. It opens modal popup for edit/insert. inside this edit template there's another radgrid. it opens modal popup for edit/indert also. Problem is, second grid popup is not modal. Also from fist grid, when popup modal opens, page disables, as it should be, but radmenu still works... I tried very simple samples of hierarchy radgrid samples and grid-> modal popup - grid -> modalpopup combination always gives same result. "Radgrid poopup's edit functionality is not working IF they are another radgrid's modal edit popup"

Also you can see attached imate to understand what I mean & problem about radmenu. as you can see though modal opous opened mouse can still drop menu items and if you click them you can navigate.

any suggestions please ?

<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" CodePage="1254" AutoEventWireup="false"

CodeFile="Satinalmalar.aspx.vb" Inherits="Satinalmalar" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">

<style type="text/css">

.style1

{

width: 100%;

}

.style2

{

width: 29px;

}

.style3

{

}

.style4

{

width: 155px;

}

.style5

{

width: 256px;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">

<h2>

Products

</h2>

<br />

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Sunset">

</telerik:RadWindowManager>

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" CellSpacing="0"

DataSourceID="SqlDataSource_Faturalar" GridLines="None" AllowAutomaticDeletes="True"

AllowAutomaticInserts="True" AllowAutomaticUpdates="True" Width="469px" Skin="Sunset">

<MasterTableView DataKeyNames="ID, Guidid" DataSourceID="SqlDataSource_Faturalar"

CommandItemDisplay="Top" EditMode="PopUp">

<CommandItemSettings ExportToPdfText="Export to PDF" AddNewRecordText="Yeni kayıt"

ShowRefreshButton="False"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="ID" DataType="System.Int32" FilterControlAltText="Filter ID column"

HeaderText="ID" ReadOnly="True" Visible="false" SortExpression="ID" UniqueName="ID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FirmaAdi" FilterControlAltText="Filter FirmaAdi column"

HeaderText="FirmaAdi" SortExpression="FirmaAdi" UniqueName="FirmaAdi">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FaturaNo" FilterControlAltText="Filter FaturaNo column"

HeaderText="FaturaNo" SortExpression="FaturaNo" UniqueName="FaturaNo">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Tarih" FilterControlAltText="Filter Tarih column"

HeaderText="Tarih" SortExpression="Tarih" UniqueName="Tarih">

</telerik:GridBoundColumn>

<telerik:GridEditCommandColumn CancelText="İptal" EditText="Güncelle" FilterControlAltText="Filter EditCommandColumn column"

InsertText="Ekle" UpdateText="Kaydet">

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn CommandName="Delete" ConfirmText="Kaydı silmek istediğinize eminmisiniz ?"

ConfirmTitle="KarinaMira" FilterControlAltText="Filter column column" UniqueName="column"

ConfirmDialogType="RadWindow" Text="Sil">

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings EditFormType="Template" InsertCaption="Yeni Kayıt" CaptionFormatString="Güncelleme">

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

<FormTemplate>

<table class="style1">

<tr>

<td class="style2">

</td>

<td class="style3">

Firma Adı

</td>

<td>

<telerik:RadComboBox ID="RadComboBox1" runat="server" DataSourceID="SqlDataSource_Firmalar"

DataTextField="FirmaAdi" DataValueField="Guidid" EmptyMessage="Seçiniz" Skin="Outlook"

OnDataBound="RadComboBox1_DataBound" SelectedValue='<%# Bind("FirmaGuidid") %>'>

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="RadComboBox1"

ErrorMessage="**" Font-Bold="True" Font-Size="Small" ForeColor="#CC3300"></asp:RequiredFieldValidator>

</td>

<td>

</td>

</tr>

<tr>

<td class="style2">

</td>

<td class="style3">

Fatura No

</td>

<td>

<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("FaturaNo") %>'></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="TextBox2"

ErrorMessage="**" Font-Bold="True" Font-Size="Small" ForeColor="#CC3300"></asp:RequiredFieldValidator>

</td>

<td>

</td>

</tr>

<tr>

<td class="style2">

</td>

<td class="style3">

Tarih

</td>

<td>

<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Tarih") %>'></asp:TextBox>

</td>

<td>

</td>

</tr>

<tr>

<td class="style2">

</td>

<td class="style3">

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td class="style2">

</td>

<td class="style3" colspan="2">

detay<br />

<telerik:RadGrid ID="RadGrid2" runat="server" AllowAutomaticDeletes="True" OnNeedDataSource="RadGrid2_NeedDataSource"

OnUpdateCommand="RadGrid2_UpdateCommand" OnInsertCommand="RadGrid2_InsertCommand"

OnItemCommand="RadGrid2_ItemCommand" AutoGenerateColumns="False" DataKeyNames="No"

OnDeleteCommand="RadGrid2_DeleteCommand" CellSpacing="0" GridLines="None">

<MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" EditMode="PopUp"

ShowHeadersWhenNoRecords="true">

<CommandItemSettings ExportToPdfText="Export to PDF" AddNewRecordText="Yeni fatura kalemi"

ShowRefreshButton="False" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn DataField="No" DataType="System.Int32" FilterControlAltText="Filter No column"

Visible="false" HeaderText="No" SortExpression="No" UniqueName="No">

<EditItemTemplate>

<asp:TextBox ID="NoTextBox_" runat="server" Width="40px" Text='<%# Bind("No") %>'></asp:TextBox>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="NoLabel" runat="server" Text='<%# Eval("No") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Urun" FilterControlAltText="Filter Urun column"

HeaderText="Ürün" SortExpression="Urun" UniqueName="Urun">

<EditItemTemplate>

<telerik:RadComboBox ID="RadComboBoxUrun_" runat="server" DataSourceID="SqlDataSource_Urunler"

DataTextField="UrunAdi" DataValueField="Guidid" EmptyMessage="Seçiniz" Skin="Outlook"

OnDataBound="RadComboBoxUrun_DataBound" SelectedValue='<%# Bind("UrunGuidid") %>'>

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator5_" runat="server" ControlToValidate="RadComboBoxUrun_"

ErrorMessage="**" Font-Bold="True" Font-Size="Small" ForeColor="#CC3300"></asp:RequiredFieldValidator>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="UrunLabel" runat="server" Text='<%# Eval("Urun") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Miktar" FilterControlAltText="Filter Miktar column"

HeaderText="Miktar" SortExpression="Miktar" UniqueName="Miktar">

<EditItemTemplate>

<asp:TextBox ID="MiktarTextBoxX" runat="server" Width="40px" Text='<%# Bind("Miktar") %>'></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator6x" runat="server" ControlToValidate="MiktarTextBoxX"

ErrorMessage="**" Font-Bold="True" Font-Size="Small" ForeColor="#CC3300"></asp:RequiredFieldValidator>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="MiktarLabel" runat="server" Text='<%# Eval("Miktar") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Birim" FilterControlAltText="Filter Birim column"

HeaderText="Birim" SortExpression="Birim" UniqueName="Birim">

<EditItemTemplate>

<asp:TextBox ID="BirimTextBox_" runat="server" Width="40px" ReadOnly="true" Text='<%# Bind("Birim") %>'></asp:TextBox>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="BirimLabel" runat="server" Text='<%# Eval("Birim") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="BirimFiyat" FilterControlAltText="Filter BirimFiyat column"

HeaderText="Birim Fiyat" SortExpression="BirimFiyat" UniqueName="BirimFiyat">

<EditItemTemplate>

<asp:TextBox ID="BirimFiyatTextBox_" runat="server" Width="40px" Text='<%# Bind("BirimFiyat") %>'></asp:TextBox>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="BirimFiyatLabel" runat="server" Text='<%# Eval("BirimFiyat") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="ToplamFiyat" FilterControlAltText="Filter ToplamFiyat column"

HeaderText="ToplamFiyat" SortExpression="ToplamFiyat" UniqueName="ToplamFiyat">

<EditItemTemplate>

<asp:TextBox ID="ToplamFiyatTextBox_" runat="server" Width="60px" ReadOnly="true"

Text='<%# Bind("ToplamFiyat") %>'></asp:TextBox>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="ToplamFiyatLabel" runat="server" Text='<%# Eval("ToplamFiyat") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridEditCommandColumn CancelText="İptal" EditText="Güncelle" FilterControlAltText="Filter EditCommandColumn column"

InsertText="Ekle" UpdateText="Kaydet">

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn CommandName="Delete" ConfirmText="Kaydı silmek istediğinize eminmisiniz ?"

ConfirmTitle="KarinaMira" FilterControlAltText="Filter column column" UniqueName="column"

ConfirmDialogType="RadWindow" Text="Sil">

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings EditFormType="Template">

<EditColumn FilterControlAltText="Filter EditCommandColumn1 column" UpdateText="Kaydet"

CancelText="İptal" UniqueName="EditCommandColumn1">

</EditColumn>

<FormTemplate>

<table class="style1">

<tr>

<td class="style5">

Ürün

</td>

<td>

<telerik:RadComboBox ID="RadComboBoxUrun" runat="server" DataSourceID="SqlDataSource_Urunler"

DataTextField="UrunAdi" DataValueField="Guidid" EmptyMessage="Seçiniz" OnDataBound="RadComboBoxUrun_DataBound"

SelectedValue='<%# Bind("UrunGuidid") %>' Skin="Outlook">

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="RadComboBoxUrun"

ErrorMessage="**" Font-Bold="True" Font-Size="Small" ForeColor="#CC3300"></asp:RequiredFieldValidator>

</td>

<td>

</td>

</tr>

<tr>

<td>

<asp:TextBox ID="NoTextBox" runat="server" Text='<%# Bind("No") %>' Visible="false"

Width="40px"></asp:TextBox>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td class="style5">

Miktar

</td>

<td>

<telerik:RadNumericTextBox ID="MiktarTextBox" runat="server" Width="40px" Culture="tr-TR"

DbValue ='<%# Bind("Miktar") %>'>

</telerik:RadNumericTextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="MiktarTextBox"

ErrorMessage="**" Font-Bold="True" Font-Size="Small" ForeColor="#CC3300"></asp:RequiredFieldValidator>

<asp:RangeValidator ID="RangeValidator1" runat="server" MinimumValue="0" MaximumValue="999999999" ErrorMessage="**" Font-Bold="True" Font-Size="Small" ForeColor="#CC3300" ControlToValidate="MiktarTextBox"></asp:RangeValidator>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td class="style5">

Birim

</td>

<td>

<asp:TextBox ID="BirimTextBox" runat="server" Width="40px" ReadOnly="true" Text='<%# Bind("Birim") %>'></asp:TextBox>

</td>

<td>

</td>

</tr>

<tr>

<td class="style5">

Birim Fiyat

</td>

<td>

<telerik:RadNumericTextBox ID="BirimFiyatTextBox" runat="server" dbvalue='<%# Bind("BirimFiyat") %>'

Culture="tr-TR" Width="40px">

</telerik:RadNumericTextBox>

</td>

<td>

</td>

</tr>

<tr>

<td class="style5">

Toplam Fiyat

</td>

<td>

<asp:TextBox ID="ToplamFiyatTextBox" runat="server" ReadOnly="true" Text='<%# Bind("ToplamFiyat") %>'

Width="60px"></asp:TextBox>

</td>

<td>

</td>

</tr>

<tr>

<td class="style5">

ddd

</td>

<td colspan="2">

<table style="width: 374px">

<tr>

<td>

<telerik:RadButton ID="RadButton11" runat="server" CommandName='<%# Iif (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>'

Skin="Hay" Text='<%# Iif (TypeOf Container is GridEditFormInsertItem, "Ekle", "Kaydet") %>'

Width="80px">

</telerik:RadButton>

</td>

<td>

<telerik:RadButton ID="RadButton33" runat="server" CausesValidation="False" CommandName="Cancel"

Skin="Hay" Text="İptal" Width="90px">

</telerik:RadButton>

</td>

</tr>

</table>

</td>

</tr>

</table>

</FormTemplate>

<PopUpSettings Modal="True" Height="300px" />

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

</HeaderContextMenu>

</telerik:RadGrid>

<p>

</p>

<p>

</p>

</td>

<td>

<asp:TextBox ID="TextBox_Guidid" runat="server" Visible="false" Text='<%# Bind("Guidid") %>'></asp:TextBox>

</td>

</tr>

<tr>

<td class="style2">

</td>

<td class="style3">

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td class="style2">

</td>

<td class="style3" colspan="2">

<table style="width: 374px">

<tr>

<td>

<telerik:RadButton ID="RadButton11" runat="server" CommandName='<%# Iif (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>'

Skin="Hay" Text='<%# Iif (TypeOf Container is GridEditFormInsertItem, "Ekle", "Kaydet") %>'

Width="80px">

</telerik:RadButton>

</td>

<td>

<telerik:RadButton ID="RadButton33" runat="server" CausesValidation="False" CommandName="Cancel"

Skin="Hay" Text="İptal" Width="90px">

</telerik:RadButton>

</td>

</tr>

</table>

</td>

<td>

</td>

</tr>

<tr>

<td class="style2">

</td>

<td class="style3">

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</FormTemplate>

<PopUpSettings Modal="True" Width="800px" ShowCaptionInEditForm="true" />

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

</HeaderContextMenu>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource_Faturalar" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringNET %>"

DeleteCommand="DELETE FROM [Faturalar] WHERE [ID] = @ID" InsertCommand="INSERT INTO [Faturalar] ([FirmaGuidid], [FaturaNo], [Tarih], Guidid) VALUES (@FirmaGuidid, @FaturaNo, @Tarih, @Guidid)"

SelectCommand="SELECT * FROM [Faturalar_View]" UpdateCommand=

"UPDATE [Faturalar] SET [FirmaGuidid] = @FirmaGuidid, [FaturaNo] = @FaturaNo, [Tarih] = @Tarih, Guidid = @Guidid WHERE [ID] = @ID"

>

<DeleteParameters>

<asp:Parameter Name="ID" Type="Int32" />

</DeleteParameters>

<InsertParameters>

<asp:Parameter Name="FirmaGuidid" Type="String" />

<asp:Parameter Name="FaturaNo" Type="String" />

<asp:Parameter Name="Tarih" Type="String" />

<asp:Parameter Name="Guidid" Type="String" />

</InsertParameters>

<UpdateParameters>

<asp:Parameter Name="FirmaGuidid" Type="String" />

<asp:Parameter Name="FaturaNo" Type="String" />

<asp:Parameter Name="Tarih" Type="String" />

<asp:Parameter Name="ID" Type="Int32" />

<asp:Parameter Name="Guidid" Type="String" />

</UpdateParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource_Firmalar" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringNET %>"

SelectCommand="SELECT [FirmaAdi], [Guidid] FROM [Firmalar] ORDER BY [FirmaAdi]">

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource_Urunler" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringNET %>"

SelectCommand="SELECT UrunAdi, [Guidid] FROM Urunler ORDER BY UrunAdi"></asp:SqlDataSource>

</asp:Content>

6 Answers, 1 is accepted

answered on 04 May 2011, 02:07 PM

Hi,

Note that the described behaviour is expected as the popup edit form which contains RadGrid and its own popup edit form has the same z-index. You could manually find the forms on the client and modify there z-indexes. Note that the z index of the both edit forms is the same 2500. I suppose the RadMenu issue is caused by the same fact. The menu z-index is rather big by default so I would suggest you to explicitly set it to be smaller than 2490.

I hope this helps.

Greetings,
Maria Ilieva
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 06 May 2011, 09:36 AM

Dear Maria,

I changed z-index of menu to 1000 and menu problem solved. but Whatever I did I could not solve the "edit popup of grid in edit popup" problem.

Main grid edit form z-index:2600
    sub grid edit form z-index: 1000000000       everything fades and disabled in page

Main grid edit form z-index:2600
    sub grid edit form z-index: 4000    everything fades and disabled in page

Main grid edit form z-index:4000
    sub grid edit form z-index: 2600    I can still access the edit form of main grid + drop down combo
                                                          boxes' dropdown parts are not visible anymore

Main grid edit form z-index:4000
    sub grid edit form z-index: 8000    everything fades and disabled in page

I also tried putting subgrid into div, setting its z-index value to different values.

Please some suggestion or small sample. I'm stuck.

answered on 11 May 2011, 07:19 PM

okay, I understood but how ? can you point me to some direction so I can make a research ?

should I use OnPopUpShowing on ClientSettings section ? I already tried

<telerik:RadCodeBlock ID="codeblock1" runat="server">
<script type="text/javascript">
var popUp;
function PopUpShowing(sender, eventArgs) {

          popUp = eventArgs.get_popUp();
          var gridWidth = sender.get_element().offsetWidth;
          var gridHeight = sender.get_element().offsetHeight;
          var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
          var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
          popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
          popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
          popUp.style.disabled =true;

// here I tried different commands to change z-index but no luck...

}
</script>

<ClientSettings>
<ClientEvents OnPopUpShowing="PopUpShowing" />
</ClientSettings>

thiss that helped me before to change location of windows but didnt work neither. I tried different parameters for popUp.style object but could not change z-index. Also could not find any information on telerik related sites, forums, etc... Can't you obtain me more information please ?
As radgrid's some standard functions may not be working with this condition I feel like I'm lost in the dark.
please help me.. believe me I really tried so much things before I advise you.

best regards.

best regards.

answered on 17 May 2011, 02:12 PM

Hi,

I further tested your scenario and try to provide runnable application. Unfortunately after further testing on my side it seems that the required functionality could not be achieved with RadGrid control. In this scenario the inner editform container is the inner Grid itself. So when increasing the inner edit form z-index its automatically increase the container z-index and the editform could not appear above the container. This is limitation for such scenarios.

Please excuse us for the previous measled and for any inconvenience this limitation may lead.

All the best,
Maria Ilieva
the Telerik team