FormLayoutGroupBase.ChildContent Property

Specifies group content.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

C#

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

Property Value

Type	Description
RenderFragment	Group content.

Remarks

A Form Layout group can combine items, tabs, and other layout groups into panels, for example:

Razor

<DxFormLayout>
    <DxFormLayoutGroup Caption="Personal Information" ColSpanMd="6">
        <ChildContent>
            <DxFormLayoutItem Caption="First Name:" ColSpanMd="12">
                <DxTextBox @bind-Text="@FirstName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:" ColSpanMd="12">
                <DxTextBox @bind-Text="@LastName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="12">
                <DxDateEdit @bind-Date="@BirthDate" />
            </DxFormLayoutItem>
        </ChildContent>
    </DxFormLayoutGroup>
    @* ... *@
</DxFormLayout>

Note

Nested layout elements must conform to the component layout structure. Refer to the following topic for more information: DxFormLayout - Layout Structure.

You can omit the <ChildContent> tag and specify layout elements directly in the <DxFormLayoutGroup> tag:

Razor

<DxFormLayout>
    <DxFormLayoutGroup Caption="Personal Information" ColSpanMd="6">
        <DxFormLayoutItem Caption="First Name:" ColSpanMd="12">
            <DxTextBox @bind-Text="@FirstName" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Last Name:" ColSpanMd="12">
            <DxTextBox @bind-Text="@LastName" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="12">
            <DxDateEdit @bind-Date="@BirthDate" />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
    @* ... *@
</DxFormLayout>