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
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.
Hello pfendt ,
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>
<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>
<p>
blah
</p>
</Template>
</ContentPane>
</ig:WebDialogWindow>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="Tab 2">
</Tabs>
</ig:WebTab>
Please let me know if you have further questions.
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.
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>
function showWDW() {
oWebDialogWindow1 = $find('<%= WebDialogWindow1.ClientID %>');
oWebDialogWindow1.set_windowState($IG.DialogWindowState.Normal);
}
</script>
<ig:WebTab ID="WebTab1" runat="server" Height="400px" Width="400px">
<ig:ContentTabItem runat="server" Text="Tab 1" EnableAjax="False" AutoSize="False"
EnableRelativeLayout="false" EnableDynamicUpdatePanel="False" ScrollBars="Hidden">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ig:WebDialogWindow ID="WebDialogWindow1" runat="server" UseBodyAsParent="false"
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" />
</asp:UpdatePanel>
Please let me know if this is acceptable for you.