DnD support for PropertyList<T>

Hi all,

As you might know then PropertyList<T> is very powerfull. It is help us to easy to manage and organize a list of complex property data but the limitation as I am facing with is that it is not official support sorting via drag and drop (or atleast I don't know how to turn it on - although take hour to googling).

Drag and drop not working on product | Episerver Developer Commun

Then I digged a bit with javascript solution as below then its worked: (I am assumming that you already know about how to create your module via module.config, create your custom editor and map it to your property list property)

So here is our code: SortableCollectionEditor.js

define([
    // dojo
    "dojo/_base/array",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/aspect",
    "dojo/dom-class",
    "dojo/dom-style",
    "dojo/topic",

    // EPi Framework
    "epi/shell/widget/_FocusableMixin",
    "epi/shell/dnd/Target",


    // epi cms
    "epi-cms/contentediting/editors/CollectionEditor",
    "epi-cms/contentediting/editors/_TextWithActionLinksMixin",

    // epi commerce
    "epi-ecf-ui/contentediting/editors/_GridWithDropContainerMixin"
],
    function (
        //dojo
        array,
        declare,
        lang,
        aspect,
        domClass,
        domStyle,
        topic,

        // EPi Framework
        _FocusableMixin,
        Target,

        // epi cms
        CollectionEditor,
        _TextWithActionLinksMixin,

        // epi commerce
        _GridWithDropContainerMixin,
    ) {
        return declare([CollectionEditor, _GridWithDropContainerMixin, _FocusableMixin], {
            // module:
            //      app/editors/sortablecollectioneditor
            // summary:
            //      Editor widget for support propertylist dnd 

            resources: { "drophere": "You can drop {content} here", "actions": { "content": "content" } },

            postMixInProperties: function () {
                // summary:
                //      Post mix in properties initialization.
                // description:
                //      Fullfills properties that needed to start up the widget.
                // tags:
                //      protected

                this.inherited(arguments);

                this.gridSettings.dndParams = lang.mixin(this.gridSettings.dndParams, {
                    _checkAcceptanceForItems: function (items, acceptedTypes) {
                        var types = array.map(items, function (item) {
                            return item.data.typeIdentifier;
                        });

                        var flag = false;
                        for (var j = 0; j < types.length; ++j) {
                            if (types[j] in acceptedTypes) {
                                flag = !!acceptedTypes[types[j]];
                                break;
                            }
                        }
                        return flag;
                    }
                });
            }
        });
    });

DnD support for PropertyList<T>

Comments