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
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 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.