FormLayoutGroupBase.Items Property

Contains nested elements in the Form Layout group and tab.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

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