Tab

ASPxFormLayout Class

A form layout management control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v20.2.dll

Declaration

public class ASPxFormLayout :
    ASPxDataWebControl,
    IControlDesigner

The following members accept/return ASPxFormLayout objects:

Remarks

TheASPxFormLayout control allows you to display and arrange layout items, groups and tabbed groups inside it.

ASPxFormLayout_Overview

Create a Form Layout

Design Time

The ASPxFormLayout control is available on the DX.20.2: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize the control's settings, or paste the control markup in the page's source code.

NOTE

To properly function, DevExpress controls require that special modules, handlers and options are registered in the the Web.config file. Switch the Microsoft Visual Studio IDE to the Design tab to automatically update the Web.config file with the required DevExpress information.

<dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server" Width="50%" Theme="Office365">
    <Items>
        <dx:LayoutGroup Caption="Group (ColCount=2)" ColCount="2" SettingsItemCaptions-Location="Top">
            <Items>
                <dx:LayoutItem Caption="TextBox1">
                    <ParentContainerStyle Paddings-PaddingRight="12"></ParentContainerStyle>
                    <LayoutItemNestedControlCollection>
                        <dx:LayoutItemNestedControlContainer>
                            <dx:ASPxTextBox runat="server" Width="100%" />
                        </dx:LayoutItemNestedControlContainer>
                    </LayoutItemNestedControlCollection>
                </dx:LayoutItem>
                <dx:LayoutItem Caption="TextBox2">
                    <ParentContainerStyle Paddings-PaddingLeft="0" Paddings-PaddingRight="12"></ParentContainerStyle>
                    <LayoutItemNestedControlCollection>
                        <dx:LayoutItemNestedControlContainer>
                            <dx:ASPxTextBox runat="server" Width="100%" />
                        </dx:LayoutItemNestedControlContainer>
                    </LayoutItemNestedControlCollection>
                </dx:LayoutItem>
                <dx:LayoutItem Caption="Memo" ColSpan="2" HelpText="ColSpan=2">
                    <LayoutItemNestedControlCollection>
                        <dx:LayoutItemNestedControlContainer runat="server">
                            <dx:ASPxMemo runat="server" Width="100%" Rows="4" /> 
                        </dx:LayoutItemNestedControlContainer>
                    </LayoutItemNestedControlCollection>
                </dx:LayoutItem>
            </Items>
        </dx:LayoutGroup>
    </Items>
</dx:ASPxFormLayout>

Run Time

using DevExpress.Web;
// ...
ASPxFormLayout fl = new ASPxFormLayout();
fl.ID = "ASPxFormLayout1";
Page.Form.Controls.Add(fl);

LayoutGroup lg = new LayoutGroup("Group (ColCount=2)");
lg.SettingsItemCaptions.Location = LayoutItemCaptionLocation.Top;
lg.ColumnCount = 2;
fl.Items.Add(lg);

LayoutItem li1 = new LayoutItem("TextBox1");
lg.Items.Add(li1);

ASPxTextBox tb1 = new ASPxTextBox();
tb1.ID = "tb1";
li1.Controls.Add(tb1);

LayoutItem li2 = new LayoutItem("TextBox2");
lg.Items.Add(li2);

ASPxTextBox tb2 = new ASPxTextBox();
tb2.ID = "tb2";
li2.Controls.Add(tb2);

LayoutItem li3 = new LayoutItem("Memo");
li3.ColumnSpan = 2;
li3.HelpText = "ColSpan=2";
lg.Items.Add(li3);

ASPxMemo m1 = new ASPxMemo();
m1.ID = "m1";
m1.Rows = 4;
m1.Width = Unit.Percentage(100);
li3.Controls.Add(m1);

Result:

Client-Side API

The ASPxFormLayout's client-side API is implemented with JavaScript language and exposed by the ASPxClientFormLayout object.

Availability

Available by default.

Client object type

ASPxClientFormLayout

Access name

ASPxFormLayout.ClientInstanceName

Events

ASPxFormLayout.ClientSideEvents

See demo

Supported Item Types

The Form Layout supports the following item types:

  • EmptyLayoutItem - a layout item that has no caption or nested control;
  • LayoutItem - a layout item that can display a nested control;
  • LayoutGroup - a group that can display other items, groups and tabbed groups;
  • TabbedLayoutGroup - a tabbed group that can display layout items as tabs.

Use the ASPxFormLayout.Items property to access item collection.

Nested Controls

You can place any control inside a layout item.

Declaratively:

...
<dx:LayoutItem Caption="Memo" ColSpan="2" HelpText="ColSpan=2">
    <LayoutItemNestedControlCollection>
        <dx:LayoutItemNestedControlContainer runat="server">
            <dx:ASPxMemo runat="server" Width="100%" Rows="4" /> 
        </dx:LayoutItemNestedControlContainer>
    </LayoutItemNestedControlCollection>
</dx:LayoutItem>
...

In code:

// ...
LayoutGroup lg = new LayoutGroup("Group");
fl.Items.Add(lg);

LayoutItem li1 = new LayoutItem("TextBox1");
lg.Items.Add(li1);

ASPxTextBox tb1 = new ASPxTextBox();
tb1.ID = "tb1";
li1.Controls.Add(tb1);
// ...

Data Binding

The form layout allows you to display and edit data source fields. Use the FieldName property to bind layout items to data source fields.

Learn more

Editor Dialog

You can use the FormLayout Editor dialog to create ASPxFormLayout items at design time. To run the FormLayout Editor, invoke the control's smart tag and click the "Edit Layout..." link.

The FormLayout Editor dialog allows you to add, delete and rearrange layout items and groups, and access and customize their settings.

Learn more

Columns

The form layout allows you to divide group contents into table cells and position layout elements (items and groups) in cells that can span across several columns or rows.

<dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server" Width="50%" Theme="Office365">
    <Items>
        <dx:LayoutGroup Caption="Group (ColCount=2)" ColCount="2" SettingsItemCaptions-Location="Top">
            <Items>
                ...
                <dx:LayoutItem Caption="Memo" ColSpan="2" HelpText="ColSpan=2">
                    <LayoutItemNestedControlCollection>
                        <dx:LayoutItemNes