Bind Form Layout to Data

• Mar 02, 2023
• 2 minutes to read

You can use the ASPxFormLayout control to edit and display fields of any data source. In this case, layout items of the ASPxFormLayout control are bound to data source fields using the LayoutItem.FieldName property. Each layout item can contain a nested control that allows the edit and display of corresponding field type values.

Seamless Integration with DevExpress Data Editors

DevExpress Data Editors, derived from the ASPxEditBase class, can be seamlessly integrated into a FormLayout bound to data. To use the DevExpress Data Editors for editing and displaying data source fields, do the following.

• Bind the required layout item to a data source field by specifying the LayoutItem.FieldName property value.
• Nest the appropriate DevExpress Data Editor into this layout item.

Below is the list of DevExpress Data Editors that can be seamlessly integrated with the FormLayout.

ASPxBinaryImage ASPxButtonEdit ASPxCalendar ASPxCheckBox ASPxCheckBoxList ASPxColorEdit ASPxComboBox ASPxDateEdit ASPxDropDownEdit ASPxGridLookup ASPxHyperLink

ASPxImage ASPxLabel ASPxListBox ASPxMemo ASPxRadioButton ASPxRadioButtonList ASPxSpinEdit ASPxTextBox ASPxTimeEdit ASPxTrackBar

The code sample below demonstrates how to bind the ASPxFormLayout control to SqlDataSource. In this example, the ASPxTextBox control is used to edit Category Name field values, the ASPxMemo control is used to edit Description field values, and the ASPxBinaryImage control is used to display binary images, stored within the Picture field.

ASPX

<dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server" DataSourceID="SqlDataSource1">
    <Items>
        <dx:LayoutItem FieldName="CategoryName">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer runat="server" SupportsDisabledAttribute="True">
                    <dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px"></dx:ASPxTextBox>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
        <dx:LayoutItem FieldName="Description">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer runat="server" SupportsDisabledAttribute="True">
                    <dx:ASPxMemo ID="ASPxMemo1" runat="server" Height="71px" Width="170px"></dx:ASPxMemo>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
        <dx:LayoutItem FieldName="Picture">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer runat="server" SupportsDisabledAttribute="True">
                    <dx:ASPxBinaryImage runat="server" StoreContentBytesInViewState="True" ID="ASPxFormLayout1_E4" Width="170px"></dx:ASPxBinaryImage>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
    </Items>
</dx:ASPxFormLayout>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString='<%$ ConnectionStrings:nwindConnectionString %>' 
    ProviderName='<%$ ConnectionStrings:nwindConnectionString.ProviderName %>' 
    SelectCommand="SELECT * FROM [Categories]">
</asp:SqlDataSource>

The code result is shown in the image below.

Passing Data to a Custom Nested Control

You can use any control (even third-party controls) to edit and display data source fields. In this case, you should handle the ASPxFormLayout.LayoutItemDataBound event.

The code sample below demonstrates how to use the standard TextBox control for editing the “FirstName” and “LastName” fields of a datasource to which the FormLayout is bound.

C#

protected void formLayout_LayoutItemDataBound(object sender, LayoutItemDataBoundEventArgs e) {
    if(e.LayoutItem.FieldName == "FirstName" || e.LayoutItem.FieldName == "LastName") {
        TextBox textBox = (TextBox)e.LayoutItem.GetNestedControl();
        textBox.Text = e.NestedControlValue.ToString();
    }
}