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
How to Write an xUnit Test to Verify Unique Content Type Guids in Content Management

When developing an Optimizely CMS solution, it is important to ensure that each content type has a unique GUID. If two or more content types share...

Minesh Shah (Netcel) | Mar 27, 2023

Telemetry correlation for Scheduled Jobs in Optimizely

I previously demonstrated how to correlate telemetry to Azure Application Insights within a Hangfire job. But how about those jobs that are built a...

Stefan Holm Olsen | Mar 23, 2023 | Syndicated blog

Fixing Optimizely Content Syncing/Caching Issues on the DXP pre CMS.Core 12.13.0

Hi all, With our recent deployments to the DXP for .NET 6 projects (one a new build and one an upgrade) our clients had raised issues where there...

Scott Reed | Mar 23, 2023

Handle hostnames, schedule jobs and role access when synchronizing content

The Environment Synchronizer module helps you to set your environment into a known state after synchronizing databases between environments. In thi...

Ove Lartelius | Mar 23, 2023 | Syndicated blog