How to: Implement an ASP.NET Web List Editor Using a Custom Control
- 5 minutes to read
The eXpressApp Framework is shipped with a number of built-in List Editors. However, in certain scenarios, you may need to implement a custom List Editor, to display object collections in a particular way. This topic demonstrates how to implement a custom ASPxCustomListEditor List Editor that uses a custom control. This List Editor is designed to display objects, implementing a custom IPictureItem interface as a list of images, one for each object. It can be used, for instance, to display DVD covers.
The following image demonstrates the implemented List Editor in an Album List View:
Note
- You can see the code implemented here in the FeatureCenter Demo installed with XAF. This demo is located in the %PUBLIC%\Documents\DevExpress Demos 18.2\Components\eXpressApp Framework\FeatureCenter folder, by default.
ASP.NET controls that use the ClientScriptManager.RegisterStartupScript method cannot be integrated using this example. If need to integrate such a control, feel free to contact our Support Team.
When implementing a custom List Editor that works with specific data, you can design it for a particular class. However, in this example, an interface will be introduced containing the properties required by the List Editor. Then, the List Editor will be designed to display objects implementing the interface. This approach allows you to simultaneously use that same List Editor for different classes. List Views displayed via the ASPxCustomListEditor will have two columns: Image and Text. The special interface has an additional ID property that represents a unique object identifier.
using System.Drawing;
//...
interface IPictureItem {
Image Image { get; }
string Text { get; }
string ID { get; }
}
Start implementing the List Editor by inherit its class from the ListEditor class, and implement basic functionality by overriding the following members. Note that your editor should be public.
- CreateControlsCore method that instantiates the List Editor’s control. Override it to create and configure an instance of the custom > control.
- AssignDataSourceToControl method that assigns the List Editor’s data source to its control.
- ListEditor.Refresh method that refreshes the data source of the List Editor’s control.
- To specify that List Views displaying IPictureItem objects should use the ASPxCustomListEditor, decorate the List Editor class with the ListEditorAttribute.
using System;
using System.Text;
using System.Collections;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Editors;
//...
[ListEditor(typeof(IPictureItem))]
public class ASPxCustomListEditor : ListEditor {
public ASPxCustomListEditor(IModelListView info) : base(info) { }
private AspxThumbnailEdit control;
protected override object CreateControlsCore() {
control = new ASPxCustomListEditorControl();
control.ID = "CustomListEditor_control";
return control;
}
protected override void AssignDataSourceToControl(Object dataSource) { if(control != null) {
control.DataSource = ListHelper.GetList(dataSource);
}
}
public override void Refresh() {
if(control != null) control.Refresh();
}
public override void BreakLinksToControls() {
control = null;
base.BreakLinksToControls();
}
}
The List Editor demonstrated above can display a collection of objects implementing the IPictureItem interface. Additionally, a List Editor should be able to invoke a Detail View for the focused object when an end-user clicks the object. For this purpose, modify the following members:
- In the CreateControlsCore method, subscribe to the control’s OnClick event. In the event handler, call the OnSelectionChanged and OnProcessSelectedItem methods.
- Override the ListEditor.FocusedObject method, to get and set the focused object.
[ListEditor(typeof(IPictureItem))]
public class ASPxCustomListEditor : ListEditor {
//...
protected override object CreateControlsCore() {
//...
control.OnClick += new EventHandler<ThumbnailClickEventArgs>(control_OnClick);
//...
}
private void control_OnClick(object sender, ThumbnailClickEventArgs e) {
this.FocusedObject = e.ItemClicked;
OnSelectionChanged();
OnProcessSelectedItem();
}
private object focusedObject;
public override object FocusedObject {
get {
return focusedObject;
}
set {
focusedObject = value;
}
}
}
The final step is to implement the following abstract members:
- Override the ListEditor.SelectionType property. Since the List Editor supports selection which is active only while a postback is processed, this property must return the SelectionType.TemporarySelection value.
- Override the ListEditor.GetSelectedObjects method. This method must return a list of the selected objects. In our case, this is the focused object.
- Override the ListEditor.ContextMenuTemplate property. This property is used to support the List Editor’s context menu. Since Internet browsers already have a context menu, we return null in this property.
[ListEditor(typeof(IPictureItem))]
public class ASPxCustomListEditor : ListEditor {
//...
public override SelectionType SelectionType {
get { return SelectionType.TemporarySelection; }
}
public override IList GetSelectedObjects() {
List<object> selectedObjects = new List<object>();
if(FocusedObject != null) {
selectedObjects.Add(FocusedObject);
}
return selectedObjects;
}
public override DevExpress.ExpressApp.Templates.IContextMenuTemplate ContextMenuTemplate {
get { return null; }
}
}