Default Form Layout

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

<dx:BootstrapFormLayout runat="server" >
    <Items>
        <dx:BootstrapLayoutItem Caption="First Name" ColSpanSm="6">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Andrew" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Last Name" ColSpanSm="6">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Fuller" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Country" ColSpanSm="6">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Austria" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="City" ColSpanSm="6">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Graz" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Address" ColSpanSm="12">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Kirchgasse 6" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Note" ColSpanSm="12">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapMemo runat="server" Rows="4"
                        Text="Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.  He is fluent in French and Italian and reads German.  He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.  Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association." />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem ColSpanSm="12" ShowCaption="False" HorizontalAlign="Right">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapButton runat="server" Text="Submit" SettingsBootstrap-RenderOption="Primary" />
                    <dx:BootstrapButton runat="server" Text="Cancel" SettingsBootstrap-RenderOption="Link" AutoPostBack="false">
                        <ClientSideEvents Click="function(s, e) { document.location.reload(); }" />
                    </dx:BootstrapButton>
                </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="First Name">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Andrew" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Last Name">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Fuller" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Country">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Austria" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="City">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Graz" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapLayoutItem>
        <dx:BootstrapLayoutItem Caption="Address" ColSpanMd="12">
            <ContentCollection>
                <dx:ContentControl>
                    <dx:BootstrapTextBox runat="server" Text="Kirchgasse 6" />
                </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="FormLayout3" OnLayoutItemDataBinding="FormLayout3_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