DxPopup Class

A Popup component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxPopup :
    DxComponentBase

Remarks

The DevExpress Popup for Blazor (<DxPopup>) is a pop-up window that overlays the current view. The component consists of a header with a Close button, the pop-up window’s content, and a footer.

Blazor Popup

Run Demo: Popup - Overview

Add a Popup to a Project

Follow the steps below to add the Popup component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
  2. Add the <DxPopup></DxPopup> markup to a Razor page.
  3. Configure the component (see the sections below).

Show/Hide Popup

Use the Visible property to show or hide the pop-up window.

<div class="target-container" @onclick="@(() => PopupVisible = true)"></div>
<DxPopup HeaderText="Header"
         @bind-Visible="@PopupVisible">
    ...
</DxPopup>

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

To respond to the property change, handle the VisibleChanged event.

Content

You can specify the pop-up window’s content directly between the <DxPopup> and </DxPopup> tags. When you define a header and/or footer template, use the Content property. The pop-up window’s content can include any UI fragment (for instance, text, an image, or another component).

The code below displays the DxFormLayout component within the pop-up window.

<DxPopup HeaderText="Contact information" ...>
    <DxFormLayout>
        <DxFormLayoutItem Caption="Name:" ColSpanMd="6">
            <Template>
                <DxTextBox Text="Nancy"></DxTextBox>
            </Template>
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
            <Template>
                <DxTextBox Text="Davolio"></DxTextBox>
            </Template>
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Email:" ColSpanMd="12">
            <Template>
                <DxTextBox Text="NancyDavolio@sample.com"></DxTextBox>
            </Template>
        </DxFormLayoutItem>
    </DxFormLayout>
</DxPopup>

Popup Form Layout

The HeaderText property specifies text displayed in the pop-up window’s header.

<DxPopup HeaderText="Header" ...>
    <p>...</p>
</DxPopup>

Use the HeaderTemplate property to customize the pop-up window’s header.

<DxPopup CssClass="custom-popup" ...>
    <HeaderTemplate>
        <div class="custom-header bg-primary text-white w-100">
            <span class="demo-icon-info bg-white"></span>
            Information
            <a class="close-button oi oi-x text-white" href="javascript:;" aria-hidden="true" role="button" aria-label="Close popup" @onclick="@(() => PopupVisible = false)"></a>
        </div>
    </HeaderTemplate>
    <Content>
        <p>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.</p>
    </Content>
</DxPopup>

Popup Header Template

Run Demo: Popup - Header Customization

To handle the Close button click, use the CloseButtonClick event. To hide the Close button, set the ShowCloseButton property to false. The code snippet below demonstrates how to close the pop-up window when the Close button is hidden.

<div class="target-container" @onclick="@(() => PopupVisible = true)">Delete</div>
<DxPopup HeaderText="Are you sure you want to delete the row?" 
         ShowCloseButton="false"
         @bind-Visible="@PopupVisible">
    <div>
        <button class="btn btn-link" type="button" @onclick="@OnDelete">OK</button>
        <button class="btn btn-link" type="button" @onclick="@(() => PopupVisible = false)">Cancel</button>
    </div>
</DxPopup>

@code {
    WeatherForecast[] forecasts;
    WeatherForecast DeletedForecast;

    bool PopupVisible = false;

    async void OnDelete() {
        if (DeletedForecast != null)
            forecasts = await ForecastService.Remove(DeletedForecast);
        PopupVisible = false;
    }
}

Popup ShowCloseButton

Set the ShowHeader property to false to hide the entire header.

The Popup component does not display a predefined footer in the pop-up window. Use the FooterTemplate property to specify footer content.

<DxPopup HeaderText="Header"
        @bind-Visible="@PopupVisible">
    <Content>
        <p>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.</p>
    </Content>
    <FooterTemplate>
        <div class="modal-footer">
            <button class="btn btn-primary" @onclick="@(() => PopupVisible = false)">OK</button>
        </div>   
    </FooterTemplate>
</DxPopup>

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

Popup Footer Template

Run Demo: Popup - Display Footer

Scrolling

When a pop-up window contains an element whose content does not fit the window’s size entirely, this content is displayed over the window’s boundaries.

Popup Scrollable False

Set the Scrollable property to true to display all the content within the pop-up window’s boundaries and show scroll bars.

<DxPopup HeaderText="Contact Information" Scrollable="true">
      ...
</DxPopup>

Popup Scrollable True

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
See Also