Popup Control for ASP.NET Web Forms - How to resize control content (Splitter) when resizing the popup

This example demonstrates how to resize the nested ASPxSplitter control when the ASPxPopupControl is resized.

The ASPxPopupControl does not have a built-in capability to resize nested controls when it is resized. This example illustrates how to automatically resize control places inside a popup.

To accomplish this task, execute the following steps:

1. Set the ASPxPopupControl.ScrollBars property to Auto. This option allows the popup control to evaluate content width and height.

   <dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" Height="500px" Width="500px" 
                        ScrollBars="Auto" AllowResize="true" LoadContentViaCallback="OnFirstShow">
       ...
   </dx:ASPxPopupControl>

2. Handle the ASPxClientPopupControl.AfterResizing event. In the event handler, call the AdjustControl method for a nested control to force the control to reevaluate its size.

   function OnAfterResizing() {
       splitter.AdjustControl();
   }

3. Place the nested control into the div element with the following style. This element is necessary to overcome scrollbars that can be shown when ScrollBars="Auto" is set.

   <div style="height: 100%; width: 100%; overflow: hidden">
       <dx:ASPxSplitter ID="ASPxSplitter" runat="server" Width="100%" Height="100%" ClientInstanceName="splitter">
           ...
       </dx:ASPxSplitter>
   </div>

Files to Review

• Default.aspx (VB: Default.aspx)