DxFormLayoutGroup.Items Property
Contains nested items in the Form Layout group.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v22.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
You can use the HeaderTemplate property to customize the layout of a Form Layout group‘s header. To separate the header and group content, wrap the Form Layout group’s editors in the Items component.
<DxFormLayout>
<DxFormLayoutGroup ColSpanMd="6">
<HeaderTemplate>
<div class="float-left">
Work Information
</div>
<div class="float-right">
<DxCheckBox CheckedChanged="@((bool t) => UnemployedChanged(t))" LabelPosition="LabelPosition.Left" Checked="@Unemployed">Unemployed</DxCheckBox>
</div>
</HeaderTemplate>
<Items>
<DxFormLayoutItem Caption="Position:" ColSpanMd="12">
<DxTextBox @bind-Text="@Position" Enabled="!Unemployed" />
</DxFormLayoutItem>
@* ... *@
</Items>
</DxFormLayoutGroup>
</DxFormLayout>
@code {
bool Unemployed { get; set; }
string? Position { get; set; } = "Sales Representative";
// ...
void UnemployedChanged(bool value)
{
// ...
Position = value ? null : Position;
Unemployed = value;
}
}
In other cases, you can omit the <Items>
tag.
See Also