Welcome Guest Search | Active Topics | Sign In | Register

Dialog with updateable controls in update panel Options
Duane
Posted: Wednesday, March 12, 2008 10:56:12 AM
Rank: Advanced Member
Groups: Member

Joined: 9/4/2007
Posts: 114
I have a dialog with a RadioButtonList and a DropDownList. The SelectedIndexChanged event of the RadioButtonList causes a postback to update the DropDownList with new values. An "OK" button exectutes the code to handle the selected values.

The RadioButtonList and DropDownList are inside an UpdatePanel, but when I select a different radio button option, the dialog disappears then reappars after postback, which the customer will not like.

Does the Partial Page update process not work with the Dialog to prevent the dialog from flashing off and on during postback?

Thanks for any advice/direction.
eo_support
Posted: Wednesday, March 12, 2008 11:13:59 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,098
Hi,

The dialog works fine with UpdatePanel. You can try the following code:

Code: HTML/ASPX
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>    
    <eo:Dialog runat="server" ID="Dialog1">
        <ContentTemplate>
            <asp:UpdatePanel runat="server" ID="UpdatePanel1">
                <ContentTemplate>
                    <asp:RadioButtonList runat="server" ID="RadioButtonList1" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                        <asp:ListItem>Item 1</asp:ListItem>
                        <asp:ListItem>Item 2</asp:ListItem>
                    </asp:RadioButtonList>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </ContentTemplate>
    </eo:Dialog>
    <div onclick="Dialog1.show()">show</div>
    </div>
    </form>
</body>


Code: C#
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
    Label1.Text = DateTime.Now.ToString();
}


All test are based on the latest build. So make sure you check that. Your problem may have to do with your page content:

http://www.essentialobjects.com/Forum/Default.aspx?g=posts&t=1186

Also try not to put the dialog inside any positioned element (for example, inside an <div style="position:absolute; ....">), the easiest way to avoid this is to place the dialog right after the opening <body> tag since the position of the dialog at design time doesn't matter.

Thanks
Duane
Posted: Wednesday, March 12, 2008 11:49:45 AM
Rank: Advanced Member
Groups: Member

Joined: 9/4/2007
Posts: 114
Ok, the sample code did not work. We are running version 4.0.8.2, and cannot update at this time due to time constraints and changes made after this build version. Can you verify this works under my current version?

Clicking your "show" div, resulted in a JScript error:
Microsoft JScript runtime error: Object doesn't support this property or method (Dialog1.show())

We are using VS 2008 3.5.

Below is the output from the script debugger:



eo_support wrote:
Hi,

The dialog works fine with UpdatePanel. You can try the following code:

Code: HTML/ASPX
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>    
    <eo:Dialog runat="server" ID="Dialog1">
        <ContentTemplate>
            <asp:UpdatePanel runat="server" ID="UpdatePanel1">
                <ContentTemplate>
                    <asp:RadioButtonList runat="server" ID="RadioButtonList1" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                        <asp:ListItem>Item 1</asp:ListItem>
                        <asp:ListItem>Item 2</asp:ListItem>
                    </asp:RadioButtonList>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </ContentTemplate>
    </eo:Dialog>
    <div onclick="Dialog1.show()">show</div>
    </div>
    </form>
</body>


Code: C#
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
    Label1.Text = DateTime.Now.ToString();
}


All test are based on the latest build. So make sure you check that. Your problem may have to do with your page content:

http://www.essentialobjects.com/Forum/Default.aspx?g=posts&t=1186

Also try not to put the dialog inside any positioned element (for example, inside an <div style="position:absolute; ....">), the easiest way to avoid this is to place the dialog right after the opening <body> tag since the position of the dialog at design time doesn't matter.

Thanks
eo_support
Posted: Wednesday, March 12, 2008 12:03:42 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,098
Hi,

Dialog1.show() only works on 2007.2 (5.0.x). In 2007.1 (4.0.x) you will need to use eo_GetObject("Dialog1").show().

That would not have anything to do with your problem though. We have fixed various bugs along the way, and most importantly, when Visual Studio/ASP.NET AJAX keeps changing, we made changes accordingly. So it's not unusual at all that an old version of EO.Web Controls does not work with the newest version of Visual Studio/ASP.NET AJAX. So I would still think upgrading to the latest is the best option (sorry about that!). Fortunately the latest version is backwards compatible with your version, so there shouldn't be any code changes needed. You may however need a new license file:

http://www.essentialobjects.com/Forum/Default.aspx?g=posts&t=50

Thanks
Duane
Posted: Wednesday, March 12, 2008 1:27:03 PM
Rank: Advanced Member
Groups: Member

Joined: 9/4/2007
Posts: 114
Hello,

Ok, I got your sample, and my trimmed down page to work. But, we have a few other differences that may be causing this.

1) We are using MasterPages, so the <form> tag is in the master page.

2) We use: Dialog_PrintOptions.InitialState = EO.Web.DialogState.Hidden | Visible to hide and show the dialog, not the eo_GetObject() function.

3) We have multiple dialogs on this particular page, as well as other pages.

Could these issues cause the page flashing effect on postback?

Thanks
eo_support
Posted: Wednesday, March 12, 2008 1:39:16 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,098
Hi,

We are not aware of any those would cause the problem. Can you follow the steps we posted in our first reply? We are here posting it again:

http://www.essentialobjects.com/Forum/Default.aspx?g=posts&t=1186

This is the best and easiest way for you to find the problem, especiall when you already have a trimmed down version that works.

Thanks
Duane
Posted: Thursday, March 13, 2008 2:52:06 PM
Rank: Advanced Member
Groups: Member

Joined: 9/4/2007
Posts: 114
Hello,

I found the cause of the problem in this page, but the fix has introduced a new problem.

We are calling the dialog from asp:LinkButton(s) in a GridView TemplateField. In order for the dialog to open [at all] using this method, the dialog must be wrapped in an UpdatePanel, otherwise it never shows. This works fine as long as there is no postback during the dialog option selection.

The event handler for the LinkButton takes the command argument and sets:
Dialog.InitialState = EO.Web.DialogState.Visible;
ID.Text = List.SelectedValue.ToString(); // ID is a hidded field

I am not completely sure why, but this seemed be the cause of the hiding/showing of the dialog.

I found that replacing the LinkButtons in the TemplateField with:
<span onclick="eo_GetObject('Dialog_PrintOptions').show(); ...>Print</span>
...and removing the UpdatePanel around the dialog, leaving only the UpdatePanel around the table inside the dialog, the postback processed as expected, (no hiding, then redisplaying the dialog).

Unfortuately, I need to pass a CommandArgument to the dialog so the form knows which item in the grid to send to the print job. The span does not handle this, so while the dialog works in postback, I don't have the id of the print item. Possibly I can call a script to write the id to the hidden field so I can access it from the print handler.


I have anther form which uses a similar dialog, but it is launched from a EO.menu option. Can the eo_GetObject() function be called from the menu? This one does not need the row item argument, since the item to print is already selected.

Thanks
eo_support
Posted: Thursday, March 13, 2008 3:24:15 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,098
Duane wrote:
I am not completely sure why, but this seemed be the cause of the hiding/showing of the dialog.

I found that replacing the LinkButtons in the TemplateField with:
<span onclick="eo_GetObject('Dialog_PrintOptions').show(); ...>Print</span>
...and removing the UpdatePanel around the dialog, leaving only the UpdatePanel around the table inside the dialog, the postback processed as expected, (no hiding, then redisplaying the dialog).


This makes perfect sense. The dialog is always rendered hidden initially, regardless what value InitialState is set to. When InitialState is set to Visible, it is first rendered hidden, then displayed by JavaScript. This is necessary because the dialog is usually displayed at the center of the browser window, unless the page loads and the client side JavaScript can figure out how big your browser window is, the dialog can not be set visible, otherwise it's will be at the wrong position.

As a result, you should avoid AJAX updating an visible dialog. AJAX updating an invisible dialog works just fine, so as updating the contents of a visible dialog as you have discovered.

Duane wrote:
Unfortuately, I need to pass a CommandArgument to the dialog so the form knows which item in the grid to send to the print job. The span does not handle this, so while the dialog works in postback, I don't have the id of the print item. Possibly I can call a script to write the id to the hidden field so I can access it from the print handler.


There are a number of ways to get around this. One way is to render down the information along with the page. That would require some JavaScript coding. The rest of the post outlines the basic ideas:

1. Replace your span with something like this:
<span onclick='print(<%#DataBinder.Eval(Container.DataItem, "your_id_field");'></span>

Here it grabs "your_id_field" from your data source (obviously you will need to modify this data binding expression to fit your need) and generates the JavaScript based on it. For example, it may generates <span>show_dialog(1);</span> for the first record and <span show_dialog(5);></span>. The idea is to get the value down to the client along with the span.

2. "print" is a JavaScript function you would add into your page:

Code: JavaScript
function print(id)
{
    //Save the argument into hidden field SomeHiddenField
    var e = document.getElementById(<%=SomeHiddenField.ClientID%>);
    e.value = id;

    //Display the dialog
    eo_GetObject('Dialog_PrintOptions').show(); 
}


This should allow you pass any integer data (string data gets a bit complicated because quotation marks) from the data source down. Obviously if you don't really need to pass anything from the data source, then there is even no need for it to be that complicated. You can pretty much replace the first two lines of the code in print to get the data from wherever.

Hope this helps.

Thanks




You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.