Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Wilhelm
580
WebDialogWindow inside WebTab
posted

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 Sub
End Class

 

 

 

 

Parents
No Data
Reply
  • 19693
    Suggested Answer
    posted

    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>

     

    Please let me know if you have further questions.

Children