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

FormLayoutGroupBase.Items Property

Contains nested elements in the Form Layout group and tab.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public RenderFragment Items { get; set; }

#Property Value

Type Description
RenderFragment

A render fragment that defines a set of Form Layout items.

#Remarks

Use the <Items> tag to define nested elements of a group or tab. The tag should contain only DxFormLayoutItem and DxFormLayoutGroup components.

The Items collection separates templated and nested content if you apply the following templates:

Group Tab
DxFormLayoutGroup.CaptionTemplate DxFormLayoutTabPage.CaptionTemplate
DxFormLayoutGroup.HeaderContentTemplate -
DxFormLayoutGroup.HeaderTemplate DxFormLayoutTabPage.HeaderTemplate

In other cases, you can omit this tag.

The following snippet applies the HeaderContentTemplate to a group:

razor
    <DxFormLayout SizeMode="Params.SizeMode"
                  CssClass="w-100">
        <DxFormLayoutGroup ColSpanMd="6" aria-labelledby="caption-template">
            <HeaderContentTemplate>
                <div id="caption-template">
                    Work Information
                </div>
                <div class="demo-unemployed-checkbox-container">
                    <DxCheckBox CssClass="demo-unemployed-checkbox" CheckedChanged="@((bool t) => UnemployedChanged(t))" LabelPosition="LabelPosition.Left" Checked="@Unemployed">Unemployed</DxCheckBox>
                </div>
            </HeaderContentTemplate>
            <Items>
                <DxFormLayoutItem Caption="Position:" ColSpanMd="12">
                    <DxTextBox @bind-Text="@Position" Enabled="!Unemployed" />
                </DxFormLayoutItem>
                <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="12">
                    <DxDateEdit @bind-Date="@HireDate" Enabled="!Unemployed" />
                </DxFormLayoutItem>
                <DxFormLayoutItem Caption="Postal code:" ColSpanMd="12">
                    <DxTextBox @bind-Text="@PostalCode" Enabled="!Unemployed" />
                </DxFormLayoutItem>
            </Items>
        </DxFormLayoutGroup>
    </DxFormLayout>
@code {
    static Employee employee;
    string Position { get; set; }
    DateTime? HireDate { get; set; }
    bool Unemployed { get; set; }
    void UnemployedChanged(bool value) {
        if(value) {
            Position = PostalCode = null;
            HireDate = null;
        }
        Unemployed = value;
    }
}

Custom FL Group Header Content

See Also