Tutorial: Creating a Simple Data Layout

• Sep 25, 2020
• 3 minutes to read

This tutorial steps through the process of creating a layout for displaying and editing a table from a data source using DataLayoutControl. It demonstrates how to:

• Connect to a data source and create the initial layout of editors for a data table.
• Arrange the created editors in a specific manner.
• Replace the default editors.

Note

In this tutorial, DataLayoutControl will be bound to the Customers table from the Northwind sample database.

1. Create a new Windows Forms Application project.

2. Locate the DataLayoutControl component in the Toolbox and drop it onto the form.

3. Click the control’s smart tag.

4. Once the wizard is completed, the DataLayoutControl generates layout items with embedded editors bound to the selected fields.

5. To navigate through the data source records, add the DataNavigator control to the layout and bind it to the target data source.

6. To anchor the DataNavigator to the bottom of the form, add an Empty Space Item above the DataNavigator.

7. When the DataLayoutControl generates a layout, it uses certain default editors to present data source fields (for instance, the TextEdit control, which is a single-line text editor, is used to present text fields). When required, you can replace the default controls with other DevExpress editors by clicking the DataLayoutControl’s smart tag and selecting the Edit Fields command.

8. Run the application to see the result.