Current filter:
                                You should refresh the page.
                                Support Center
                                0
                                  • When I display an ASPxPopup control, then the Page scrollbar disappears, and when I close the dialog, then it appears again. This is fine.
                                    However in some circumstances this is NOT working fine: when the dialog is on an UpdatePanel, and we do a Postback from the dialog, then the scrollbar does NOT appear after closing the dialog.

                                    I know that there are some workarounds for this, BUT they are problematic when we do NOT know if the dialog should be kept open after the Postback. The possible workarounds and their problems:

                                    - Workaround1: before sending the postback, I should close the dialog on the client side. But maybe the server decides (in the postback) to keep the dialog open, it means that the dialog is flickering while the postback is in progress. We want to avoid this.

                                    - Workaround2: set hideBodyScrollWhenModal property to false. But this also has a bug: before the first Postback it allows the user to move the window outside of the current content. But after the first PostBack it is working fine. See the attached hideBodyScrollWhenModal.avi video. Note: if you want to test this behavior then you have to run the solution from the hideBodyScrollWhenModalProblem.zip file.

                                    Regards, Gabor

                                    Steps to Reproduce:

                                    1. To reproduce problem1:

                                      A: open the solution from the "DevExpressPopupHidesScrollbar.zip" file

                                      B: run it -> the page scrollbar appears. This is OK.

                                      C: press the "Show Dialog" button -> the page scrollbar disappears. This is OK.

                                      D: press the "Postback" button.

                                      E: Hide the dialog using "X" -> the page scrollbar is still invisible. This is problem.

                                    2. To reproduce problem2:

                                      A: open the solution from the "hideBodyScrollWhenModalProblem.zip" file

                                      B: run it -> the page scrollbar appears. This is OK.

                                      C: press the "Show Dialog" button -> the page scrollbar is still visible. This is OK, because I set the hideBodyScrollWhenModal to false.

                                      D: if I move the dialog outside of the visible area (e.g to the rigth), then a scrollbar is added. I think this is a problem. The best would be to let the user navigate ONLY in the current page area, and do NOT let him to extend this area.

                                      E: press the "Postback" button. The scrollbar disappears. I think this is a problem also.

                                      F: I close the dialog with "X" ->The scrollbar appears again. I am happy again.

                                      G: press the "Show Dialog" button again -> the dialog appears, but the scrollbar is invisible. WHY? I have set the hideBodyScrollWhenModal to false? So this is also a problem.

                                      H: I can NOT move the dialog outside of the page area. This is OK, however I do NOT understand it, because in step D the behavior was different.

                                Scrollbar problem using Popup control .zip
                                You must  log in  or  register  to leave comments

                                1 Solution

                                0

                                Hello Gabor,

                                Since each ASPxPopupControl is nested in an UpdatePanel, it is completely replaced every time you click the "Postback" button. Being showed the ASPxPopupControl changes something (for instance, it hides the scrollbars). To restore the previous state, it's necessary to close the ASPxPopupControl before the update. Otherwise, the UpdatePanel will remove the old ASPxPopupControl and then will insert a new one. The new ASPxPopupControl will knows nothing about its predecessor and its requirements (for instance, it might need to restore the scrollbars or something else).

                                Here are some code snippets, illustrating how you to close an ASPxPopupControl before updating:

                                [ASPx]
                                ... Dummy text <script type="text/javascript"> function SetIsShowRequired(value) { var hf = document.getElementById("ShowRequired"); hf.value = value.toString(); } function OnClick() { SetIsShowRequired(true); myPopup.Hide(); __doPostBack(); } </script> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:HiddenField ID="ShowRequired" runat="server" Value="false"/> <dxpc:ASPxPopupControl ID="ASPxPopupControl1" runat="server" ClientInstanceName="myPopup" CloseAction="CloseButton" Modal="True" EnableClientSideAPI="True"> <ContentCollection> <dxpc:PopupControlContentControl runat="server"> <button type="button" value="Close&postback" onclick="OnClick()"></button> </dxpc:PopupControlContentControl> </ContentCollection> </dxpc:ASPxPopupControl> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="Button2" runat="server" Text="Show Dialog" OnClientClick="myPopup.Show(); return false;" /> ...
                                [C#]
                                public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (bool.Parse(ShowRequired.Value)) ASPxPopupControl1.ShowOnPageLoad=true; ShowRequired.Value = "false"; } }

                                We understand that this solution is not the best, and we're planning to improve this behavior in future. In particular, we've got a suggestion for this: ASPxPopupControl - Provide the capability for a visible client popup control object to work correctly when it doesn't have the information about its corresponding HTML markup.

                                If the aforementioned solution doesn't meet your requirements, we can suggest a simpler approach. If you put the UpdatePanel into an ASPxPopupControl everything will fork fine. In case you will want to close the ASPxPopupControl from your server-side code, we've added a new button - "Postback and close". Here are the sample snippets:

                                [ASPx]
                                ... <dxpc:ASPxPopupControl ID="ASPxPopupControl1" runat="server" ClientInstanceName="myPopup" CloseAction="CloseButton" Modal="True" EnableClientSideAPI="True"> <ContentCollection> <dxpc:PopupControlContentControl runat="server"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Postback" /> <asp:Button ID="Button3" runat="server" Text="Postback and close" onclick="Button3_Click" /> </ContentTemplate> </asp:UpdatePanel> </dxpc:PopupControlContentControl> </ContentCollection> </dxpc:ASPxPopupControl> ...
                                [C#]
                                ... public partial class _Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button3_Click(object sender, EventArgs e) { ScriptManager.RegisterStartupScript(this, this.GetType(), "ClosingScript", "myPopup.Hide()", true); } }

                                In any case, we recommend that you use the first solution if you have to change only some ASPxPopupControl's server-side properties (for instance, if you have to change its behavior via an UpdatePanel's postback). The second solution is more useful in other cases.

                                >>
                                D: if I move the dialog outside of the visible area (e.g to the rigth), then a scrollbar is added. I think this is a problem. The best would be to let the user navigate ONLY in the current page area, and do NOT let him to extend this area.
                                <<
                                This is actually a common behavior of web browsers. Could you please explain the problem in greater detail? Since you allow dragging for your ASPxPopupControl, an end-user can drag it beyond the browser's visible window (for instance, if he/she wants to see the content hovered by the ASPxPopupControl). As far as you allow the scrollbar's visibility, the end-user can use either dragging or scrolling to access the ASPxControl. So, we treat this as a designed behavior.

                                Thanks,
                                Serge

                                You must  log in  or  register  to leave comments

                                If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2014 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners