Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[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]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Collapse]Navigation and Layout Extensions
   [Collapse]FormLayout
     Overview - FormLayout
    [Collapse]Concepts
     [Collapse]Binding to Data
       Binding to Data Overview
       Seamless Integration with DevExpress Data Editors
      Item Manipulation
    [Expand]Visual Elements
   [Expand]Menu
   [Expand]NavBar
   [Expand]Ribbon
   [Expand]PageControl
   [Expand]TabControl
   [Expand]PopupMenu
   [Expand]Splitter
   [Expand]TreeView
   [Expand]Panel
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[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 Type Automatically Nested Data Editor
byte[] BinaryImage
String, Char TextBox
Byte, SByte, Int16, UInt16, Int32, UInt32, Int64, UInt64, Single, Double, Decimal SpinEdit
Enum ComboBox
Boolean CheckBox
DateTime DateEdit

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.

Automatic

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.

Manual

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 code sample below demonstrates how to bind the FormLayout extension to an object manually.

Note

You can also bind the FormLayout extension to a list of objects (IEnumerable<T>, IQueryable<T>, etc.). In this case, the first element in the list is retrieved automatically.

Expanded See Also

How would you rate this topic?​​​​​​​