Infragistics Home

Infragistics Forums

Infragistics community online discussions.
Welcome to Infragistics Forums Sign in | FAQ
in Search

Works great ONCE. Not if you need to reopen though.

Last post 09-04-2008 11:29 by Mark Switzer. 3 replies.
Page 1 of 1 (4 items)
Sort Posts: Previous Next
  • 08-16-2008 15:20

    Works great ONCE. Not if you need to reopen though.

    This problem has been in existance ever since this control was added to the library.  I was hoping that in the 3.5 version it would finally be fixed, but it is not.  If you use the Modal Dialog with an update panel, it never works as expected.  You can get it to open once from the code behind by setting the panel to visible, but if you use the x button on the title bar and then reopen, nothing happens, if you write your own button to close it from the code behind, you can hide it, but when it reshows, it is no longer modal.  These bugs make this control pretty much useless, so I wonder why they have not been fixed yet.  Here is a quick sample.

     aspx file

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <%@ Register assembly="Infragistics35.Web.v8.2, Version=8.2.20082.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.LayoutControls" tagprefix="cc1" %>

    <!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>Untitled Page</title>

    <style type="text/css">

     

     

    .igdw_Control

    {

    background-color:Transparent;border-width:0px;

    }

     

    .ig_Control

    {

    background-color:White;

    font-size:xx-small;

    font-family: verdana;

    border:solid 1px #ABC1DE;

    cursor:default;color:Black;

    }

     

    .igdw_HeaderArea

    {

    background-color:Transparent;

    font-weight:bold;

    border-width:0px;

    height: 24px;

    cursor:default;color:White;

    }

     

    .igdw_HeaderCornerLeft

    {

    background-color:Transparent;

    background-position:top left ;

    background-image: url(C:/ModalExample/ig_res/Default/images/igdw_headercornerleft.gif);width: 9px;

    }

     

    .igdw_HeaderContent

    {

    background-image: url(C:/ModalExample/ig_res/Default/images/igdw_headercontent.gif);

    }

     

    .igdw_HeaderButtonArea

    {

    width: 120px;vertical-align:middle;

    }

     

    .igdw_HeaderCornerRight

    {

    background-position:top right ;

    background-image: url(C:/ModalExample/ig_res/Default/images/igdw_headercornerright.gif);

    width: 9px;

    }

     

    .igdw_BodyEdgeLeft

    {

    background-color:WhiteSmoke;

    background-repeat:repeat-y;

    border-right:solid 1px #BBBBBB;

    border-left:solid 1px #666666;

    width: 6px;

    }

     

    .igdw_BodyContentArea

    {

    background-color:White;vertical-align:top;

    }

     

    .igdw_BodyContent

    {

    border:solid 0px #999999;

    }

     

    .igdw_BodyEdgeRight

    {

    background-color:WhiteSmoke;

    border-right:solid 1px #666666;

    border-left:solid 1px #BBBBBB;width: 6px;

    }

     

    .igdw_BodyCornerBottomLeft

    {

    background-color:WhiteSmoke;

    background-repeat:no-repeat;

    background-image: url(C:/ModalExample/ig_res/Default/images/igdw_bodycornerbottomleft.gif);

    font-size:1px;

    height: 14px;width: 9px;

    }

     

    .igdw_BodyEdgeBottom

    {

    background-color:WhiteSmoke;

    background-repeat:repeat-x;

    background-image: url(C:/ModalExample/ig_res/Default/images/igdw_bodyedgebottom.gif);

    font-size:1px;

    border-top:solid 1px #BBBBBB;height: 14px;

    }

     

    .igdw_BodyCornerBottomRight

    {

    background-color:Gainsboro;

    background-repeat:no-repeat;

    background-image: url(C:/ModalExample/ig_res/Default/images/igdw_bodycornerbottomright.gif);

    font-size:1px;

    height: 14px;width: 9px;

    }

     

    </style>

    </head>

    <body>

    <form id="form1" runat="server">

    <p>

    This is a test page of the modal dialog box.<asp:ScriptManager

    ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    </p>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>

    <asp:Button ID="Button1" runat="server"

    onclick="Button1_Click" Text="Button" />

    <cc1:WebDialogWindow ID="WebDialogWindow1" runat="server" Height="300px"

    Modal="True" Visible="False" Width="400px">

    <ContentPane>

    <Template>

    hey look, its a modal dialog.&nbsp; SOMETIMES!!!

    <asp:Button ID="Button2" runat="server" onclick="Button2_Click"

    Text="CLOSE DIALOG NOW" />

    </Template>

    </ContentPane>

    </cc1:WebDialogWindow>

    </ContentTemplate>

    </asp:UpdatePanel>

    <p>

    1.&nbsp; Click the button above to open a modal dialog</p>

    <p>

    2.&nbsp; See modal dialog work</p>

    <p>

    3.&nbsp; Click the (x) Button to close dialog</p>

    <p>

    4.&nbsp; Open dialog again, it does not show up at all!!</p>

    <p>

    5.&nbsp; Refresh the page and open the dialog.&nbsp; It works!</p>

    <p>

    6.&nbsp; Click the &quot;CLOSE DIALOG NOW&quot; Button, it closes</p>

    <p>

    7.&nbsp; Open the dialog again</p>

    <p>

    8.&nbsp; It shows, but it is NOT modal!!!</p>

    <p>

    &nbsp;</p>

    <div>

     

    </div>

    </form>

    </body>

    </html>

    -----------------------------Code Behind -------------------------------------

    using System;

    using System.Configuration;

    using System.Data;

    using System.Linq;

    using System.Web;

    using System.Web.Security;

    using System.Web.UI;

    using System.Web.UI.HtmlControls;

    using System.Web.UI.WebControls;

    using System.Web.UI.WebControls.WebParts;

    using System.Xml.Linq;

    public partial class _Default : System.Web.UI.Page

    {

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void Button1_Click(object sender, EventArgs e)

    {

    WebDialogWindow1.Visible =
    true;

    }

    protected void Button2_Click(object sender, EventArgs e)

    {

    WebDialogWindow1.Visible =
    false;

    }

    }

    • Post Points: 20
  • 09-02-2008 1:54 In reply to

    Re: Works great ONCE. Not if you need to reopen though.

    Hello,

    The whole problem is that playing with the "Visible" property of any control while inside UpdatePanel does have its side effects. Setting visible to false for any control completely removes it from the control tree and it is not rendered at all on any page, so complex controls like WebDiaogWindow for example amy incur side-effects because of that. I started from your code and instead of using the Visible property, I used the WindowState property of the control and got much better results. Just make sure you remove the Visible = False hardcoded property in your ASPX declaration first, and then show/hide the dialog window with:

    protected void Page_Load(object sender, EventArgs e)

    {

    WebDialogWindow1.WindowState = DialogWindowState.Hidden;

    }

     

    protected void Button1_Click(object sender, EventArgs e)

    {

    WebDialogWindow1.WindowState = DialogWindowState.Normal;

    }

     

    protected void Button2_Click(object sender, EventArgs e)

    {

    WebDialogWindow1.WindowState = DialogWindowState.Hidden;

    }

    In any case, you can also submit your scenario as a bug through our official Bug Report system located here: http://devcenter.infragistics.com/Protected/SubmitSupportIssue.aspx Hope this helps.

    Best Regards,
    Rumen Stankov (MCSD.NET)
    The Infragistics ASP.NET Team
    • Post Points: 20
  • 09-03-2008 16:50 In reply to

    Re: Works great ONCE. Not if you need to reopen though.

    Rumen,

    I figured out pretty quickly on my own the need to set WindowState instead of the Visible property (would have been just too big of a bug to be true, so I dug into it a little bit).  However, the loss of the "modal-ness" from within an UpdatePanel is still an issue.

    The real issue is the combination of a modal WebDialogWindow inside an UpdatePanel, and "closing" the dialog via code such as:
    WebDialogWindow1.WindowState = DialogWindowState.Hidden

    (from a Button click event handler, for example).  In this scenario, the dialog is modal only the first time.  However, closing the dialog with the 'x' CloseBox ensures that the dialog stays modal every time it is opened.

    Is this the scenario you recommend be submitted as a bug, or is there a way to make this work properly?

    I seems this is an issue with the server-side behavior, since it works just fine using the CSOM calls such as:
    <input type="button" onclick="$find('<%=WebDialogWindow1.ClientID%>').set_windowState($IG.DialogWindowState.Hidden);" value="Cancel client-side" />

    and I imagine the CloseBox uses client-side scripting as well.

    Thanks,

    Mark

    • Post Points: 5
  • 09-04-2008 11:29 In reply to

    Re: Works great ONCE. Not if you need to reopen though.

    So, I'm certain the behavior I am detailing, which kprestage0 reported, is a valid bug.  Here is a workaround.  Use the OnClientClick and OnClick attributes for the "Cancel" and "OK" asp:Button that you want to cause the dialog to close.  For example, you may have 2 buttons in the WebDialogWindow Template like this:

    <asp:Button ID="_btnDialogOK" runat="server" Text="OK" OnClientClick="closeDialog();" OnClick="_btnDialogOK_Click" />
    <asp:Button ID="_btnDialogCancel" runat="server" Text="Cancel" OnClientClick="closeDialog();" />

    You would also need to give the JavaScript a handle to the WebDialopgWindow object.  That can be done with the Initialize ClientEvent:

    <ClientEvents  Initialize="_wdwOpenImport_Initialize" />

    The JavaScript would look like:

    <script language="javascript" type="text/javascript">

    var webDialogWindow;

    function _wdwOpenImport_Initialize(dialog)
    {
      webDialogWindow = dialog;
    }

    function closeDialog()
    {
      webDialogWindow.hide();
      return true;
    }
    </script>

    When the dialog initializes, _wdwOpenImport_Initialize is called, which stores a reference to the dialog in a JavaScript object.
    When the "Cancel" button is clicked, the JavaScript function specified in "OnClientClick" is called, which hides the dialog.
    When the "OK" button is clicked, the JavaScript function specified in "OnClientClick" is called, which hides the dialog; then, if that function returns true, the server-side event handler specified in "OnClick" will be called so that you can do whatever you need to on the server side.

    Of course, this is a workaround, and as such may not work for all scenarios.  It would be much nicer to just be able to use:

    WebDialogWindow1.WindowState = DialogWindowState.Hidden;

    on the serve-side and be done with it...

    • Post Points: 5
Page 1 of 1 (4 items)
Powered by Community Server (Commercial Edition), by Telligent Systems