[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Reporting
  [Expand]Charting
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Collapse]Site Navigation and Layout
   [Collapse]FormLayout
     Overview
    [Collapse]Concepts
     [Collapse]Binding to Data
       Binding to Data Overview
       Seamless Integration with DevExpress Data Editors
      Item Manipulation
      Adaptivity
    [Expand]Visual Elements
   [Expand]Menu
   [Expand]NavBar
   [Expand]Ribbon
   [Expand]PageControl
   [Expand]TabControl
   [Expand]PopupMenu
   [Expand]Splitter
   [Expand]TreeView
   [Expand]Panel
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]SpellChecker
  [Expand]Query Builder
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Binding to Data Overview

The FormLayout extension can be used to edit and display fields of a Model class instance or another object (for example, a ViewBag item). In this case, the FormLayout extension's layout items are bound to data source fields. Each layout item can contain a nested MVC extension that provides the capability to edit and display the corresponding fields' values.

The code sample below demonstrates how to bind the FormLayout to a strongly-typed View's Model.

The FormLayout automatically nests data editors that provide the capability to display and edit the corresponding fields' values. The image below shows the result.

The table below lists which DevExpress Data Editors are automatically nested in the FormLayout for different field value types. Nullable types are also supported.

Value TypeAutomatically Nested Data Editor
byte[]BinaryImage
String, CharTextBox
Byte, SByte, Int16, UInt16, Int32, UInt32, Int64, UInt64, Single, Double, DecimalSpinEdit
EnumComboBox
BooleanCheckBox
DateTimeDateEdit

You can nest other data editors if required. The FormLayout also allows you to nest DevExpress Data Editors or third-party data editors.

Expanded Using a Custom Nested Control

You can use any extension (or third-party extensions) that is bound to a data source to edit and display data source fields.

The code sample below demonstrates how to use the standard TextBox and ValidationMessage helpers to edit the "FirstName" and "LastName" fields of the data Model to which the FormLayout is bound.

Expanded Binding to a non-Model Object

The FormLayout supports automatically and manually binding to a non-Model class instance such as a ViewBag item. This functionality can be useful when you need to bind the FormLayout to an object within a non-strongly-typed View.

Automatic

To bind the FormLayout to an object automatically, pass this object as a parameter to the FormLayoutExtension<ModelType>.Bind method. The FormLayout automatically retrieves all object fields and creates layout items bound to these object fields.

Manual

When binding the FormLayout to an object manually, you can define each item's settings. You can also populate the FormLayoutSettings<ModelType>.Items collection with unbound items, gather items into groups, and fully customize the look and feel of the FormLayout. Refer to the Item Manipulation topic to learn how to customize the layout.

Note

The Form Layout item's Name property is not in effect when the Form Layout is binded to an object.

The code sample below demonstrates how to bind the FormLayout extension to an object manually.

Note

  • When binding the FormLayout extension to a list of objects (IEnumerable<T>, IQueryable<T>, etc.), the first element in the list is retrieved automatically.
  • Use the PreRender method as illustrated in the E4125 online sample to bind the CheckBoxList or ListBoxList object to a collection of items within the Form Layout item.

Expanded See Also

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