DxFlyout.ContentLoadMode Property

Specifies when the flyout window content is loaded.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
PopupContentLoadMode	Flyout 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 DxFlyout 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 Flyout Opens

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

<DxButton Id="contextButton"
          aria-describedby="flyout"
          Click="ShowFlyout"
          Text="What time is now?" />

<DxFlyout Id="flyout"
          @bind-IsOpen="FlyoutVisible"
          PositionTarget="#contextButton"
          ContentLoadMode="PopupContentLoadMode.OnEveryShow"
          BodyText="@CurrentTime.ToString("F")"
          Width="250px" />

@code {
    bool FlyoutVisible { get; set; } = false;
    DateTime CurrentTime = DateTime.Now;

    void ShowFlyout() {
        CurrentTime = DateTime.Now;
        FlyoutVisible = true;
    }
}

Render Content on Page Load

Specify PopupContentLoadMode.OnComponentLoad for the fastest possible flyout window display:

• Important announcements
• Tutorials

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 flyout window is never shown.

<DxButton Id="contextButton"
          aria-describedby="flyout"
          Text="Current time" />

<DxFlyout Id="flyout"
          @bind-IsOpen="FlyoutVisible"
          PositionTarget="#contextButton"
          ContentLoadMode="PopupContentLoadMode.OnComponentLoad"
          BodyText="Click this button to show the current time."
          Width="300px" />

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

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

Render Content on First Show

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

• Fixed notifications
• 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 flyout window is displayed.

<p>DevExpress Flyout
   <DxButton Id="contextHelp" aria-describedby="flyout" Click="ShowHelp" Text="?" /></p>

<DxFlyout Id="flyout"
          @bind-IsOpen="HelpVisible"
          PositionTarget="#contextHelp"
          ContentLoadMode="PopupContentLoadMode.OnFirstShow"
          BodyText="A contextual popup UI element that allows you to display messages."
          Width="300px" />

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

    void ShowHelp() {
        HelpVisible = true;
    }
}