Hello,
I have WebDialogForms on my page and asp UpdateProgress control that showing "Loading" picture when data is processing on the server. But WebDialogForm is always on top of it. I`ve tried to set maximum z-index to the UpdateProgress and decrease z-index for WebDialogForm but no luck. What should I do to cover the WebDialogForm with UpdateProgress?
Code below:
<asp:UpdateProgress ID="UpdateProgress" runat="server">
<ProgressTemplate>
<asp:Image ID="ImageLoading" ImageUrl="~/Images/wait_icon_loadingbox.gif" AlternateText="Processing" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
<ajaxToolkit:ModalPopupExtender ID="modalPopup" runat="server" TargetControlID="UpdateProgress"
PopupControlID="UpdateProgress" BackgroundCssClass="modalPopup" />
<ig:WebDialogWindow runat="server" ID="WebDialogWindow_RunEmptyCheck" InitialLocation="Centered"
Height="165px" Width="425px" Modal="true" WindowState="Hidden"
Style="line-height: normal" StyleSetName="Pear">
<AutoPostBackFlags WindowStateChange="On" />
<Header CaptionAlignment="Left" CaptionText="Run Empty check">
</Header>
<ContentPane BackColor="White">
<Template>
<div style="padding-top: 10px;">
<div style="float: left;text-align: center;">
<asp:Label ID="LabelRunEmptyCheckDialog" runat="server" style="padding-left: 10px;font-family: Times New Roman, Georgia, Times, serif; font-size: 16px; color: Black;" Visible="True">Batch number of source and destination units are different. Are you sure to start the batch?</asp:Label>
<asp:Label ID="LabelRunEmptyCheckBatchId" runat="server" Visible="False"></asp:Label>
<asp:Label ID="LabelWindowMode" runat="server" Visible="False"></asp:Label>
</div>
<div style="clear: both;">
<div style="float: right; padding-right: 10px; padding-top:10px;">
<asp:Button id="ButtonRunEmptyCheckOk" Text="Ok" runat="server" class="batch-status-button" OnClick="ButtonRunEmptyCheckOk_Click"/>
<asp:Button id="ButtonRunEmptyCheckCancel" Text="Cancel" runat="server" class="batch-status-button" OnClick="ButtonRunEmptyCheckCancel_Click"/>
</Template>
</ContentPane>
</ig:WebDialogWindow>
Hello Sergey,
Thank you for contacting Infragistics!
The WebDialogWindow is designed to render on top of the other elements. I recommend if you want the updare progress above the WebDialogWindow you put it in isn’t own WebDialogWindow and make sure in markup it exists below the other dialog window. From what I have been able to find z-index does not seem to affect the WebDialogWindow.
Hi Mike,
Not sure that I understand this: "put it in isn’t own WebDialogWindow". What does it mean?
Both WebDialogForm and UpdateProgress are on the main page.
Thank you for the update. That is a typo. What I mean is you should create a second WebDialogWindow and put the UpdateProgess inside of that. Then make sure the second WebDialogWindow is below the first in code so that it will display on top of the other one.
I put second webDialog at the beginning of the page then at the end of the page but no luck. Maybe because the first WebDialog is situated inside the asp Update panel? But I cannot place it outside and cannot place the second inside the update panel because I`m getting javascript errors.
One remark: the second webdialogform always appears behind the first one
Thank you for the update. When I create my own sample it is always the second dropdown that is on top. I am attaching my sample please run it and let me know what you see (Note I removed the ig_res folder). What version are you running? Do you have a sample that reproduces this behavior you can send me?
Great thanks for your help. I have found the reason. I have Modal="true". Thats why it was always on top.