List View Edit Modes

• Nov 02, 2023
• 9 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 three supported UI platforms - WinForms, ASP.NET Web Forms, and ASP.NET Core Blazor.

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

Common Functionality Available in WinForms, ASP.NET Web Forms, 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 Web Forms and 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 in the table header.

To enable in-place editing, 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 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:

WinForms

ASP.NET Web Forms

ASP.NET Core Blazor

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

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 the ModificationsController.ModificationsHandlingMode and ModificationsController.ModificationsCheckingMode properties to change this behavior for editable List Views.

ASP.NET Web Forms-Specific Functionality

In-place Editing Customization (The InlineEditMode Property)

In addition to the standard Edit Action, ASP.NET Web Forms XAF applications support an InlineEdit Action. You can find this action in a List Editor’s context menu. To specify the in-place edit mode, use the IModelListViewWeb.InlineEditMode property of a Views | <ListView> node.

The ASPxGridListEditor takes this property’s value into account when the IModelView.AllowEdit property is set to True. The following table explains and illustrates possible values of the InlineEditMode property:

InlineEditMode Value	Description	Screenshot
EditForm	Cell values are edited in the Edit Form. The data row whose values are currently being edited is not displayed.
EditFormAndDisplayRow	Cell values are edited with the Edit Form. The data row whose values are currently being edited is displayed above the Edit Form.
Inline	Cell values are edited in the Inline Edit Row.
PopupEditForm	Cell values are edited with the Popup Edit Form.
Batch	Enables the Batch Edit Mode. The data rows whose values are currently being edited are saved only when you click the Save changes button. In this mode, you can edit multiple rows and then click Save changes to save all modified objects at once.

The Batch Edit Mode changes the List View’s behavior in the following ways:

• The Detail View is not invoked when you click a row.
• You cannot edit the following data types: type, images, criteria, and file attachments.
• The grid control uses only built-in column types and does not create Property Editors. If you want to customize cell editors, modify the ASPxGridView column’s properties. Property Editor customization does not affect cell editors.
• Objects that the List View displays should have a non-composite key.
• You cannot enable the Batch edit mode for the List Views whose UseASPxGridViewDataSpecificColumns property is set to false.
• Initial property values for new objects are passed to the client when the grid control is created. This grid control does not update these values when you use the New command item to create a new object.
• If a Lookup List View displays a large number of objects, set its Data Access Mode to Server. In this case, the View loads objects on demand.
• If you want to enable the auto filter row for a List View with a reference property column, set the List View’s Data Access Mode to Server.
• The ImmediatePostData property affects current row properties only.
• If you handle client-side events, note that XAF implements the following callbacks:
  • When you start editing a reference property, the BatchEditStartEditing event handler sends a callback to get a data source for this property.
  • When you finish editing a reference property decorated with ImmediatePostDataAttribute, the BatchEditEndEditing event handler sends a callback to update dependent property values.

Collection Property Edit Modes

XAF has two edit modes for collection properties in an ASP.NET Web Forms application:

1. Collection properties are always displayed in a Detail View but can be modified only when the Detail View is in Edit mode.

   

2. Collection properties are not displayed in Edit mode. They are displayed and editable in View mode.

   

You can use the WebApplication.CollectionsEditMode property to specify the edit mode globally. Refer to the following topic for details: How to: Hide Collection Properties in an Edit Mode Detail View for an ASP.NET Web Forms Application. To change the mode for an individual List View, use the IModelDetailViewWeb.CollectionsEditMode property in the Model Editor.

ASP.NET Core Blazor-Specific Functionality

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:

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 example demonstrates how to use the DxGridListEditor.CustomizeViewItemControl method to customize the background for a StringPropertyEditor:

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

public class CustomizeInlinePropertyEditorController : ViewController<ListView> {
    protected override void OnActivated() {
        base.OnActivated();
        if (View.Editor is DxGridListEditor gridListEditor) {
            gridListEditor.CustomizeViewItemControl<StringPropertyEditor>(this, CustomizePropertyEditor);
        }
    }
    private void CustomizePropertyEditor(StringPropertyEditor stringPropertyEditor) {
        if (stringPropertyEditor.Control is DxTextBoxAdapter textBoxAdapter) {
            textBoxAdapter.ComponentModel.CssClass += " background-orange";
        }
    }
}

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

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:

Inline

Edit Form

Pop-up edit form

Customize EditForm Template

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

EditFormGridController.cs:

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) {
            var adapter = gridListEditor.GetGridAdapter();
            adapter.GridModel.EditFormTemplate = CustomEditFormTemplate.Create(gridListEditor.PropertyEditors);
        }
    }
}

CustomEditFormTemplate.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 SplitterPosition 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 a fixed size in pixels for the view that is displayed first.

• Use ISplitLayoutSizeService to set the relative size for a List View when IModelListView.MasterDetailMode is ListViewAndDetailView. This is useful when you need to need to customize a specific split view at runtime. Note that the relative size has a lower priority than the fixed size specified by IModelSplitLayout.SplitterPosition.

  The following code sample demonstrates how to set the size of all List Views to 40% of the parent container. The detail view occupies the remaining 60%.

  using DevExpress.ExpressApp;
  using DevExpress.ExpressApp.Blazor;
  using DevExpress.ExpressApp.Blazor.Services;
  
  public class DefaultRelativeSizeController : ViewController<ListView> {
      ISplitLayoutSizeService SplitLayoutSizeService =>
          ((BlazorApplication)Application).ServiceProvider.GetRequiredService<ISplitLayoutSizeService>();
      protected override void OnActivated() {
          base.OnActivated();
          SplitLayoutSizeService[View.Id] = 40;
      }
  }