DxFormLayout.ItemSizeMode Property
Specifies the size of the Form Layout’s inner components.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v21.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(null)]
[Parameter]
public SizeMode? ItemSizeMode { get; set; }
Property Value
Type | Default | Description |
---|---|---|
Nullable<SizeMode> | null | A SizeMode enumeration value. |
Available values:
Name | Description |
---|---|
Small | Small size. |
Medium | Medium size. |
Large | Large size. |
Remarks
Use the ItemSizeMode property to specify size mode for the components located within Form Layout items.
The following size modes are available:
Size mode | Description |
---|---|
Not specified (NULL) | Form Layout item’s inner components inherit their sizes from Form Layout’s parent component. For example, if Form Layout is in Data Grid, Form Layout’s inner component size is controlled by the InnerComponentSizeMode property. |
Large | The size of Form Layout item’s inner components is large. |
Medium | The size of Form Layout item’s inner components is medium. |
Small | The size of Form Layout item’s inner components is small. |
The code below applies the Medium size mode to the Form Layout item’s inner editors that support size modes.
<DxFormLayout Data="@editFormData" ItemSizeMode="SizeMode.Medium">
<DxFormLayoutItem Field="@nameof(FormDataItem.Name)" Caption="Contact Name:" ColSpanMd="6" />
<DxFormLayoutItem Field="@nameof(FormDataItem.BirthDate)" Caption="Birth Date:" ColSpanMd="6" />
<DxFormLayoutItem Field="@nameof(FormDataItem.YearsWorked)" Caption="Years Worked:" ColSpanMd="6">
<DxSpinEdit @bind-Value="@spinEditValue"></DxSpinEdit>
</DxFormLayoutItem>
<DxFormLayoutItem Field="@nameof(FormDataItem.Position)" Caption="Position:" ColSpanMd="6">
<DxComboBox Data="@(new List<string>() { "Sales Representative", "Designer" })"
Value="@(((string)((ValueEditContext)context).Value))" />
</DxFormLayoutItem>
<DxFormLayoutItem Field="@nameof(FormDataItem.OnVacation)" Caption="On Vacation:" ColSpanMd="6" />
</DxFormLayout>
@code {
FormDataItem editFormData = new FormDataItem() {
Name = "Nancy Davolio",
BirthDate = DateTime.Now.AddYears(-30),
YearsWorked = 3,
Position = "Sales Representative"
};
int spinEditValue { get; set; }
}
To override the common ItemSizeMode value for an individual item’s editor, define an item template, add a DevExpress data editor to the item, and use the editor’s SizeMode property to specify the size.
<DxFormLayout Data="@editFormData" ItemSizeMode="SizeMode.Medium">
<DxFormLayoutItem Field="@nameof(FormDataItem.YearsWorked)" Caption="Years Worked:" ColSpanMd="6">
<DxSpinEdit @bind-Value="@spinEditValue" SizeMode="SizeMode.Small"></DxSpinEdit>
</DxFormLayoutItem>
</DxFormLayout>
For more information, refer to Size Modes.