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

105

Kevin posted over 17 years ago

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

<title>Untitled Page</title>

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

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

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

hey look, its a modal dialog.  SOMETIMES!!!

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

Text="CLOSE DIALOG NOW" />

</Template>

</ContentPane>

</cc1:WebDialogWindow>

</ContentTemplate>

</asp:UpdatePanel>

<p>

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

<p>

2.  See modal dialog work</p>

<p>

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

<p>

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

<p>

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

<p>

6.  Click the "CLOSE DIALOG NOW" Button, it closes</p>

<p>

7.  Open the dialog again</p>

<p>

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

<p>

 </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;

}

15

Mark Switzer posted over 17 years ago in reply to Mark Switzer

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

Cancel
15

Mark Switzer posted over 17 years ago in reply to [Infragistics] Rumen Stankov

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
Cancel
Reply

Cancel
28464

[Infragistics] Rumen Stankov posted over 17 years ago

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

Cancel