Skip to main content
All docs
V25.1
  • FormLayoutGroupBase.ChildContent Property

    Specifies group content.

    Namespace: DevExpress.Blazor.Base

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [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:

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

    FormLayout Groups

    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:

    <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>
    
    See Also