[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Collapse]Form Layout Managers
    Side Panel
   [Collapse]Layout and Data Layout Controls
    [Expand]Product Information
    [Collapse]Getting Started
      Tutorial: Creating a Simple Layout
      Tutorial: Creating a Simple Data Layout
    [Expand]Layout Control
    [Expand]Data Layout Control
    [Expand]Layout Items
    [Expand]Layout Groups
    [Expand]Tabbed Groups
    [Expand]Other Layout Elements
    [Expand]Design-Time and Runtime Customization
    [Expand]Size and Alignment
     Flow Layout
     Table Layout
     Focus Management
    [Expand]Appearance and Look and Feel
    [Expand]Member Tables
   [Expand]Tabbed MDI Manager
    Tab Control
   [Expand]Wizard Control
    Workspace Manager
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Tutorial: Creating a Simple Data Layout

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.

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.

    Connect to a data source by using one of three available actions.

    • Data Source Wizard - Launches the DevExpress Data Source Configuration Wizard, which allows you to connect to multiple data source types and customize basic options related to the selected data source type.
    • Choose Data Source - Invokes the VS data source selection window.
    • Retrieve Fields - Invokes the DataLayoutControl's wizard, which allows you to connect to data, select the fields to retrieve from the data source, and specify editors to display these fields.

    In this tutorial, the Retrieve Fields action is used, which invokes the DataLayoutControl's wizard. The wizard's first page allows you to select the target data source (or create a new one) and specify layout generation and data source update settings.

    Click Next to switch to the next page and select the fields to retrieve from the data source.

    Click Finish to generate the layout.


    The Column Count setting specifies the number of columns for the layout to be generated. If it is set to 1, all created editors will be arranged in a single column.


    At this step, it is possible to change the default editors used to edit field values. In this tutorial, the default editors will be changed later.

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

    Customize the layout using the context menu, drag-and-drop and resize operations.

  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.

    The invoked Data Source Binding Manager allows you to specify editors and binding properties for all data source fields. The following animation shows how to replace the default editor for the Address field with the MemoEdit control (a multi-line text editor).

  8. Run the application to see the result.

Is this topic helpful?​​​​​​​