Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Expand]Concepts
 [Expand]Design-Time Features
 [Expand]Functional Testing
 [Expand]Deployment
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]Actions
  [Expand]Navigation
  [Expand]Views
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Templates
  [Expand]Filtering
  [Expand]Reporting
  [Expand]Dashboards
  [Expand]Scheduler and Notifications
  [Expand]Maps
  [Expand]Security
  [Expand]Workflow
  [Expand]Localization
  [Expand]Testing
  [Collapse]Miscellaneous UI Customizations
    How to: Add a button to a Form using Custom View Item
    How to: Adjust the Size and Style of Pop-up Dialogs (ASP.NET)
    How to: Adjust the Windows' Size and Style
    How to: Change an Application Logo and Info
    How to: Create a Custom Control Detail Item
    How to: Customize a Window Caption
    How to: Customize ASP.NET Layout Elements Using Custom CSS Classes
    How to: Customize Export Options of the Printing System
    How to: Customize the Conditional Appearance Module Behavior
    How to: Customize Window Status Messages
    How to: Enable High DPI Support in a WinForms Application
    How to: Implement a Custom Messaging Class
    How to: Include an Action to a Detail View Layout
    How to: Set Images and Captions for Enumeration Values
    How to: Show a Custom Confirmation Window
    How to: Show a Custom Window with an Embedded XAF View
    How to: Show a Custom Windows Form
    How to: Use a Custom Splash Screen
    How to: Use Custom Themes in ASP.NET Applications
 [Expand]Frequently Asked Questions
 [Expand]API Reference
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Adjust the Size and Style of Pop-up Dialogs (ASP.NET)

In ASP.NET XAF applications, pop-up dialog windows are displayed using the ASPxPopupControl. End-users can drag the size grip in the lower-right corner to resize a pop-up window if it is not restricted in settings. You can also customize the initial size in code. The size of the main window is equal to the browser window size. This topic describes how to resize and customize pop-up windows programmatically, depending on the View displayed.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E4208.

Tip

A similar example for WinForms is available in the How to: Adjust the Windows' Size and Style topic.

Expanded Set the Default Size and Style of Pop-up Windows

If you want to apply a unified style for all pop-up windows in the ASP.NET application with the new web UI, using the following XafPopupWindowControl's static properties is recommended.

Add the following code to the Application_Start method in the Global.asax.cs (Global.asax.vb) file.

If you customize pop-up windows in an ASP.NET application with the classic web UI, you can set the default height and width in the Model Editor using the IModelPopupWindowOptionsWeb.WindowHeight and IModelPopupWindowOptionsWeb.WindowWidth properties.

Note

To adjust the ASPxPopupControl properties, handle the XafPopupWindowControl.CustomizePopupControl event instead of the XafPopupWindowControl.CustomizePopupWindowSize. However, note that in the new Web UI, you cannot manage the height and position of the pop-up that slides from the right edge of the page. The approach demonstrated below in this document can be used to subscribe to any of these events.

Expanded Handle the CustomizePopupWindowSize Event

To change the size of pop-up windows in a controller, subscribe to the PopupWindowManager.PopupShowing event to access the XafPopupWindowControl instance. Then, subscribe to the XafPopupWindowControl.CustomizePopupWindowSize event and define the required size in the event handler in a Controller implemented in an ASP.NET module project.

This code sets the initial size of all dialog windows to 600x400. Read the following section to learn how to set the size dynamically.

Expanded Assess the View Displayed in the Pop-up Window and Set the Size Accordingly

To access the View displayed in a pop-up window, use the ShowViewSource.SourceView property. For instance, to adjust the size of the DemoTask type's pop-up windows, use the following code.

You can also use the BaseXafPage.View property to access the parent View (the View that is displayed behind the pop-up).

If it is necessary to customize a pop-up window invoked from a particular Frame and display an object of a specific type in it, use the CustomizePopupWindowSizeEventArgs.PopupFrame and CustomizePopupWindowSizeEventArgs.SourceFrame properties. The following example explains how to customize a pop-up window with the DemoTask object invoked from the window with the Contact object.

If your pop-up View is an embedded part of a reference property editor (ASPxLookupPropertyEditor or ASPxObjectPropertyEditor), it may be necessary to determine which lookup is the source for invoking a pop-up window. The following code snippet demonstrates how to determine the source lookup window. In this example, the Data property provides access to the editor action references.

Also, you can create the PopupWindowShowAction class instance to invoke pop-up windows with the particular View that is set in the handler's CustomizePopupWindowParamsEventArgs.View parameter. Refer to the PopupWindowShowAction class description to see the code example.

Note

Certain form templates (e.g., pop-up window templates with the CustomizePopupWindowSizeEventArgs.ShowPopupMode property set to ShowPopupMode.Centered) may have particular specifics.

  • Size may be calculated dynamically based on the content.
  • The window may have restrictions for resizing (the IsSizeable property).
  • The window may expand to occupy the whole space (the Maximized property).

So, if your custom size is ignored using the aforementioned method, you may want to research the source code for each required form template and adjust your default form settings accordingly.

How would you rate this topic?​​​​​​​