Log In
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [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]Card View
  [Expand]Vertical Grid
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Collapse]Navigation and Layout Extensions
     Overview - FormLayout
     [Collapse]Binding to Data
       Binding to Data Overview
       Seamless Integration with DevExpress Data Editors
      Item Manipulation
    [Expand]Visual Elements
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
 [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]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[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 other object (e.g., a ViewBag item). In this case, layout items of the FormLayout extension are bound to data source fields. Each layout item can contain a nested MVC extension that provides the capability to edit and display the values of corresponding fields.

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

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

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

Value TypeAutomatically Nested Data Editor
String, CharTextBox
Byte, SByte, Int16, UInt16, Int32, UInt32, Int64, UInt64, Single, Double, DecimalSpinEdit

You can nest other data editors that meet your needs. FormLayout allows you to easily nest DevExpress Data Editors or third-party data editors.

Expanded Using a Custom Nested Control

You can use any extension (even third-party extensions) to edit and display data source fields. In this case, you can use the extension's data binding mechanism.

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

Expanded Binding to a non-Model Object

FormLayout supports binding to a non-Model class instance such as a ViewBag item. This functionality can be useful when you need to bind FormLayout to an object within a non-strongly-typed View. There are two ways of binding to an object: automatic and manual.


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


When binding FormLayout to an object manually, you can fully define the settings for each item. Moreover, when binding manually, you can 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.


The Form Layout item's Name property is not in effect when binding.

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


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

Expanded See Also

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