The DevExpress Form Layout component for Blazor allows you to easily construct responsive and automatically-aligned edit forms.
The Form Layout component uses the Bootstrap grid system markup: each layout item occupies between 1 and 12 virtual columns. This value can be defined separately for five different screen resolution types, as listed below:
The Form Layout’s CaptionPosition property defines where to display caption labels. In this demo, the CaptionPosition property is set to CaptionPosition.Vertical to stack captions above associated editors.
All layout items are rendered as .col elements within a single .row container by default. An item moves to the next row if there are not enough columns within the current row. You can also use an item’s BeginRow property to explicitly indicate that it should be placed onto a new row.
Refer to the Bootstrap documentation for additional information on the Bootstrap Grid system.
A layout group (DxFormLayoutGroup) is a container for layout items (DxFormLayoutItem) and other layout groups. Layout groups, just like individual items, allow you to specify their width using the same set of ColSpanXX properties.
The Form Layout component allows you to group layout items and layout groups into tabbed containers. A tab page collection (DxFormLayoutTabPages) allows you to specify the active page using the ActiveTabIndex property.
You can use the Form Layout component to display and edit data from an external source. In this demo, such data source is assigned to the Data property. Form Layout items must be declared and bound to data source fields using the Field property. Each item automatically displays a DevExpress data editor suitable for the target data type.
You can override the default behavior and assign a custom editor to a layout item. To see an example, review the code for the Position item below.