Default FormLayout

The Form Layout control simplifies the manner in which you create edit forms. It allows you to quickly create form layouts of any complexity by combining the order and hierarchy of the control’s layout elements.

The Form Layout control renders its contents using the Bootstrap grid system markup. In compliance with the grid system functionality, each item within a Form Layout occupies between 1 and 12 virtual columns. The number of virtual columns an item occupies determines how it is sized relative to other items in the current row. This value can be defined separately for four different screen resolution groups – large, medium, small, and extra small. The following Layout Item properties allow you to define how many virtual columns an item occupies in different resolutions:

  • ColSpanLg - Large screens (1200px or wider).
  • ColSpanMd - Medium screens (992px or wider).
  • ColSpanSm - Small screens (768px or wider).
  • ColSpanXs - Extra small screens (less than 768px).

Note that all layout items are rendered as .col elements within a single .row container by default. A browser moves an item to the next row if there are not enough virtual columns (with the current screen resolution) within the current virtual row to fit the item. Set the item’s BeginRow property to true to specify if an item should be rendered within a new row.

Refer to the Bootstrap documentation for more information on the Bootstrap Grid system, and the Form Layout Rendering documentation topic to learn about the Form Layout rendering specifics and how to apply these specifics to construct efficient adaptive layouts.

<dx:BootstrapFormLayout runat="server">
    <Items>
        <dx:BootstrapLayoutItem Caption="Contact Name" ColSpanSm="6">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Thomas Hardy" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Company Name" ColSpanSm="6">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Around the Horn" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Title" ColSpanSm="6">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Sales Representative" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Phone Number" ColSpanSm="6">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox Text="1715557788" runat="server">
                        <MaskSettings Mask="(000) 000-0000" IncludeLiterals="None" />
                    </dx:BootstrapTextBox>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
    </Items>
</dx:BootstrapFormLayout>

Vertical Layout

The LayoutType property defines how layout item caption and layout item contents are stacked. In this demo, the LayoutType property is set to Vertical.

<dx:BootstrapFormLayout runat="server" LayoutType="Vertical">
    <Items>
        <dx:BootstrapLayoutItem Caption="Location" ColSpanLg="4" ColSpanSm="12">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" NullText="e.g. city, country or specific hotel" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Check in" ColSpanLg="4" ColSpanSm="6">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapDateEdit runat="server" ID="CheckInDateEdit">
                    </dx:BootstrapDateEdit>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Check out" ColSpanLg="4" ColSpanSm="6">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapDateEdit runat="server" ID="CheckOutDateEdit">
                        <DateRangeSettings StartDateEditID="CheckInDateEdit" MinDayCount="1" CalendarColumnCount="1" />
                    </dx:BootstrapDateEdit>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem ShowCaption="False">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapButton Text="Submit" AutoPostBack="true" CausesValidation="false" runat="server">
                        <SettingsBootstrap RenderOption="Primary" />
                    </dx:BootstrapButton>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
    </Items>
</dx:BootstrapFormLayout>

Item Wrapping

The Form Layout control uses Bootstrap - Grid System classes to render layout items. By default, all items are created as .col elements within a single .row container. A browser automatically moves an item to the next row if there are not enough virtual columns in a row to fit the item in the current screen resolution. This behavior is known as column wrapping in Bootstrap. If you wish to force an item to be displayed on a new row, set the item’s BeginRow property to true.

<dx:BootstrapFormLayout runat="server">
    <Items>
        <dx:BootstrapLayoutItem Caption="Address" ColSpanSm="12">
            ...
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="City">
            ...
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Postal/ZIP Code">
            ...
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Country">
            ...
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Address Type" BeginRow="true">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapRadioButton runat="server" Text="Home" GroupName="AddressTypeGroup">
                        <SettingsBootstrap InlineMode="true" />
                    </dx:BootstrapRadioButton>
                    <dx:BootstrapRadioButton runat="server" Text="Work" GroupName="AddressTypeGroup" Checked="true">
                        <SettingsBootstrap InlineMode="true" />
                    </dx:BootstrapRadioButton>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
    </Items>
</dx:BootstrapFormLayout>

Caption and HelpText

The Form Layout control allows you to supply each layout item with a caption and help text providing supplementary information about the displayed editor's purpose.

A caption can be provided with an additional optional or required mark that indicates whether the field is treated as optional or required when validating the form data.

Enter your first name
Enter your middle name or initial
Enter your last name
<dx:BootstrapFormLayout runat="server" RequiredMarkDisplayMode="All" RequiredMark="*required" LayoutType="Vertical">
    <SettingsItemCaptions HorizontalAlign="Left" />
    <SettingsItemHelpTexts HorizontalAlign="Left" />
    <Items>
        <dx:BootstrapLayoutItem Caption="First Name" HelpText="Enter your first name" ColSpanLg="4" ColSpanSm="12">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server">
                        <ValidationSettings>
                            <RequiredField IsRequired="true" ErrorText="First Name is required" />
                        </ValidationSettings>
                    </dx:BootstrapTextBox>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Middle Name" HelpText="Enter your middle name or initial" ColSpanLg="4" ColSpanSm="12">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Last Name" HelpText="Enter your last name" ColSpanLg="4" ColSpanSm="12">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server">
                        <ValidationSettings>
                            <RequiredField IsRequired="true" ErrorText="Last Name is required" />
                        </ValidationSettings>
                    </dx:BootstrapTextBox>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
    </Items>
</dx:BootstrapFormLayout>

Data Binding

You can use the Form Layout control to display and edit items from any data source. In this demo, an object containing edited data is assigned to the DataSource property in the code-behind. Form Layout items are contained in the Items collection and are bound to data source fields using the LayoutItem.FieldName property. Each layout item contains a DevExpress data editor that allows editing values of the corresponding field type. If no items are specified explicitly, the Form Layout control automatically generates layout items with suitable editors for each data field.

When the edit form is submitted to the server, new field values are obtained via the GetNestedControlValueByFieldName method in the code-behind.

<dx:BootstrapFormLayout runat="server" ID="FormLayoutDataBinding" OnLayoutItemDataBinding="FormLayoutDataBinding_LayoutItemDataBinding">
</dx:BootstrapFormLayout>
<div class="text-right">
    <dx:BootstrapButton runat="server" Text="Submit" SettingsBootstrap-RenderOption="Primary" ValidationGroup="DataBinding" OnClick="UpdateButton_Click" />
    <dx:BootstrapButton runat="server" Text="Cancel" SettingsBootstrap-RenderOption="Link" AutoPostBack="false">
        <ClientSideEvents Click="function(s, e) { document.location.reload(); }" />
    </dx:BootstrapButton>
</div>
Screen Size
Color Themes
Demo QR Code