DxDropDown.ContentLoadMode Property

Specifies when the drop-down window content is loaded.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Property Value

Drop-down window content load mode.

|

Available values:

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 drop-down window content is rendered. 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 Dropdown Opens

Specify PopupContentLoadMode.OnEveryShow to re-render the drop-down 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 drop-down 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 drop-down window is hidden at the expense of a small render delay each time the window is displayed.

<div id="dropdownContainer">
    <DxButton Click="ShowDropdown" aria-describedby="dropDown" Text="Hourly sales" />
</div>

<DxDropDown @bind-IsOpen="DropdownVisible"
            Id="dropDown"
            PositionMode="DropDownPositionMode.Bottom"
            PositionTarget="#dropdownContainer"
            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>
</DxDropDown>

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

    void ShowDropdown() {
        DataSource = Data.Sales.GetMonthlySales();
        DropdownVisible = true;
    }
}

Render Content on Page Load

Specify PopupContentLoadMode.OnComponentLoad for the fastest possible drop-down window display:

• Important announcements
• Tutorials

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

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

<div id="dropdownContainer">
    <DxButton aria-describedby="dropDown" Text="Hourly sales" />
</div>

<DxDropDown @bind-IsOpen="DropdownVisible"
            Id="dropDown"
            PositionMode="DropDownPositionMode.Bottom"
            PositionTarget="#dropdownContainer"
            BodyText="Click this button to show hourly sales statistics."
            ContentLoadMode="PopupContentLoadMode.OnComponentLoad"
            Width="300px" />

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

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

Render Content on First Show

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

<div id="dropdownContainer">
    <DxButton aria-describedby="dropDown" Click="ShowHelp" Text="Help" />
</div>

<DxDropDown @bind-IsOpen="HelpVisible"
            Id="dropDown"
            PositionMode="DropDownPositionMode.Bottom"
            PositionTarget="#dropdownContainer"
            BodyText="A control that displays a drop-down window with custom content."
            ContentLoadMode="PopupContentLoadMode.OnFirstShow"
            Width="300px" />

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

    void ShowHelp() {
        HelpVisible = true;
    }
}

See Also

DxDropDown Class

DxDropDown Members

DevExpress.Blazor Namespace