Seamless Integration with DevExpress Data Editors

• Aug 01, 2019

DevExpress Data Editors can be seamlessly integrated into a FormLayout bound to data. In this case, the nested Data Editor is automatically bound to the corresponding field of the data source. To use DevExpress Data Editors for editing and displaying data source fields, do the following.

• Bind the required layout item to a data source field via a lambda expression or by specifying the LayoutItem.FieldName (via MVCxFormLayoutItem.FieldName) property value.
• Nest the appropriate DevExpress Data Editor into this layout item by specifying the MVCxFormLayoutItem.NestedExtensionType property value.

Below is a list of DevExpress Data Editors that can be seamlessly integrated with the FormLayout.

BinaryImage ButtonEdit Calendar CheckBox CheckBoxList ColorEdit ComboBox DateEdit DropDownEdit GridLookup HyperLink

Image Label ListBox Memo ProgressBar RadioButton RadioButtonList SpinEdit TextBox TimeEdit TrackBar

The code sample below demonstrates how to nest a TextBox data editor into a layout item.

View code (Razor):

C#

@Html.DevExpress().FormLayout(settings =>
{
    settings.Name = "FormLayout1";

    settings.Items.Add(itemSettings => 
    {
        itemSettings.FieldName = "FirstName";
        // Nesting a TextBox data editor into this layout item
        itemSettings.NestedExtensionType = FormLayoutNestedExtensionItemType.TextBox;
    });    
    ...
}).Bind(Model).GetHtml()