[Expand]General Information
[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]Tree List
  [Expand]Card View
  [Expand]Pivot Grid
   Rich Text Editor
  [Collapse]Site Navigation and Layout
    Floating Action Button
     [Expand]Binding to Data
      Item Manipulation
    [Expand]Visual Elements
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]Spell Checker
  [Expand]Query Builder
 [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]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)

Item Manipulation

With the FormLayout, you can easily create form layouts of any complexity by combining the order and hierarchy of the provided layout elements. The main layout elements of the FormLayout consist of labeled items, labeled regular groups and tabbed groups.

This topic describes how to manipulate layout items and groups within the FormLayout.

Item elements serve as placeholders for ASP.NET MVC helpers and extensions or custom content. Group elements are containers for other layout elements. It is possible to nest one group inside another group.

Items can be created in two ways:

  • Automatically, when the FormLayout is bound to a model. In this case, FormLayout automatically generates layout items for all fields of a model class. See the Binding to Data topic to learn more.
  • Manually. The FormLayout extension allows you to manually add layout items and groups by populating the FormLayoutSettings<ModelType>.Items collection, either in bound or unbound mode. In this case, you have the flexibility to customize each item or customize the group settings.

Expanded Item Manipulation Capabilities

The following actions are available.

  • Adding a layout item.

    You can add a layout item with default settings, the nested extension or custom content. The code sample below illustrates how to add layout items with different settings to the FormLayout.

    The result is illustrated in the image below.

  • Adding a regular or tabbed layout group.

    The code sample below illustrates how to gather layout items and tabbed group into a regular group.

    The result is demonstrated in the image below.

  • Creating a multicolumn layout and using an empty layout item.

    The code sample below illustrates how to organize layout items in a two-column layout. This example also shows how an empty layout item can be used in organizing multicolumn layouts.

    The result is illustrated in the image below.


If an item type (specified using the MVCxFormLayoutItem.NestedExtensionType property) is not set explicitly, the FormLayout creates a default item, applies your settings to it and uses a corresponding model property to determine a required type. Once the type is determined, the default Layout item is removed, and another item or a required type is created. Note that in this scenario, the FormaLayout gets access to the Model only during data binding, at which time your settings have been already applied to the default item. So, they do not apply to the new item again.

To solve this issue, you can do the following.

  1. Declare item type in item settings explicitly:
  1. Alternatively, use the overloaded Add method that directly accepts a Model property:

Expanded See Also

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