DxPopupBase.ContentLoadMode Property

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public PopupContentLoadMode ContentLoadMode { get; set; }

Property Value

Remarks

The ContentLoadMode property specifies when the content of DxPopup is rendered. The guidelines below explain how to select the optimal rendering mode for your specific scenario.

Re-Render Content when Popup Opens

Specify PopupContentLoadMode.OnEveryShow to re-render the popup content into the DOM every time the popup is opened and remove it from the DOM when the popup is closed. Use this mode when the popup content must be re-queried on each opening or when the same popup instance is reused to display different data based on context:

• Real-time data, such as stock prices or system status indicators
• Context help
• Ads, news, and notifications
• Error messages

This rendering mode minimizes the DOM footprint when the popup is hidden at the expense of a small render delay each time the popup is displayed.

<DxButton Click="ShowPopup" Text="Show sales statistics" />

<DxPopup @bind-Visible="PopupVisible"
         HeaderText="Hourly sales"
         ContentLoadMode="PopupContentLoadMode.OnEveryShow">
    <DxChart Data="DataSource" AdjustOnZoom="true">
        <DxChartLegend Visible="false" />
        <DxChartBarSeries ArgumentField="@((SaleInfo s)=>s.Date)"
                          ValueField="@((SaleInfo s)=>s.Amount)" />
        <DxChartArgumentAxis>
            <DxChartAxisLabel Format="@ChartElementFormat.Hour" />
        </DxChartArgumentAxis>
    </DxChart>
</DxPopup>

@code {
    List<SaleInfo> DataSource { get; set; } = new List<SaleInfo>();
    bool PopupVisible { get; set; } = false;

    void ShowPopup() {
        DataSource = Data.Sales.GetMonthlySales();
        PopupVisible = true;
    }
}

Render Content on Page Load

Specify PopupContentLoadMode.OnComponentLoad for the fastest possible popup display:

• Login or sign-up forms
• Cookie consent request
• Age gate
• Important announcements

We also recommend using OnComponentLoad to preload information from third-party resources that may not always be available.

This rendering mode slightly increases page load time and adds permanent complexity to the DOM, even if the popup is never used.

<DxPopup @bind-Visible="ConsentVisible"
         HeaderText="We value your privacy"
         ContentLoadMode="PopupContentLoadMode.OnComponentLoad">
    <p>We use cookies to enhance your browsing experience.
       By clicking "Accept all", you consent to our use of cookies.</p>
    <DxButton Text="Accept all" />
</DxPopup>

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

    protected override void OnInitialized() {
        ConsentVisible = true;
    }
}

Render Content on First Show

Specify PopupContentLoadMode.OnFirstShow if the popup does not need to appear immediately on page load and the popup content remains the same:

• Application settings dialog
• License agreement, terms of service
• Static help

This rendering mode balances initial page load performance, responsiveness, and resource consumption at the expense of a small render delay the first time the popup is displayed.

<DxButton Click="ShowHelp" Text="Help" />

<DxPopup @bind-Visible="HelpVisible"
         HeaderText="Help"
         ContentLoadMode="PopupContentLoadMode.OnFirstShow">
    <p>The DevExpress Popup for Blazor allows you to show a modal pop-up window.</p>
    <p>The window traps focus and users cannot access HTML elements located
       outside the window until it is closed.</p>
</DxPopup>

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

    void ShowHelp() {
        HelpVisible = true;
    }
}