Add the <DxFormLayout>...</DxFormLayout> markup to your application.
Add layout items <DxFormLayoutItem>...</DxFormLayoutItem> into the component's markup.
Configure the component (see the sections below).
<DxFormLayout> consists of multiple layout items (DxFormLayoutItem) - containers that arrange nested Blazor components. An item can include a caption displayed against the corresponding component. To specify the item's nested component, use the item's Template property.
The Bootstrap grid system renders the <DxFormLayout>. You can specify the number of virtual columns each layout item occupies. This number is an integer between 1 and 12 that can be specified for five different screen resolutions:
ColSpanXl - Extra large screens (1200px or wider).
All layout items are rendered as .col elements within a single .row container. An item moves to the next row if there are not enough virtual columns within the current row. To explicitly indicate that the item should be placed into a new row, use an item’s BeginRow property.
<DxFormLayout> allows you to display and edit data from the data source fields. You do not have to bind each layout item to a data source and provide proper label captions that correspond to field names. This is done automatically. Bind the control to a data source via the Data property and specify which fields are to be displayed. To set up a correspondence between a data source field and a specific layout item, use the item's Field property. Once a user changes a layout item's value, post all changes to a data source. To do so, handle the ItemUpdating event.
Once a layout item is bound to a data source field, <DxFormLayout> tries to determine the corresponding data field's type. If the component successfully determines the type, it displays the corresponding editor within the layout item.
To display a custom editor within a bound layout item, use the item's Template property.
A layout group (DxFormLayoutGroup) is a built-in container that allows you to combine layout items and other layout groups into titled panels. You can use the ColSpanXX properties (see the section above) to specify the width of layout groups.