How to: Implement an ASP.NET Web List Editor Using a Custom Control How to: use custom controls implement ASP.NET Web List Editor

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.

eXpressApp framework comes with many built-in list editor. However, in some cases, you may need to implement a custom list editor displays a collection of objects in a particular way. This topic demonstrates how to use the custom control custom ASPx Custom List Editor List Editor. This list is intended to show the object editor, IPictureItem implement custom interfaces, each object image as a list. For example, it can be used to display the DVD cover.

The following image demonstrates the implemented List Editor in an Album List View:

The following illustration shows the list editor albums list view to achieve:

CustomWebListEditor

Note 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 19.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

You can see the code that implements the functions here in the center of the presentation using XAF installation. By default, this demo is located% PUBLIC% _ documents _DevExpress presentation 19.2_ components _eXpressApp framework _ function center folder.

ASP.NET uses client script manager control. You can not use this example of the integration registered startup script method. If you need to integrate such controls, please contact our support team at any time

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.

When implementing the data for a particular custom list editor, it may be designed for a specific class. However, in this example, the interface will be introduced into a desired property contains a list editor. Then, list editor will display the design object that implements the interface. This method allows you to use the same list of editors for different classes. By List Editor ASPx custom list view display comprising two: images and text. With additional special interface represents a unique ID attribute object identifier.

using System.Drawing;
//...
public 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 (in this example, ASPxCustomListEditorControl).
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.

Its class by inheriting from class to start implementing ListEditor list editor, and to achieve the basic functions by rewriting the following members. Please note that your editor should be public.

List Editor to create an instance of the control's "control center" approach. Examples overridden to create custom control and configuration (in this example, ASPx custom list Editor control).
Source control data distribution method of the data source list editor is assigned to its control.
List Editor. Refresh method for refreshing the data source list editor control.
To specify the display list view IPictureItem objects should be used ASPx custom list editor, use decorative ListEditor property list editor class.

using System;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp.Utils;
// ...
[ListEditor(typeof(IPictureItem))]
public class ASPxCustomListEditor : ListEditor {
    public ASPxCustomListEditor(IModelListView info) : base(info) { }
    private ASPxCustomListEditorControl 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();
    }
}

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.

Demonstrated above list editor can display the collection implementations IPictureItem interface objects. In addition, when the end user clicks the object list editor should be able to call for more information view the focus object. To do this, modify the following members:

In the "Create Control core" approach, subscribe OnClick event of the control. In the event handler, call OnSelectionChanged and "Select" Project method.
Covering the ListEditor. The method of the focus object, get and set the focus object.

Additionally, implement the custom CustomListEditorClickEventArgs class with the IPictureItem field for the OnClick event.

In addition, the OnClick event of IPictureItem field in the custom list, click Editor EventArgs class.

[ListEditor(typeof(IPictureItem))]
public class ASPxCustomListEditor : ListEditor {
    //...
    protected override object CreateControlsCore() {
        //...
        control.OnClick += new EventHandler<CustomListEditorClickEventArgs>(control_OnClick);
        //...   
    }
    private void control_OnClick(object sender, CustomListEditorClickEventArgs e) {
        this.FocusedObject = e.ItemClicked;
        OnSelectionChanged();
        OnProcessSelectedItem();
    }
    private object focusedObject;
    public override object FocusedObject {
        get {
            return focusedObject;
        }
        set {
            focusedObject = value;
        }
    }
}
public class CustomListEditorClickEventArgs : EventArgs {
    public IPictureItem ItemClicked;
}

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.

The final step is to implement the following abstract members:

Covering List Editor. Select type attribute. Because the list editor supports selecting only active when processing rollback, so this attribute must return SelectionType. Select the temporary value.
Covering the list editor. Gets the selected object methods. This method must return a list of the selected object. In our example, this is the focus of the object.
Overlay List Editor Context menu template properties. This property is used to support the list editor context menu. Because Internet Explorer has a context menu, so in this property returns null.

using System.Collections;
using System.Collections.Generic;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Templates;
// ...
[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 IContextMenuTemplate ContextMenuTemplate {
        get { return null; }
    }
}

How to: Implement an ASP.NET Web List Editor Using a Custom Control How to: use custom controls implement ASP.NET Web List Editor

Note Note

Guess you like