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, the pop-up window's content, and a footer.

Blazor-Popup

NOTE

Online Demo: Popup - Overview

Add Popup to a Project

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.

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>

Blazor_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>

Blazor_Popup_Header_Template

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;
    }
}

Blazor_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; }
}

Blazor-Popup-Footer-Template

NOTE

Online Demo: Popup - Display Footer

Scrolling Long Content

When the pop-up window's body content is too long to be displayed on a page, you can view this content as follows:

  • If the pop-up window contains the header and/or footer, the scrollbar appears in the pop-up window's body. You can scroll the body content independently from the page.

  • If the pop-up window contains the body only, you can scroll the body content along with the entire page.

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
See Also