DxLoadingPanel.ChildContent Property

Specifies Loading Panel’s target content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
RenderFragment	Content markup.

Remarks

When you customize the content of an indicator in the <IndicatorTemplate> tag, use the following approaches to specify the Loading Panel’s target content:

• Use the ChildContent render fragment.
• Use the PositionTarget property.
• Add the LoadingPanel to the page without additional parameters.

In the following example, the default indicator is replaced with a custom icon:

Razor

<DxLoadingPanel Visible="true"
                ApplyBackgroundShading="true"
                CssClass="w-100">
    <IndicatorTemplate>
        <div class="indicator-icon" role="img"></div>
    </IndicatorTemplate>
    <ChildContent>
        <DxMemo @bind-Text="@Text"
                Rows="10" />
    </ChildContent>
</DxLoadingPanel>

CSS

.indicator-icon {
    background-image: url("/images/Information.svg");
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}

In other cases, you can omit the <ChildContent> tag:

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

@code {
    string Text = "Andrew received his BTS commercial in 1987 and a Ph.D. in international marketing at the University " +
                  "of Dallas in 1994. He speaks French and Italian fluently, and reads German. He joined the company as " +
                  "a sales representative. After that, he was promoted to sales manager in January 2005 and vice president " + 
                  "of sales in March 2006. Andrew is a member of the Sales Management Round table, Seattle Chamber of Commerce, and Pacific Rim Importers Association.";
}

For more information, refer to the following article: Attach a Loading Panel to Target Content.