DxPopup Class

A Popup component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxPopup :
    DxPopupBase

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 and the pop-up window's content (for example, text, an image, or another component).

Blazor-Popup

NOTE

Online Demo: Popup - Overview

To add the <DxPopup> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxPopup>...</DxPopup> markup to your application.

Content

Use the ChildContent property to specify the pop-up window's content. It can include any UI fragment that should be displayed within the Popup component.

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

    <DxPopup HeaderText="Contact information">
        <ChildContent>
            <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>
        </ChildContent>
    </DxPopup>

Blazor_Popup_Form_Layout

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

<DxPopup HeaderText="Header">
    <ChildContent>
        <p>...</p>
    </ChildContent>
</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>
    <ChildContent>
        <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>
    </ChildContent>
</DxPopup>

Blazor_Popup_Header_Template

To handle the Close button click, use the CloseButtonClick event.

<div class="target-container" @onclick="@(() => PopupVisible = true)"></div>
@if (PopupVisible) {
    <DxPopup HeaderText="Header" CloseButtonClick="@(() => PopupVisible = false)">
        <ChildContent>
            <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>
        </ChildContent>
    </DxPopup>
}

@code {
    bool popupVisible = false;
    bool PopupVisible { get => popupVisible; set { popupVisible = value; InvokeAsync(StateHasChanged); } }
}

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>
@if (PopupVisible)
{
    <DxPopup HeaderText="Are you sure you want to delete the row?" ShowCloseButton="false">
        <ChildContent>
            <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>
        </ChildContent>
    </DxPopup>
}

@code {
    WeatherForecast[] forecasts;
    WeatherForecast DeletedForecast;

    bool popupVisible = false;
    bool PopupVisible { get => popupVisible; set { popupVisible = value; InvokeAsync(StateHasChanged); } }

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

Blazor_Popup_ShowCloseButton

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
See Also