Ha Bui
Jun 10, 2021
(1 votes)

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

    // dojo

    // EPi Framework

    // epi cms

    // epi commerce
    function (

        // EPi Framework

        // epi cms

        // epi commerce
    ) {
        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.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]];
                        return flag;

Hope that help!

Ha Bui

Jun 10, 2021


Scott Reed
Scott Reed Jun 10, 2021 08:23 AM

Is this just because the modal background is greyed out? I did a blog about something similar a while ago using CSS https://world.episerver.com/blogs/scott-reed/dates/2018/3/making-drag-and-drop-pagesmedia-work-with-the-ilist/

Ha Bui
Ha Bui Jun 10, 2021 08:29 AM

Hi Scott, actually the default one CollectionEditor (epi-cms/contentediting/editors/CollectionEditor) did not support this.

Scott Reed
Scott Reed Jun 10, 2021 08:32 AM

Hmmmn, strange I know when I posted the blog and removed the CSS overlay I could drag and drop blocks/media and such in the PropertyList at least at the time of writing

Ha Bui
Ha Bui Jun 10, 2021 08:35 AM

Ah, it is different, my workaround is for change item sort order inside the list (using DnD instead of move up/down, very anoying when you have a long list)

And by the way, I'm talking about generic one (CollectionEditor) but not CommerceMediaCollectionEditor.

Scott Reed
Scott Reed Jun 10, 2021 09:41 AM

Yes I'm just referring to a PropertyList not anything commerce. Okay I see, sort order, I thought you meant drag and drop as in from other panes. My bad :p

Tomasz Madeyski
Tomasz Madeyski May 23, 2022 09:08 AM

Do you have a version working in a setup without Commerce? (in my solution epi-ecf-ui/contentediting/editors/_GridWithDropContainerMixin is missing)

Please login to comment.
Latest blogs
IDX21323 - RequireNonce is true, Nonce was null

We have multiple clients configured with Azure Active Directory (Microsoft Entra) for requiring authentication when accessing their website. The...

David Drouin-Prince | Oct 1, 2023 | Syndicated blog

Minimum Detectable Effect in Optimizely Web Experimentation

Understanding Minimum Detectable Effect Minimum Detectable Effect (MDE) is a core statistical calculation in Optimizely Web Experimentation. In...

Matthew Dunn | Oct 1, 2023 | Syndicated blog

Configured Commerce - Introduction to Long-Term Support (LTS) Releases

First off, for those who have not had a chance to meet me yet, my name is John McCarroll, and I am the Technical Product Manager for the Optimizely...

John McCarroll | Sep 29, 2023

Auto-translate with OpenAI in Optimizely CMS

You can now auto-translate content using your favorite online AI service, inside the old trustworthy Episerver.Labs.LanguageManager!

Tomas Hensrud Gulla | Sep 29, 2023 | Syndicated blog