Skip to main content

List View Edit Modes

  • 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:

XAF Inline Edit Mode, DevExpress 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 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.

    XAF Model Editor Settings for Editable List View, DevExpress

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
XAF ASP.NET Core Blazor Split Layout, DevExpress
WinForms
XAF Windows Forms Split Layout, DevExpress
ASP.NET Web Forms
XAF ASP.NET Web Forms Split Layout, DevExpress

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

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:

XAF ASP.NET Core Blazor Inline Edit Mode Settings in Model Editor, DevExpress

InlineEditMode Value Description Screenshot
Inline Cell values are edited in the Inline Edit Row. Standard Inline edit
Batch Uses Cell Edit Mode to edit multiple rows at once. Use the Save Action to save modified values. Unsaved modified values are highlighted in the grid. Standard Batch edit
EditForm Cell values are edited in the Edit Form. The data row whose values are being edited is not displayed. InlineEditMode_BlazorDifferentEditModes
PopupEditForm Cell values are edited with the Popup Edit Form. InlineEditMode_BlazorDifferentEditModes

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.Components.Models;
using DevExpress.ExpressApp.Blazor.Editors;

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.ComponentModel is DxTextBoxModel textBoxModel) {
            textBoxModel.CssClass += " background-orange";
        }
    }
}
.background-orange {
    background-color: darkorange;
}

BlazorInlineEditMode_CustomizeControl

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) {
            gridListEditor.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;
        }
    }
    

    Relative size

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:

InlineEdit_Confirmation

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.

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.

InlineEditMode_Address

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

InlineEditMode Value Description Screenshot
EditForm An Edit Form appears and replaces the corresponding data row. InlineEdit_EditForm
EditFormAndDisplayRow An Edit Form appears. The corresponding data row remains visible above the form. InlineEdit_EditFormAndDisplayRow
Inline An Inline Edit Row appears and replaces the corresponding data row. InlineEdit_Inline
PopupEditForm A Popup Edit Form appears over the View. InlineEdit_PopupEditForm
Batch Activates Batch Edit Mode. Users can edit multiple rows and then click Save changes to save all modified objects at once. InlineEdit_Batch

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

  • The Detail View does not appear 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 correspond to data rows should have a non-composite key.
  • You cannot enable Batch edit mode for 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. This behavior may affect your application if you need to update new object values on the 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.

Note

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

Collection Property Edit Modes

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

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

    WebCollectionsMode_Edit

  2. Collection properties are hidden in Edit mode. They are visible and editable in View mode.

    WebCollectionsMode_View

You can use the IModelOptionsWeb.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.

See Also