[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
    [Expand]Getting Started
    [Expand]Layout Control
    [Collapse]Data Layout Control
      Binding to Data Source in Code
      Displaying Nested Objects as Groups
      Data Annotation Attributes - Building Layout from Business Object
      Displaying Collection Properties
    [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)

Data Layout Control

The DataLayoutControl extends the layout management functionality provided by the Layout Control with tools that help you to:

  • Connect to a data source.
  • Choose target data source fields.
  • Specify editors to edit the chosen fields.
  • Specify the editors' bindable properties.

Expanded Online Video


The following tutorial shows how to get started with the DataLayoutControl.

Expanded Step 1. Bind to Data Source

First off, drop a DataLayoutControl onto the form and bind the control to a target data source. This can be accomplished in a number of ways:

Once the DataLayoutControl has been bound to a data source, the control remains empty, since no field has been retrieved from the data source as yet.

Expanded Step 2. Retrieve Fields

Click the control's smart tag and select Retrieve Fields.

The following wizard will be opened. Its first page allows you to confirm the target data source (or provide another one) and specify binding settings.

Click Next to switch to the next page, which allows you to:

  • Select the data source fields to be retrieved from the data source
  • Specify the editors that will be used for editing the data source fields
  • Specify editor properties to create bindings.
  • Specify the layout column count for the created layout. By default, the "Column Count" setting equals 1, and thus all editors will be arranged in one column.

Click Finish to generate the layout.

Expanded Step 3. Replace Editors and Change Bindable Properties

If you need to replace a generated editor with another one, you can do this using one of two approaches.

  • Click the generated editor, invoke its smart tag and select a new editor in the Change Editor Type dropdown.

  • Click the DataLayoutControl's smart tag and select Edit Fields.

    In the invoked dialog, locate the target field and change the editor type in the second column.

    This dialog also allows you to specify a custom bindable property if the default one does not satisfy your needs.

Expanded Step 4. Customize Layout

After the initial layout has been created, you can customize it as needed.

  • Add new controls
  • Delete controls (by selecting them and pressing the DELETE key).
  • Rearrange and resize layout items using drag-and-drop.
  • Combine items into regular and tabbed groups.
  • Modify item properties in the Properties window.

For more information on design-time and runtime customizations, see the Customization Capabilities and Customizing a Layout In Code topics.

Expanded See Also

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