DxWindow.ContentLoadMode Property

Specifies when the popup window content is loaded.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

C#

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

Property Value

Type	Description
PopupContentLoadMode	Popup window content load mode.

Available values:

Name	Description
OnEveryShow	The component re-renders its content into the DOM when the popup window opens and removes it from the DOM when the popup closes.
OnComponentLoad	The component renders its content into the DOM on initial page load. This content remains in the DOM regardless of popup visibility.
OnFirstShow	The component renders its content into the DOM when the popup window first opens. This content remains in the DOM after the popup is closed.

Remarks

The ContentLoadMode property specifies when the DxWindow component renders its content. The guidelines below explain how to select the optimal rendering mode for your specific scenario.

Note

Regardless of the ContentLoadMode value, dynamic controls in popups are always updated when the bound dataset changes.

Re-Render Content when Window Opens

Specify PopupContentLoadMode.OnEveryShow to re-render the popup window content into the DOM every time the window is opened and remove it from the DOM when the window is closed. Use this mode when the popup window content must be re-queried on each opening or when the same window 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 window is hidden at the expense of a small render delay each time the window is displayed.

Razor

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

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

@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 window 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 window is never used.

Razor

<DxWindow @bind-Visible="ConsentVisible"
          HeaderText="We value your privacy"
          ContentLoadMode="PopupContentLoadMode.OnComponentLoad"
          Width="max(25vw, 250px)">
    <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" />
</DxWindow>

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

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

Render Content on First Show

Specify PopupContentLoadMode.OnFirstShow if the popup window does not need to appear immediately on page load and the window 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 window is displayed.

Razor

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

<DxWindow @bind-Visible="HelpVisible"
          HeaderText="Help"
          BodyText="The DevExpress Popup for Blazor allows you to show a modal pop-up window.
                    The window traps focus and users cannot access HTML elements located
                    outside the window until it is closed."
          ContentLoadMode="PopupContentLoadMode.OnFirstShow"
          ShowCloseButton="true"
          Width="max(25vw, 250px)" />

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

    void ShowHelp() {
        HelpVisible = true;
    }
}