FormLayoutGroupBase.Items Property
In This Article
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 |
---|---|
Render |
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 |
---|---|
Dx |
Dx |
Dx |
- |
Dx |
Dx |
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;
}
}
See Also