Tab
A newer version of this page is available. Switch to the current version.

ASPxFormLayout Class

A form layout management control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v19.1.dll

Declaration

public class ASPxFormLayout :
    ASPxDataWebControl,
    IControlDesigner

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.19.1: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.

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

<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");
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();
li1.Controls.Add(tb1);

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

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

LayoutItem li3 = new LayoutItem("TextBox3");
li3.ColumnSpan = 2;
lg.Items.Add(li3);

ASPxTextBox tb3 = new ASPxTextBox();
tb3.Width = Unit.Percentage(100);
li3.Controls.Add(tb3);

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.

Class name

ASPxClientFormLayout

Access name

ClientInstanceName

Events

ASPxFormLayout.ClientSideEvents

See demo

Features

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: