Item Manipulation

Feb 02, 2023
5 minutes to read

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.

Item Manipulation Capabilities

The following actions are available.

Adding a layout item.
Adding a regular or tabbed layout group.
Creating a multicolumn layout and using an empty layout item.

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.

Declare item type in item settings explicitly:

csharp

groupSettings.Items.Add(itemSettings => {
    itemSettings.FieldName = "Description";
     itemSettings.NestedExtensionType = FormLayoutNestedExtensionItemType.TextBox; //required type here
    itemSettings.NestedExtensionSettings.Width = Unit.Percentage(100);
});

Alternatively, use the overloaded Add method that directly accepts a Model property:

csharp

groupSettings.Items.Add(m => m.Description, itemSettings =>
{
    itemSettings.FieldName = "Description";
    itemSettings.NestedExtensionSettings.Width = Unit.Percentage(100);
});