Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Themes
 
Show All Themes
v
...v

Features

Group Caption
Please, enter your login name
Please, enter your e-mail
Leave a little bit of information
about yourself
Group Settings
v
Item Caption Settings
v
v
v
Item HelpText Settings
v
v
v
Apply Changes


The FormLayout extension delivers a comprehensive form design feature set. This demo illustrates the primary features of the FormLayout.

Use the FormLayout to easily create form layouts of any complexity by combining the order and hierarchy of provided layout elements. The FormLayout main layout elements are comprised of labeled items, labeled regular groups and tabbed groups.

Item elements serve as placeholders for data editors or custom content. Group elements are containers for other layout elements. Group nesting is also available.

Items allow you to define inline help texts that describe editor definitions. Help texts can also be defined at the nested editor's level (if DevExpress data editors are used in items). An editor's help text can be displayed either always (as an editor inline text) or only when the data editor receives focus (as a popup tooltip). Take a look at the memo editor behavior in this demo.

FormLayout can also display customizable text marks within item captions to indicate whether filling in an item editor is required or optional. The indicator display mode can be defined for all or individual items. The indicator type is determined based on a setting defined at the item editor level, an item level or "Required" annotation attribute.

When FormLayout is bound to data model fields, the DevExpressEditorsBinder model binder must be used instead of the default model binder to correctly transfer values from DevExpress editors back to corresponding data model fields.

Collapse/Expand
Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
Open CS Solution
The source code files for this demo are installed (by default) in the following directory:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxNavigationAndLayoutDemos