DxDropDown.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 drop-down window content is rendered. The guidelines below explain how to select the optimal rendering mode for your specific scenario.

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