hi,
i have problem with a modal webdialog window inside a webtab. When maximized the modal webdialogwindow it is hidden behind the webtab (tested with firefox and ie9). i tried playing around with firebug and setting the position of the webdialog div to fixed works (but the positions are wrong in this case). using netadvantage 11.2 with newest service release.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication3.WebForm1" %><%@ Register assembly="Infragistics4.Web.v11.2, Version=11.2.20112.2025, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI" tagprefix="ig" %><%@ Register assembly="Infragistics4.Web.v11.2, Version=11.2.20112.2025, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.LayoutControls" tagprefix="ig" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager> <ig:WebTab ID="WebTab1" runat="server" Height="200px" Width="300px"> <tabs> <ig:ContentTabItem runat="server" Text="Tab 1"> <Template> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <ig:WebDialogWindow ID="WebDialogWindow1" runat="server" WindowState="Hidden" Modal="true"> <Header> <CloseBox Visible="true" /> </Header> <ContentPane> <Template> <p>blah</p> </Template> </ContentPane> </ig:WebDialogWindow> <asp:Button ID="Button1" runat="server" Text="Button" /> </ContentTemplate> </asp:UpdatePanel> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2"> </ig:ContentTabItem> </tabs> </ig:WebTab> </form></body></html>
code behind:
Public Class WebForm1 Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load End Sub Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click WebDialogWindow1.WindowState = Infragistics.Web.UI.LayoutControls.DialogWindowState.Maximized End SubEnd Class
Hello pfendt ,
Thank you for posting in our forums.
First of all I advise you removing the UpdatePanel as ContentTabItem is AjaxEnabled by default
Regarding the modal dialog it is rendered as absolute position and big z-index in order to display over all elements.
So I strongly recommend you using JS function in order to show the dialog window
function showWDW() { oWebDialogWindow1 = $find('<%= WebDialogWindow1.ClientID %>'); oWebDialogWindow1.set_windowState($IG.DialogWindowState.Normal); return false; } <ig:WebTab ID="WebTab1" runat="server" Height="400px" Width="400px"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1" EnableAjax="True" AutoSize="False" EnableRelativeLayout="false" EnableDynamicUpdatePanel="False" ScrollBars="Hidden"> <Template> <ig:WebDialogWindow ID="WebDialogWindow1" runat="server" UseBodyAsParent="false" WindowState="Hidden" Modal="true" InitialLocation="Manual" Moveable="true" Width="200px" Height="200px"> <Header> <CloseBox Visible="true" /> </Header> <ContentPane> <Template> <p> blah </p> </Template> </ContentPane> </ig:WebDialogWindow> <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return showWDW();" /> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2"> </ig:ContentTabItem> </Tabs> </ig:WebTab>
function showWDW() {
oWebDialogWindow1 = $find('<%= WebDialogWindow1.ClientID %>');
oWebDialogWindow1.set_windowState($IG.DialogWindowState.Normal);
return false;
}
<ig:WebTab ID="WebTab1" runat="server" Height="400px" Width="400px">
<Tabs>
<ig:ContentTabItem runat="server" Text="Tab 1" EnableAjax="True" AutoSize="False"
EnableRelativeLayout="false" EnableDynamicUpdatePanel="False" ScrollBars="Hidden">
<Template>
<ig:WebDialogWindow ID="WebDialogWindow1" runat="server" UseBodyAsParent="false"
WindowState="Hidden" Modal="true" InitialLocation="Manual" Moveable="true" Width="200px" Height="200px">
<Header>
<CloseBox Visible="true" />
</Header>
<ContentPane>
<p>
blah
</p>
</Template>
</ContentPane>
</ig:WebDialogWindow>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return showWDW();" />
</ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="Tab 2">
</Tabs>
</ig:WebTab>
Please let me know if you have further questions.
thx for the suggestion, but i cannot remove the updatepanels. this code sample is only a little part of a big site where different parts of the page are updated independently.
i would be acceptable if i could update the tabcontent manually (even if postback is not originating from this control, like updatepanels conditional mode).
also, it does not work if i put a updatepanel around the webtab, but i need partial postbacks outside of the tab too.
to be clear, this worked with the old infragistic ultrawebtab. i'm in the process of converting the site to the new components and this is one of the last problems.
Hello,
Thank you for you update.
You can add update panel inside the ContentTabItem if you disable the Ajax .
You can set the new windowState inside the client side event function
<script type="text/javascript"> function showWDW() { oWebDialogWindow1 = $find('<%= WebDialogWindow1.ClientID %>'); oWebDialogWindow1.set_windowState($IG.DialogWindowState.Normal); } </script> <ig:WebTab ID="WebTab1" runat="server" Height="400px" Width="400px"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1" EnableAjax="False" AutoSize="False" EnableRelativeLayout="false" EnableDynamicUpdatePanel="False" ScrollBars="Hidden"> <Template> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <ig:WebDialogWindow ID="WebDialogWindow1" runat="server" UseBodyAsParent="false" WindowState="Hidden" Modal="true" InitialLocation="Manual" Moveable="true" Width="200px" Height="200px"> <Header> <CloseBox Visible="true" /> </Header> <ContentPane> <Template> <p> blah </p> </Template> </ContentPane> </ig:WebDialogWindow> <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return showWDW();" OnClick="Button1_Click" /> </ContentTemplate> </asp:UpdatePanel> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2"> </ig:ContentTabItem> </Tabs> </ig:WebTab>
</script>
<ig:ContentTabItem runat="server" Text="Tab 1" EnableAjax="False" AutoSize="False"
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
WindowState="Hidden" Modal="true" InitialLocation="Manual" Moveable="true" Width="200px"
Height="200px">
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return showWDW();"
OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Please let me know if this is acceptable for you.
Hi Sofia,
I am having issue with webtab and webDialogWindow.
Issue 1: WebDialogWindow displaying inside webtab.
issue 2: I am able to access parent page WebMenu and LeftMenu items when WebDialogWindow Opened
Issue 3 I tried to open DailogWindow of Window. again same issue.. displaying inside the 1st child.
<ig:WebDialogWindow ID="wbDialog" runat="server" Height="90%" Width="90%" UseBodyAsParent="true"Modal="true" InitialLocation="Centered" Moveable="true" ModalTabIndices="false"WindowState="Hidden"><ClientEvents Initialize="wbDialogs_Initialize"></ClientEvents></ig:WebDialogWindow>
function wbDialogs_Initialize(sender, eventArgs) {sender.get_element().style.position = 'static';}
I tried in many ways, but I couldn't resolve the issue. Can you please help me in this.
Thank you.
Thank you for the clarification regarding the window's behavior
If you want WDW maximized, UseBodyAsParent is exactly the property you need to use but it has limitation: "that option can not be used if WebDialogWindow is located inside of UpdatePanel or other asynchronous-postback container"
http://help.infragistics.com/NetAdvantage/ASPNET/2011.2?page=Known_Issues_Known_Issues_and_Breaking_Changes.html
So if you want to get advanage of it you should put the dialog window outside of the UpdatePanel
<ig:WebTab ID="WebTab1" runat="server" Height="400px" Width="400px" EnableOverlappingTabs="true"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1" EnableAjax="True" AutoSize="True" EnableRelativeLayout="true" EnableDynamicUpdatePanel="False" ScrollBars="Hidden"> <Template> <%-- <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> </ContentTemplate> </asp:UpdatePanel>--%> <ig:WebDialogWindow ID="WebDialogWindow1" runat="server" WindowState="Hidden" Modal="true" InitialLocation="Centered" Moveable="true" UseBodyAsParent="true" Width="100%" Height="100%" ModalTabIndices="false"> <Header> <CloseBox Visible="true" /> </Header> <ContentPane> <Template> <p> blah </p> </Template> </ContentPane> </ig:WebDialogWindow> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2"> </ig:ContentTabItem> </Tabs> </ig:WebTab>
<ig:ContentTabItem runat="server" Text="Tab 1" EnableAjax="True" AutoSize="True"
EnableRelativeLayout="true" EnableDynamicUpdatePanel="False" ScrollBars="Hidden">
<%-- <asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>--%>
<ig:WebDialogWindow ID="WebDialogWindow1" runat="server" WindowState="Hidden" Modal="true"
InitialLocation="Centered" Moveable="true" UseBodyAsParent="true" Width="100%"
Height="100%" ModalTabIndices="false">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
i found a way to put the dialog outside of the webtab. it works for me now, but i think this behavior is broken nonetheless.
hi, there are 2 problems with this:
1) i need to set the dialog with values from the database, so i need the show it from code behind.
2) now the dialog is maximized inside of the webtab, i need it maximized on the browser screen. i tried playing around with usebodyasparent, but this does not make a difference.