Popup for Blazor - Appearance Customization, Multiple Windows, Custom Size and Alignment, and more (v21.1)

ASP.NET Team Blog
28 June 2021

As you may know, our Blazor Popup component allows you to display a modal window within a Blazor application. A modal popup allows you to direct user action or display relevant content/information. Our most recent release (v21.1) introduces a series of new features/enhancements to our modal Blazor Popup component.

Header, Body, and Footer Customization

The DevExpress Blazor Popup component offers extended customization options for individual UI elements (header, body, and footer).

Documentation | Demo

<div @onclick="@(() => PopupVisible = true)">
  <p>CLICK TO SHOW A POP-UP WINDOW</p>
</div>

<DxPopup @bind-Visible="@PopupVisible"
  HeaderText="Header"
  BodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet
    metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus,
    accumsan orci auctor, imperdiet mauris. Fusce id purus magna."
  ShowFooter="true">
  <FooterContentTemplate>
    <DxButton RenderStyle="ButtonRenderStyle.Primary" Text="OK"
      Click="@context.CloseCallback" />
  </FooterContentTemplate>
</DxPopup>

@code {
  bool PopupVisible { get; set; } = false;
}

Alignment

Our Blazor Popup is now centered both horizontally and vertically on-screen. This helps enhance the user experience on both desktop and mobile devices. You can use the new HorizontalAlignment and VerticalAlignment properties to modify the Popup position as requirements dictate.

Documentation | Demo

<DxPopup ...
  HorizontalAlignment="HorizontalAlignment.Right"
  VerticalAlignment="VerticalAlignment.Bottom" />

Size

Our Blazor Popup's new Width and Height properties allow you to manually specify Popup size in absolute or relative units. You can also force the popup to adapt its width/height adapt to Popup content (set to auto ). Use our new MinHeight, MaxHeight, MinWidth, and MaxWidth properties to explicitly define a Popup's size constraints.

Documentation | Demo

<DxPopup ...
  Width="auto"
  MinWidth="300px"
  MaxWidth="600px" />

Show and Close Actions

Like in previous versions, you can implement two-way binding for the Visible property (to display and close the Popup). The property value is updated when a user closes the Popup.

<div @onclick="@(() => PopupVisible = true)">
  <p>CLICK TO SHOW A POP-UP WINDOW</p>
</div>

<DxPopup @bind-Visible="@PopupVisible">
</DxPopup>

@code {
  bool PopupVisible { get; set; } = false;
}

Use our new ShowAsync and CloseAsync methods to display and close the Popup asynchronously. Additionally, users can now press Escape or click outside the Popup's boundaries to close it (CloseOnEscape and CloseOnOutsideClick options).

Documentation | Demo

Respond to Show and Close Actions

In v21.1, we implemented the following new events for our Blazor Popup:

  • Showing - Fires before the Popup is displayed and allows you to cancel this action.
  • Shown - Fires after the Popup is displayed.
  • Closing - Fires before the Popup is closed and allows you to cancel this action.
  • Closed - Fires after the Popup is closed.

Documentation | Demo

Multiple Popups

You can now display multiple Blazor Popups simultaneously. Popup Z-indices are updated automatically based on display order. You can also use the new ZIndex property to specify a Popup's Z-index manually.

Documentation | Demo

Rendering

In v21.1, our Blazor Popup changed its position in the DOM tree - it now renders directly in the document body. Previously, the Popup was rendered in the DOM tree at the position specified in code. Please consider this rendering change when you apply CSS selectors to the Popup.

More information

FREE DevExpress Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
frank vdb
frank vdb
Thanks Mehul, especially for the width and height properties.
29 June 2021
Rick Mathers
Rick Mathers
Thank you for the updates, these enhancements are a welcome addition.
29 June 2021

Please login or register to post comments.