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
     [Expand]Binding to Data
      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]ASP.NET Core 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]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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 Overview 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.

Note

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:
  2. Alternatively, use the overloaded Add method that directly accepts a Model property:

Expanded See Also

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