Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxLoadingPanel.PositionTarget Property

Specifies the target UI element relative to which the Loading Panel is positioned.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(null)]
[Parameter]
public string PositionTarget { get; set; }

#Property Value

Type Default Description
String null

The CSS selector that identifies the target UI element.

#Remarks

Use the PositionTarget property to specify the Loading Panel’s position relative to the target element. We recommend that you use the PositionTarget property if you need your target content to be at a specific position in the DOM. For instance, Form Layout requires to keep the correct hierarchy of its elements. In the sample below, the target UI element (a Form Layout group) is defined by its id attribute:

Razor
<DxFormLayout>
    <DxFormLayoutGroup Caption="Target Group" Id="show-panel">
        @* ... *@
    </DxFormLayoutGroup>
</DxFormLayout>

<DxLoadingPanel Visible="true"
                ApplyBackgroundShading="true"
                PositionTarget="#show-panel" />

You can also use the PositionTarget property to cover the entire page. Use the <body> tag as a target UI element:

Razor
<DxLoadingPanel Visible="true" 
                PositionTarget="body" 
                ApplyBackgroundShading="true" />

Add the Loading Panel without additional parameters to display the panel instead of the content area during page load operations. In this case, the panel occupies the entire parent container:

Razor
@if (SomeCondition == null) {
    <DxLoadingPanel Visible="true" />
}
else {
    ...
}

In other cases, specify target content as the Loading Panel’s ChildContent:

Razor
<DxLoadingPanel Visible="true"
                ApplyBackgroundShading="true"
                CssClass="w-100">
    <DxMemo @bind-Text="@Text"
            Rows="10" />
</DxLoadingPanel>
See Also