List View Edit Modes

Jan 16, 2026
6 minutes to read

Default data editing UI in XAF applications involves two steps. You first locate a record in a List View. You can then open a Detail View with that record’s data and make the changes. This general behavior is common to all supported UI platforms - WinForms and ASP.NET Core Blazor.

This topic demonstrates a few ways to make data editing available in List Views. In that case, a user does not have to navigate to a separate Detail View.

Common Functionality Available in WinForms and ASP.NET Core Blazor Applications

In-place Editing

The following image illustrates an editable List View:

In a WinForms XAF application, select a row and click a property cell to edit an existing object. Use the New action or the grid’s New Item Row to add a new object.

In ASP.NET Core Blazor XAF applications, you can click the Edit button to edit an existing object and the New button to create a new object. You can find these buttons in a row or table header. You can also use the InlineEditMode option to enable a WinForms-like style of Batch editing (see below).

Make a List View Editable

Invoke the Model Editor, expand the Views node, and navigate to the child node that corresponds to the desired List View.
Set the IModelView.AllowEdit property to True.
To allow users to create new objects directly in the List View, set the IModelListViewNewItemRow.NewItemRowPosition property to Top or Bottom. The New Item Row appears at the top or at the bottom of the List View, respectively.

Split Layout (The MasterDetailMode Property)

The split layout allows you to display both the Detail and List Views in the same window. The Detail View displays the currently selected object’s properties. The displayed content changes dynamically based on the object currently focused in the List View. The following images illustrate the split layout:

ASP.NET Core Blazor WinForms

To enable the split layout for a specific List View, follow the steps below:

Invoke the Model Editor, expand the Views node, and navigate to the child node that corresponds to the desired List View.
Set the IModelListView.MasterDetailMode property to ListViewAndDetailView.
Navigate to the SplitLayout child node and set the IModelSplitLayout.Direction property to Horizontal or Vertical to position the Detail View.

An object can have multiple Detail Views available. The IModelListView.MasterDetailView property allows you to specify the Detail View that corresponds to the object currently selected in the List View. If the IModelListView.MasterDetailView property is not specified, the List View uses the IModelListView.DetailView value. If both the MasterDetailView and DetailView properties are unspecified, the List View uses the IModelClass.DefaultDetailView value specified for the current object.

Note that in XAF Blazor applications, when MasterDetailMode is set to ListViewAndDetailView, in-place editing is disabled (the IModelView.AllowEdit option has no effect).

ASP.NET Core Blazor-Specific Functionality

In-place Editing Customization (The InlineEditMode Property)

You can use the IModelListViewBlazor.InlineEditMode property of a Views | <ListView> node to change the edit form type:

InlineEditMode Value	Description	Screenshot
`Inline`	Cell values are edited in the Inline Edit Row.
`Batch`	Uses Cell Edit Mode to edit multiple rows simultaneously. Use the Save Action to save modified values. Unsaved modified values are highlighted in the grid. The Grid component does not support this functionality when you use Server Data Access Mode.
`EditForm`	Cell values are edited in the Edit Form. The data row where values are being edited is not displayed.
`PopupEditForm`	Cell values are edited with the Popup Edit Form.

Commit Changes Automatically in Nested Views

If a Detail View contains a nested List View, a click on the Save button in the List View’s in-line edit form does not save changes in that List View. These changes are applied only when you save the object associated with the root Detail View. To change this behavior, override the AutoCommitChanges property of the ListEditorInplaceEditController:

csharp

public class CustomListEditorInplaceEditController : ListEditorInplaceEditController {
    protected override bool AutoCommitChanges => View.Id == "SomeBusinessObject_ListView" ? true : base.AutoCommitChanges;
}

The code above forces the ObjectSpace associated with a nested List View to commit changes and save them in response to a click on the Save button when you in-place edit the SomeBusinessObject in the nested List View.

Customize a Property Editor

When you use inline editing in a List Editor, you can customize Property Editors to change their appearance and subscribe to their events.

The following code snippet uses the DxGridListEditorBase.CustomizeViewItemControl method to customize the background for a StringPropertyEditor:

File: CS\MySolution.Blazor.Server\Controllers\CustomizeInlinePropertyEditorController.cs

csharp

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Components.Models;
using DevExpress.ExpressApp.Blazor.Editors;
using DevExpress.ExpressApp.Blazor.Utils;

public class CustomizeInlinePropertyEditorController : ViewController<ListView> {
    protected override void OnActivated() {
        base.OnActivated();
        View.CustomizeViewItemControl<StringPropertyEditor>(this, item => {
            if (item.ComponentModel is DxTextBoxModel textBoxModel) {
                textBoxModel.CssClass += " background-orange";
            }
        });
    }
}

File: MySolution.Blazor.Server\wwwroot\css\site.css

css

.background-orange {
    background-color: darkorange;
}

Tip

For more information about CSS customization in XAF ASP.NET Core Blazor applications, refer to the following section Customize UI Elements Using CSS

Customize EditForm Template

You can customize a regular or pop-up edit form. To do this, specify the GridModel.EditFormTemplate as shown in the following code snippet:

File: CS\MySolution.Blazor.Server\Controllers\EditFormGridController.cs:

csharp

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Editors;

public class EditFormGridController : ObjectViewController<ListView, CustomEditFormObject> {
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();
        if(View.Editor is DxGridListEditor gridListEditor) {
            gridListEditor.GridModel.EditFormTemplate = CustomEditFormTemplate.Create(gridListEditor.PropertyEditors);
        }
    }
}

File: CS\MySolution.Blazor.Server\CustomEditFormTemplate.razor:

razor

@using DevExpress.ExpressApp.Blazor.Editors
@inherits DxGridEditFormTemplateBase

<DxFormLayout>
    @foreach((string caption, RenderFragment fragment) in GetItems()) {
        <div>
            @caption:
            @fragment
        </div>
    }
</DxFormLayout>
@CreateSaveCancelButtons()

@code {
    public static new RenderFragment<GridEditFormTemplateContext> Create(IEnumerable<BlazorPropertyEditorBase> propertyEditors) =>
        (GridEditFormTemplateContext context) =>
            @<CustomEditFormTemplate Context="@context" PropertyEditors="@propertyEditors" />;
}

Set List And Detail View Size in Split Layout

In split layout mode, the List View and Detail View have equal sizes. Use either of the following techniques to change this behavior:

Drag the splitter to a new position at runtime. XAF saves this position in the RelativePosition property for the current view. To persist these changes for individual users in the database, set up a user model difference store as described in the following topic: Store Application Model Differences in the Database.
Specify the IModelSplitLayout.SplitterPosition property to set the size of the view displayed first in pixels.
Specify the IModelSplitLayout.RelativePosition property to set the size of the view displayed first as a percentage.

WinForms-Specific Functionality

Commit Changes Automatically

The WinForms application displays a confirmation dialog if a user focuses another element in the window after editing a cell in the in-place editor or the Detail View:

The changes made in an editable List View can be saved automatically without confirmation when you select another object in the View or focus another element in the window. Use ModificationsController.ModificationsHandlingMode and ModificationsController.ModificationsCheckingMode properties to change this behavior for editable List Views.