expressappframework-403258-ui-construction-list-editors-how-to-use-a-custom-component-to-implement-list-editor-blazor.md
This scenario implements a custom List Editor that shows images in an ASP.NET Core Blazor application. The List Editor displays a Razor component with custom objects. These objects implement a custom IPictureItem interface to store images with captions.
View Example: How to: Use a Custom Component to Implement List Editor (Blazor)
To add a custom List Editor to your ASP.NET Core Blazor application, define the required data model and implement the following components in the ASP.NET Core Blazor application project ( YourSolutionName.Blazor.Server ).
In the CustomEditorEF.Module project, create a new interface and name it IPictureItem. In this interface, declare the Image and Text properties. This allows the List Editor to work with different types of objects that implement this interface.
In the CustomEditorEF.Module project, create a business class that implements the IPictureItem interface. Name this class PictureItem.
Register the PictureItems entity in the DbContext:
In the CustomEditorEF.Blazor.Server project, create a new Razor component and name it PictureItemListView.
Ensure that the component’s Build Action property is set to Content.
Declare the Data component parameter.
Iterate through the Data collection and define the markup for each data object.
In the CustomEditorEF.Blazor.Server project, create a ComponentModelBase descendant and name it PictureItemListViewModel. In this class, declare properties that describe the component.
File: CustomEditorEF.Blazor.Server\Editors\CustomList\PictureItemListViewModel.cs
using CustomEditorEF.Module.BusinessObjects;
using DevExpress.ExpressApp.Blazor.Components.Models;
using Microsoft.AspNetCore.Components;
namespace CustomEditorEF.Blazor.Server.Editors.CustomList {
public class PictureItemListViewModel : ComponentModelBase {
public IEnumerable<IPictureItem> Data {
get => GetPropertyValue<IEnumerable<IPictureItem>>();
set => SetPropertyValue(value);
}
public override Type ComponentType => typeof(PictureItemListView);
}
}
Tip
You can find the full List Editor file code at the end of this topic: BlazorCustomListEditor.cs.
Create a ListEditor descendant and name it BlazorCustomListEditor.
Apply the following ListEditorAttribute to the BlazorCustomListEditor class: [ListEditor(typeof(IPictureItem))]. This attribute value makes BlazorCustomListEditor the default editor for any IPictureItem List View.
Add the ComponentContent property to create and cache the UI content of the List Editor based on the current View model. For more information, refer to the following topic: Underlying Controls and Components Behind UI Elements (ASP.NET Core Blazor).
Override the CreateControlsCore method to return a PictureItemListViewModel instance.
Override the AssignDataSourceToControl method. In this method, assign the List Editor’s data source to the component model. If the data source implements the IBindingList interface, handle data change notifications.
Override the BreakLinksToControls() method. In this method, reset the component model’s data to release resources. Override the Refresh() method. In this method, call the UpdateDataSource method to update the List Editor when its data is changed.
Override the remaining required members so that the code can compile.
Implement utility methods to work with items in a custom List Editor (for example, map between objects and their positions in the list and retrieve the current ordered set of items). Make sure that you implement the IControlOrderProvider interface to support the RecordsNavigationController that contains the Previous and Next Actions:
In its current state, the BlazorCustomListEditor can only display PictureItem records. To enable record editing in a Detail View, the PictureItemListView component needs to notify BlazorCustomListEditor that a user clicked on a particular item. The following scenario enables the component model to pass messages between these two entities.
Declare an ItemClick component parameter for the PictureItemListView Razor component. Invoke this callback whenever a user clicks an item.
In PictureItemListViewModel.cs, declare the ItemClick property. It enables the ASP.NET Core Blazor UI to react to item click events
Modify BlazorCustomListEditor to react to clicks:
Note
If your editor requires access to Dependency Injection and application services, or you need to access an instance of XafApplication and ObjectSpace, refer to the following section: Access ServiceProvider, XafApplication and ObjectSpace to Query and Manipulate Data (Perform CRUD Operations).
This scenario enables the selection of multiple records in a List View. This is useful when a user needs to bulk-delete items or simultaneously execute other actions for several records.
Implement multiple selection in the PictureItemListView Razor component:
Similar to adding support for item click events, add the selection-related property to the Component Model class:
Modify BlazorCustomListEditor to process the new event:
The full BlazorCustomListEditor.cs file code:
using CustomEditorEF.Module.BusinessObjects;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor;
using DevExpress.ExpressApp.Blazor.Components;
using DevExpress.ExpressApp.Blazor.Components.Models;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp.SystemModule;
using DevExpress.ExpressApp.Utils;
using Microsoft.AspNetCore.Components;
using System.Collections;
using System.ComponentModel;
namespace CustomEditorEF.Blazor.Server.Editors.CustomList {
[ListEditor(typeof(IPictureItem))]
public class BlazorCustomListEditor : ListEditor, IComponentContentHolder, IControlOrderProvider {
private RenderFragment _componentContent;
private IPictureItem[] selectedObjects = Array.Empty<IPictureItem>();
public PictureItemListViewModel ComponentModel { get; private set; }
public RenderFragment ComponentContent {
get {
_componentContent ??= ComponentModelObserver.Create(ComponentModel, ComponentModel.GetComponentContent());
return _componentContent;
}
}
public BlazorCustomListEditor(IModelListView model) : base(model) { }
private void BindingList_ListChanged(object sender, ListChangedEventArgs e) {
UpdateDataSource(DataSource);
}
private void UpdateDataSource(object dataSource) {
if(ComponentModel is not null) {
ComponentModel.Data = (dataSource as IEnumerable)?.OfType<IPictureItem>().OrderBy(i => i.Text).ToList<IPictureItem>();
}
}
protected override object CreateControlsCore() {
ComponentModel = new PictureItemListViewModel();
ComponentModel.ItemClick = EventCallback.Factory.Create<IPictureItem>(this, (item) => {
selectedObjects = new IPictureItem[] { item };
OnSelectionChanged();
OnProcessSelectedItem();
});
ComponentModel.SelectionChanged = EventCallback.Factory.Create<IEnumerable<IPictureItem>>(this, (items) => {
selectedObjects = items.ToArray();
OnSelectionChanged();
});
return ComponentModel;
}
protected override void AssignDataSourceToControl(object dataSource) {
if(ComponentModel is not null) {
if(ComponentModel.Data is IBindingList bindingList) {
bindingList.ListChanged -= BindingList_ListChanged;
}
UpdateDataSource(dataSource);
if(dataSource is IBindingList newBindingList) {
newBindingList.ListChanged += BindingList_ListChanged;
}
}
}
public override void BreakLinksToControls() {
AssignDataSourceToControl(null);
base.BreakLinksToControls();
}
public override void Refresh() => UpdateDataSource(DataSource);
public override SelectionType SelectionType => SelectionType.Full;
public override IList GetSelectedObjects() => selectedObjects;
public int GetIndexByObject(object obj) {
var items = ListHelper.GetList(ComponentModel.Data);
var index = items.IndexOf(obj);
if (index == int.MinValue) {
index = -1;
}
return index;
}
public object GetObjectByIndex(int index) {
var items = ListHelper.GetList(ComponentModel.Data);
return items[index];
}
public IList GetOrderedObjects() {
var orderedObjects = new List<object>();
var items = ListHelper.GetList(ComponentModel.Data);
for (var rowVisibleIndex = 0; rowVisibleIndex < items.Count; ++rowVisibleIndex) {
var record = items[rowVisibleIndex];
if (record != null) {
orderedObjects.Add(record);
}
}
return orderedObjects;
}
}
}
The custom List Editor supports only the Client data access mode. Set the Client data access mode in the static DataAccessModeHelper.RegisterEditorSupportedModes method as described in the Specify Data Access Mode section of the following topic: List View Data Access Modes. File : CustomEditorEF.Blazor.Server\BlazorModule.cs
using DevExpress.ExpressApp.Utils;
// ...
public sealed class CustomEditorEFBlazorModule : ModuleBase {
public CustomEditorEFBlazorModule() {
DataAccessModeHelper.RegisterEditorSupportedModes(typeof(BlazorCustomListEditor),
new[] { CollectionSourceDataAccessMode.Client });
}
// ...
}
A custom List Editor may require access to the application object or the List View Collection Source (the List View data source). If so, implement the IComplexListEditor interface as shown in the following topic: IComplexListEditor.
Use the IComplexListEditor.Setup method to get the XafApplication and CollectionSourceBase objects. The CollectionSourceBase class is the base class for Collection Source classes that allow you to manipulate ObjectSpace data.
You can also obtain an IServiceProvider instance for Dependency Injection needs by accessing the XafApplication.ServiceProvider property.
See Also
How to: Implement a Custom List Editor (WinForms)
Implement a Property Editor Based on a Custom Component (Blazor)