neo.mjs 8.13.0 → 8.14.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.13.0'
+         * @member {String} version='8.14.0'
          */
-        version: '8.13.0'
+        version: '8.14.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-30",
+      "datePublished": "2025-02-03",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.13.0'
+                html  : 'v8.14.0'
             }]
         }],
         /**

package/apps/realworld2/view/article/PreviewList.mjs

@@ -46,8 +46,8 @@ class PreviewList extends List {
 
         if (!silent) {
             me.promiseUpdate().then(() => {
-                me.fire('createItems');
-            });
+                me.fire('createItems')
+            })
         }
     }
 }

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.13.0'
+         * @member {String} version='8.14.0'
          */
-        version: '8.13.0'
+        version: '8.14.0'
     }
 
     /**

package/examples/grid/nestedRecordFields/Viewport.mjs

@@ -32,13 +32,19 @@ class Viewport extends BaseViewport {
             style    : {marginBottom: '1em'},
 
             items: ['->', {
+                handler: 'up.onSwitchDragModeButtonClick',
+                iconCls: 'far fa-square',
+                style  : {marginRight: '1em'},
+                text   : 'Drag column headers only'
+            }, {
                 handler: 'up.onSwitchThemeButtonClick',
                 iconCls: 'fas fa-sun',
                 text   : 'Light Theme'
             }]
         }, {
-            module: GridContainer,
-            bind  : {store : 'stores.mainStore'},
+            module   : GridContainer,
+            bind     : {store : 'stores.mainStore'},
+            reference: 'grid',
 
             columnDefaults: {
                 width: 200
@@ -108,10 +114,10 @@ class Viewport extends BaseViewport {
     /**
      * @param {Object} data
      */
-    editRenderer({column, gridContainer, index, record}) {
+    editRenderer({column, gridContainer, record, rowIndex}) {
         let me                  = this,
             {appName, windowId} = me,
-            widgetId            = `${column.id}-widget-${index}`,
+            widgetId            = `${column.id}-widget-${rowIndex}`,
             button              = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
                 module  : Button,
                 appName,
@@ -127,6 +133,23 @@ class Viewport extends BaseViewport {
         return button.createVdomReference()
     }
 
+    /**
+     * @param {Object} data
+     */
+    onSwitchDragModeButtonClick(data) {
+        let button     = data.component,
+            grid       = this.getReference('grid'),
+            {sortZone} = grid.headerToolbar;
+
+        if (button.iconCls === 'fas fa-check') {
+            button.set({iconCls: 'far fa-square'});
+            sortZone.moveColumnContent = true
+        } else {
+            button.set({iconCls: 'fas fa-check'});
+            sortZone.moveColumnContent = false
+        }
+    }
+
     /**
      * @param {Object} data
      */

package/examples/table/container/MainContainer.mjs

@@ -127,10 +127,10 @@ class MainContainer extends ConfigurationViewport {
                 {
                     dataField: 'edit',
                     text     : 'Edit Action',
-                    renderer({column, index}) {
+                    renderer({column, rowIndex}) {
                         const
                             me       = this,
-                            widgetId = `${column.id}-widget-${index}`,
+                            widgetId = `${column.id}-widget-${rowIndex}`,
                             button   = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
                                 module  : Button,
                                 appName : me.appName,
@@ -146,10 +146,10 @@ class MainContainer extends ConfigurationViewport {
                 }, {
                     dataField: 'menu',
                     text     : 'Menu',
-                    renderer({column, record, index}) {
+                    renderer({column, record, rowIndex}) {
                         const
                             me       = this,
-                            widgetId = `${column.id}-widget-${index}`,
+                            widgetId = `${column.id}-widget-${rowIndex}`,
                             button   = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create('Neo.button.Base', {
                                 ntype   : 'button',
                                 appName : me.appName,

package/examples/table/covid/Util.mjs

@@ -133,7 +133,7 @@ class Util extends Base {
         imageName = map[imageName] || imageName;
 
         if (Neo.config.isGitHubPages) {
-            let path = `../../../../resources/images/flaticon/country_flags/png/${imageName}.png`;
+            let path = `../../../../resources_pub/images/flaticon/country_flags/png/${imageName}.png`;
 
             if (Neo.config.environment !== 'development') {
                 path = `../../${path}`

package/examples/table/nestedRecordFields/Viewport.mjs

@@ -104,10 +104,10 @@ class Viewport extends BaseViewport {
     /**
      * @param {Object} data
      */
-    editRenderer({column, index, record, tableContainer}) {
+    editRenderer({column, record, rowIndex, tableContainer}) {
         let me                  = this,
             {appName, windowId} = me,
-            widgetId            = `${column.id}-widget-${index}`,
+            widgetId            = `${column.id}-widget-${rowIndex}`,
             button              = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
                 module  : Button,
                 appName,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.13.0",
+    "version": "8.14.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,7 +54,7 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.3.3",
+        "inquirer": "^12.4.1",
         "marked": "^15.0.6",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",

package/resources/scss/src/draggable/DragProxyComponent.scss

@@ -1,9 +1,11 @@
 body:has(.neo-is-dragging) {
-    cursor: move !important;
+    cursor     : move !important;
+    user-select: none !important;
 
     // We can not put pointer-events: none on the same level as cursor, since it prevents cursor changes
     * {
         pointer-events: none !important;
+        user-select   : none !important;
     }
 }
 
@@ -13,6 +15,7 @@ body:has(.neo-is-dragging) {
     transform          : none !important;
     transition-duration: 0ms;
     transition-property: none;
+    user-select        : none !important;
     will-change        : left, top;
     z-index            : 1000;
 

package/resources/scss/src/draggable/grid/header/toolbar/SortZone.scss

@@ -1,5 +1,22 @@
-.neo-grid-header-toolbar {
-    &.neo-dragproxy {
+.neo-grid-container {
+    &:has(.neo-is-dragging) {
+        .neo-grid-cell {
+            opacity   : .8;
+            transition: left 200ms ease-out;
+
+            &:last-child {
+                border-right-width : 1px;
+            }
+        }
+    }
+}
+
+.neo-dragproxy {
+    .neo-grid-container {
+        border: none;
+    }
+
+    .neo-grid-header-toolbar {
         height: 30px !important; // Hack to increase the height by the border-bottom height (29 + 1)
 
         .neo-button {
@@ -7,6 +24,12 @@
         }
     }
 
+    .neo-grid-row {
+        position: unset;
+    }
+}
+
+.neo-grid-header-toolbar {
     &.neo-is-dragging {
         .neo-button {
             border-right: 1px solid var(--grid-container-border-color); // Would be missing for the last button otherwise

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.13.0'
+     * @default '8.14.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.13.0'
+    version: '8.14.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/Neo.mjs

@@ -701,7 +701,7 @@ function autoGenerateGetSet(proto, key) {
                 // every set call has to delete the matching symbol
                 delete me[configSymbol][key];
 
-                if (key !== 'items') {
+                if (key !== 'items' && key !== 'vnode') {
                     value = Neo.clone(value, true, true)
                 }
 

package/src/calendar/view/YearComponent.mjs

@@ -509,7 +509,7 @@ class YearComponent extends Component {
                     vdom.cn[1].cn[0].cn[scrollFromTop ? 'unshift' : 'push'](vdom.cn[0]);
                     vdom.cn.splice(0, 1);
 
-                    me.promiseUpdate(vdom).then(() => {
+                    me.promiseUpdate().then(() => {
                         y = scrollFromTop ? -data.height : 0;
                         vdom.cn[0].cn[0].style.transform = `translateY(${y}px)`;
                         me.update();
@@ -779,7 +779,7 @@ class YearComponent extends Component {
 
             me.isUpdating = true;
 
-            me.promiseUpdate(me.vdom).then(() => {
+            me.promiseUpdate().then(() => {
                 me.isUpdating = false
             })
         }

package/src/calendar/view/month/Component.mjs

@@ -689,7 +689,7 @@ class Component extends BaseComponent {
                     week.header && container.cn.unshift(week.header)
                 }
 
-                me.promiseUpdate(me.vdom).then(() => {
+                me.promiseUpdate().then(() => {
                     Neo.main.DomAccess.scrollTo({
                         direction: 'top',
                         id       : me.vdom.cn[1].id,

package/src/calendar/view/week/EventDragZone.mjs

@@ -156,8 +156,10 @@ class EventDragZone extends DragZone {
 
     /**
      * @param {Object} data
+     * @param {Boolean} createComponent=true
+     * @returns {Object|Neo.draggable.DragProxyComponent}
      */
-    createDragProxy(data) {
+    async createDragProxy(data, createComponent=true) {
         let me        = this,
             component = Neo.getComponent(me.getDragElementRoot().id) || me.owner,
             vdom      = me.dragProxyConfig?.vdom,
@@ -199,7 +201,11 @@ class EventDragZone extends DragZone {
             width : `${data.width}px`
         });
 
-        me.dragProxy = Neo.create(config)
+        if (createComponent) {
+            return me.dragProxy = Neo.create(config)
+        }
+
+        return config
     }
 
     /**
@@ -491,35 +497,32 @@ class EventDragZone extends DragZone {
     /**
      * @param {Object} data
      */
-    dragStart(data) {
-        let me = this,
-            eventDuration, offsetX, offsetY;
-
-        me.owner.getDomRect([me.getDragElementRoot().id, data.path[1].id]).then(rects => {
-            eventDuration = (me.eventRecord.endDate - me.eventRecord.startDate) / 60 / 1000;
-            offsetX       = data.clientX - rects[0].left;
+    async dragStart(data) {
+        let me            = this,
+            rects         = await me.owner.getDomRect([me.getDragElementRoot().id, data.path[1].id]),
+            eventDuration = (me.eventRecord.endDate - me.eventRecord.startDate) / 60 / 1000,
+            offsetX       = data.clientX - rects[0].left,
             offsetY       = data.clientY - rects[0].top;
 
-            Object.assign(me, {
-                columnHeight   : rects[1].height,
-                columnTop      : rects[1].top,
-                dragElementRect: rects[0],
-                eventDuration  : Math.round(eventDuration / me.intervalSize) * me.intervalSize,
-                offsetX,
-                offsetY
-            });
-
-            me.createDragProxy(rects[0]);
-
-            me.fire('dragStart', {
-                dragElementRect: rects[0],
-                id             : me.id,
-                offsetX,
-                offsetY
-            });
-
-            me.dragMove(data)
-        })
+        Object.assign(me, {
+            columnHeight   : rects[1].height,
+            columnTop      : rects[1].top,
+            dragElementRect: rects[0],
+            eventDuration  : Math.round(eventDuration / me.intervalSize) * me.intervalSize,
+            offsetX,
+            offsetY
+        });
+
+        await me.createDragProxy(rects[0]);
+
+        me.fire('dragStart', {
+            dragElementRect: rects[0],
+            id             : me.id,
+            offsetX,
+            offsetY
+        });
+
+        me.dragMove(data)
     }
 
     /**

package/src/calendar/view/week/plugin/DragDrop.mjs

@@ -175,7 +175,7 @@ class DragDrop extends Base {
     /**
      * @param {Object} data
      */
-    onColumnDragStart(data) {
+    async onColumnDragStart(data) {
         let me = this;
 
         if (me.isActiveCalendar() && me.isTopLevelColumn(data.targetPath)) {
@@ -214,26 +214,26 @@ class DragDrop extends Base {
             me[newRecordSymbol] = record;
 
             // wait until the new event got mounted
-            me.timeout(50).then(() => {
-                eventId     = owner.getEventId(record.id);
-                dragElement = VDomUtil.find(owner.vdom, eventId).vdom;
-
-                eventDragZone = me.getEventDragZone({
-                    dragElement,
-                    enableResizingAcrossOppositeEdge: true,
-                    eventRecord                     : record,
-                    proxyParentId                   : data.path[0].id
-                });
-
-                owner.getPlugin(me.resizablePluginType).onDragStart(data);
-                eventDragZone.dragStart(data);
-
-                me.timeout(50).then(() => {
-                    me.isDragging && Neo.applyDeltas(me.appName, {
-                        id   : eventId,
-                        style: {opacity: 0}
-                    })
-                })
+            await me.timeout(50);
+
+            eventId     = owner.getEventId(record.id);
+            dragElement = VDomUtil.find(owner.vdom, eventId).vdom;
+
+            eventDragZone = me.getEventDragZone({
+                dragElement,
+                enableResizingAcrossOppositeEdge: true,
+                eventRecord                     : record,
+                proxyParentId                   : data.path[0].id
+            });
+
+            owner.getPlugin(me.resizablePluginType).onDragStart(data);
+            await eventDragZone.dragStart(data);
+
+            await me.timeout(50);
+
+            me.isDragging && Neo.applyDeltas(me.appName, {
+                id   : eventId,
+                style: {opacity: 0}
             })
         }
     }

package/src/component/Base.mjs

@@ -488,7 +488,7 @@ class Component extends Base {
      * @param {String} value
      */
     addCls(value) {
-        let cls = this.cls;
+        let {cls} = this;
 
         NeoArray.add(cls, value);
         this.cls = cls
@@ -526,6 +526,17 @@ class Component extends Base {
         return this.style = Object.assign(this.style, value)
     }
 
+    /**
+     * Add a new wrapperCls to the top level node
+     * @param {String} value
+     */
+    addWrapperCls(value) {
+        let {wrapperCls} = this;
+
+        NeoArray.add(wrapperCls, value);
+        this.wrapperCls = wrapperCls
+    }
+
     /**
      * Triggered after the appName config got changed
      * @param {String|null} value
@@ -560,11 +571,7 @@ class Component extends Base {
             vdom.cls = cls
         }
 
-        if (me.isVdomUpdating || me.silentVdomUpdate) {
-            me.needsVdomUpdate = true
-        } else if (me.mounted && me.vnode) {
-            me.updateCls(value, oldValue, vdomRoot.id)
-        }
+        me.update()
     }
 
     /**
@@ -1038,7 +1045,7 @@ class Component extends Base {
      * @protected
      */
     afterSetVdom(value, oldValue) {
-        this.updateVdom(value)
+        this.updateVdom()
     }
 
     /**
@@ -1098,9 +1105,9 @@ class Component extends Base {
         value    = value    || [];
 
         let me       = this,
-            vdom     = me.vdom,
+            {vdom}   = me,
             vdomRoot = me.getVdomRoot(),
-            cls      = me.vdom?.cls || [];
+            cls      = vdom.cls || [];
 
         if (vdom === vdomRoot) {
             // we need to merge changes
@@ -1114,9 +1121,7 @@ class Component extends Base {
             oldValue && NeoArray.remove(cls, oldValue);
             NeoArray.add(cls, value);
 
-            if (vdom) {
-                vdom.cls = cls
-            }
+            vdom.cls = cls
         }
 
         me.update()
@@ -1545,15 +1550,14 @@ class Component extends Base {
 
     /**
      * Internal method to send update requests to the vdom worker
-     * @param {Object} vdom
-     * @param {Neo.vdom.VNode} vnode
      * @param {function} [resolve] used by promiseUpdate()
      * @param {function} [reject] used by promiseUpdate()
      * @private
      */
-    #executeVdomUpdate(vdom, vnode, resolve, reject) {
-        let me   = this,
-            opts = {},
+    #executeVdomUpdate(resolve, reject) {
+        let me            = this,
+            {vdom, vnode} = me,
+            opts          = {},
             deltas;
 
         if (currentWorker.isSharedWorker) {
@@ -1576,8 +1580,6 @@ class Component extends Base {
 
         Neo.vdom.Helper.update(opts).catch(err => {
             me.isVdomUpdating = false;
-            console.log('Error attempting to update component dom', err, me);
-
             reject?.()
         }).then(data => {
             me.isVdomUpdating = false;
@@ -2197,8 +2199,6 @@ class Component extends Base {
             me._rendered = true; // silent update
             me.fire('rendered', me.id);
 
-            // console.log('rendered: ' + me.appName + ' ' + me.id, me);
-
             if (autoMount) {
                 me.mounted = true;
 
@@ -2212,13 +2212,11 @@ class Component extends Base {
 
     /**
      * Promise based vdom update
-     * @param {Object} vdom=this.vdom
-     * @param {Neo.vdom.VNode} vnode= this.vnode
      * @returns {Promise<any>}
      */
-    promiseUpdate(vdom=this.vdom, vnode=this.vnode) {
+    promiseUpdate() {
         return new Promise((resolve, reject) => {
-            this.updateVdom(vdom, vnode, resolve, reject)
+            this.updateVdom(resolve, reject)
         })
     }
 
@@ -2586,34 +2584,6 @@ class Component extends Base {
         this.afterSetVdom(this.vdom, null)
     }
 
-    /**
-     * Delta updates for the cls config. Gets called after the cls config gets changed in case the component is mounted.
-     * @param {String[]} cls
-     * @param {String[]} oldCls
-     * @param {String} id=this.id
-     * @protected
-     */
-    updateCls(cls, oldCls, id=this.id) {
-        let me          = this,
-            {vnode}     = me,
-            vnodeTarget = vnode && VNodeUtil.find(me.vnode, {id})?.vnode;
-
-        if (vnode && !Neo.isEqual(cls, oldCls)) {
-            if (vnodeTarget) {
-                vnodeTarget.className = cls; // keep the vnode in sync
-                me.vnode = vnode;
-            }
-
-            Neo.applyDeltas(me.appName, {
-                id,
-                cls: {
-                    add   : NeoArray.difference(cls, oldCls),
-                    remove: NeoArray.difference(oldCls, cls)
-                }
-            })
-        }
-    }
-
     /**
      * Creates the style deltas for newValue & oldValue and applies them directly to the DOM.
      * @param {Object|String} value
@@ -2668,15 +2638,13 @@ class Component extends Base {
 
     /**
      * Gets called after the vdom config gets changed in case the component is already mounted (delta updates).
-     * @param {Object} vdom=this.vdom
-     * @param {Neo.vdom.VNode} vnode=this.vnode
      * @param {function} [resolve] used by promiseUpdate()
      * @param {function} [reject] used by promiseUpdate()
      * @protected
      */
-    updateVdom(vdom=this.vdom, vnode=this.vnode, resolve, reject) {
-        let me                       = this,
-            {app, mounted, parentId} = me,
+    updateVdom(resolve, reject) {
+        let me                              = this,
+            {app, mounted, parentId, vnode} = me,
             listenerId;
 
         if (me.isVdomUpdating || me.silentVdomUpdate) {
@@ -2690,7 +2658,7 @@ class Component extends Base {
                     app.un('mounted', listenerId);
 
                     me.timeout(50).then(() => {
-                        me.vnode && me.updateVdom(me.vdom, me.vnode, resolve, reject)
+                        me.vnode && me.updateVdom(resolve, reject)
                     })
                 })
             } else {
@@ -2707,10 +2675,10 @@ class Component extends Base {
                     // Verify that the critical rendering path => CSS files for the new tree is in place
                     if (currentWorker.countLoadingThemeFiles !== 0) {
                         currentWorker.on('themeFilesLoaded', function() {
-                            me.updateVdom(vdom, vnode, resolve, reject)
+                            me.updateVdom(resolve, reject)
                         }, me, {once: true})
                     } else {
-                        me.#executeVdomUpdate(vdom, vnode, resolve, reject)
+                        me.#executeVdomUpdate(resolve, reject)
                     }
                 }
             }

package/src/component/DateSelector.mjs

@@ -547,7 +547,7 @@ class DateSelector extends Component {
                     vdom.cn[2].cn[0].cn[scrollFromTop ? 'unshift' : 'push'](vdom.cn[1]);
                     vdom.cn.splice(1, 1);
 
-                    me.promiseUpdate(vdom).then(() => {
+                    me.promiseUpdate().then(() => {
                         y = scrollFromTop ? -data.height : 0;
                         vdom.cn[1].cn[0].style.transform = `translateY(${y}px)`;
                         me.update();

package/src/component/Gallery.mjs

@@ -441,7 +441,7 @@ class Gallery extends Component {
             itemsRoot.cn.push(vdomItem)
         }
 
-        me.promiseUpdate(vdom).then(() => {
+        me.promiseUpdate().then(() => {
             me[itemsMounted] = true
         })
     }

package/src/component/Helix.mjs

@@ -597,7 +597,7 @@ class Helix extends Component {
 
             me[lockWheel] = true;
 
-            me.promiseUpdate(vdom).then(() => {
+            me.promiseUpdate().then(() => {
                 me[itemsMounted] = true;
                 me.fire('itemsMounted');
 

package/src/data/Model.mjs

@@ -50,14 +50,6 @@ class Model extends Base {
      */
     hasNestedFields = false
 
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-        RecordFactory.createRecordClass(this)
-    }
-
     /**
      Triggered after the fields config got changed
      * @param {Object[]|null} value

package/src/draggable/DragZone.mjs

@@ -184,9 +184,11 @@ class DragZone extends Base {
     }
 
     /**
-     * @param {Object} data
+     * @param {Object}  data
+     * @param {Boolean} createComponent=true
+     * @returns {Object|Neo.draggable.DragProxyComponent}
      */
-    createDragProxy(data) {
+    async createDragProxy(data, createComponent=true) {
         let me        = this,
             component = Neo.getComponent(me.getDragElementRoot().id) || me.owner,
             rect      = me.dragElementRect,
@@ -228,7 +230,11 @@ class DragZone extends Base {
             width : `${data.width}px`
         });
 
-        me.dragProxy = Neo.create(config)
+        if (createComponent) {
+            return me.dragProxy = Neo.create(config)
+        }
+
+        return config
     }
 
     /**
@@ -304,7 +310,7 @@ class DragZone extends Base {
     /**
      * @param {Object} data
      */
-    dragStart(data) {
+    async dragStart(data) {
         let me                         = this,
             {appName, owner, windowId} = me,
             {cls}                      = owner,
@@ -331,7 +337,7 @@ class DragZone extends Base {
             offsetY
         });
 
-        me.createDragProxy(rect);
+        await me.createDragProxy(rect);
 
         me.fire('dragStart', {
             clientX        : data.clientX,

package/src/draggable/grid/header/toolbar/SortZone.mjs

@@ -1,5 +1,6 @@
 import BaseSortZone from '../../../toolbar/SortZone.mjs';
 import NeoArray     from  '../../../../util/Array.mjs';
+import VdomUtil     from  '../../../../util/VDom.mjs';
 
 /**
  * @class Neo.draggable.grid.header.toolbar.SortZone
@@ -22,6 +23,10 @@ class SortZone extends BaseSortZone {
          * @protected
          */
         itemMargin: '1px',
+        /**
+         * @member {Boolean} moveColumnContent=true
+         */
+        moveColumnContent: true,
         /**
          * @member {Boolean} moveVertical=false
          */
@@ -37,6 +42,59 @@ class SortZone extends BaseSortZone {
         rect.y = rect.y - parentRect.y - 1
     }
 
+    /**
+     * @param {Object}  data
+     * @param {Boolean} createComponent=true
+     * @returns {Object|Neo.draggable.DragProxyComponent}
+     */
+    async createDragProxy(data, createComponent=true) {
+        if (!this.moveColumnContent) {
+            return await super.createDragProxy(data, createComponent)
+        }
+
+        let me          = this,
+            grid        = me.owner.parent,
+            {view}      = grid,
+            gridRows    = view.getVdomRoot().cn,
+            columnIndex = me.dragElement['aria-colindex'] - 1,
+            {dataField} = view.columnPositions[columnIndex],
+            cells       = view.getColumnCells(dataField),
+            rows        = [],
+            config      = await super.createDragProxy(data, false),
+            rect        = await grid.getDomRect(),
+            row;
+
+        config.cls = ['neo-grid-wrapper', me.owner.getTheme()];
+
+        config.style.height = rect.height + 'px';
+
+        cells.forEach((cell, index) => {
+            row = VdomUtil.clone({cls: gridRows[index].cls, cn: [cell]}); // clone to remove ids
+
+            row.style = {
+                height: view.rowHeight + 'px'
+            };
+
+            delete row.cn[0].style.left;
+
+            rows.push(row)
+        });
+
+        config.vdom =
+        {cn: [
+            {cls: ['neo-grid-container'], cn: [
+                {...config.vdom, cls: ['neo-grid-header-toolbar', 'neo-toolbar']},
+                {cls: ['neo-grid-view'], cn: rows}
+            ]}
+        ]};
+
+        if (createComponent) {
+            return me.dragProxy = Neo.create(config)
+        }
+
+        return config
+    }
+
     /**
      * @param {Number} fromIndex
      * @param {Number} toIndex
@@ -69,6 +127,59 @@ class SortZone extends BaseSortZone {
 
         owner.parent.view.createViewData()
     }
+
+    /**
+     * @param {Object} data
+     */
+    async onDragStart(data) {
+        await super.onDragStart(data);
+
+        if (this.moveColumnContent) {
+            let me          = this,
+                {view}      = me.owner.parent,
+                columnIndex = me.dragElement['aria-colindex'] - 1,
+                {dataField} = view.columnPositions[columnIndex],
+                cells       = view.getColumnCells(dataField);
+
+            cells.forEach(cell => {
+                cell.style.display = 'none'
+            });
+
+            view.update()
+        }
+    }
+
+    /**
+     * @param {Number} index1
+     * @param {Number} index2
+     */
+    switchItems(index1, index2) {
+        if (this.moveColumnContent) {
+            let {view}          = this.owner.parent,
+                columnPositions = view._columnPositions, // no clone
+                column1Cells    = view.getColumnCells(columnPositions[index1].dataField),
+                column2Cells    = view.getColumnCells(columnPositions[index2].dataField),
+                x;
+
+            x = columnPositions[index1].x;
+            columnPositions[index1].x = columnPositions[index2].x;
+            columnPositions[index2].x = x;
+
+            NeoArray.move(columnPositions, index1, index2);
+
+            column1Cells.forEach(node => {
+                node.style.left = columnPositions[index2].x + 'px'
+            });
+
+            column2Cells.forEach(node => {
+                node.style.left = columnPositions[index1].x + 'px'
+            });
+
+            view.update()
+        }
+
+        super.switchItems(index1, index2);
+    }
 }
 
 export default Neo.setupClass(SortZone);

package/src/draggable/list/DragZone.mjs

@@ -114,12 +114,12 @@ class DragZone extends BaseDragZone {
     /**
      * @param {Object} data
      */
-    onDragStart(data) {
+    async onDragStart(data) {
         let me = this;
 
         if (me.owner.draggable) {
             me.dragElement = VDomUtil.find(me.owner.vdom, data.path[0].id).vdom;
-            me.dragStart(data)
+            await me.dragStart(data)
         }
     }
 

package/src/draggable/tab/header/toolbar/SortZone.mjs

@@ -53,7 +53,7 @@ class SortZone extends BaseSortZone {
     /**
      * @param {Object} data
      */
-    onDragStart(data) {
+    async onDragStart(data) {
         let me      = this,
             {owner} = me,
             cls     = owner.cls || [];
@@ -61,7 +61,7 @@ class SortZone extends BaseSortZone {
         NeoArray.add(cls, 'neo-no-animation');
         owner.cls = cls;
 
-        super.onDragStart(data)
+        await super.onDragStart(data)
     }
 }
 

package/src/draggable/toolbar/DragZone.mjs

@@ -52,7 +52,7 @@ class DragZone extends BaseDragZone {
         owner.items.forEach(item => {
             wrapperCls = item.wrapperCls || [];
 
-            NeoArray[draggable ? 'add' : 'remove'](wrapperCls, 'neo-draggable');
+            NeoArray.toggle(wrapperCls, 'neo-draggable', draggable);
             item.wrapperCls = wrapperCls
         })
     }
@@ -88,12 +88,12 @@ class DragZone extends BaseDragZone {
     /**
      * @param {Object} data
      */
-    onDragStart(data) {
+    async onDragStart(data) {
         let me = this;
 
         if (me.owner.draggable) {
             me.dragElement = VDomUtil.find(me.owner.vdom, data.path[0].id).vdom;
-            me.dragStart(data)
+            await me.dragStart(data)
         }
     }
 

package/src/draggable/toolbar/SortZone.mjs

@@ -178,7 +178,7 @@ class SortZone extends DragZone {
     /**
      * @param {Object} data
      */
-    onDragStart(data) {
+    async onDragStart(data) {
         let me         = this,
             button     = Neo.getComponent(data.path[0].id),
             {owner}    = me,
@@ -202,7 +202,7 @@ class SortZone extends DragZone {
                 startIndex             : index
             });
 
-            me.dragStart(data); // we do not want to trigger the super class call here
+            await me.dragStart(data); // we do not want to trigger the super class call here
 
             owner.items.forEach((item, index) => {
                 indexMap[index] = index;

package/src/draggable/tree/DragZone.mjs

@@ -81,7 +81,7 @@ class DragZone extends BaseDragZone {
     /**
      * @param {Object} data
      */
-    onDragStart(data) {
+    async onDragStart(data) {
         let me = this;
 
         if (me.owner.draggable) {
@@ -91,7 +91,7 @@ class DragZone extends BaseDragZone {
                 cn : [VDomUtil.find(me.owner.vdom, data.path[0].id).vdom]
             };
 
-            me.dragStart(data)
+            await me.dragStart(data)
         }
     }
 }

package/src/grid/Container.mjs

@@ -70,11 +70,6 @@ class GridContainer extends BaseContainer {
          * @member {Number} rowHeight_=32
          */
         rowHeight_: 32,
-        /**
-         * @member {String|null} scrollbarId_=null
-         * @protected
-         */
-        scrollbarId_: null,
         /**
          * @member {Boolean} showHeaderFilters_=false
          */
@@ -125,14 +120,6 @@ class GridContainer extends BaseContainer {
         return Neo.getComponent(this.headerToolbarId) || Neo.get(this.headerToolbarId)
     }
 
-    /**
-     * Convenience method to access the Neo.grid.Scrollbar
-     * @returns {Neo.grid.Scrollbar|null}
-     */
-    get scrollbar() {
-        return Neo.getComponent(this.scrollbarId) || Neo.get(this.scrollbarId)
-    }
-
     /**
      * Convenience method to access the Neo.grid.View
      * @returns {Neo.grid.View|null}
@@ -151,20 +138,17 @@ class GridContainer extends BaseContainer {
             {rowHeight, store} = me;
 
         me.headerToolbarId = Neo.getId('grid-header-toolbar');
-        me.scrollbarId     = Neo.getId('grid-scrollbar');
         me.viewId          = Neo.getId('grid-view');
 
         me.items = [{
             module           : header.Toolbar,
-            gridContainer    : me,
             id               : me.headerToolbarId,
             showHeaderFilters: me.showHeaderFilters,
             sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
-            module     : GridView,
-            containerId: me.id,
-            id         : me.viewId,
+            module: GridView,
+            id    : me.viewId,
             rowHeight,
             store,
             ...me.viewConfig

package/src/grid/View.mjs

@@ -57,11 +57,6 @@ class GridView extends Component {
          * @member {String} colspanField='colspan'
          */
         colspanField: 'colspan',
-        /**
-         * @member {String|null} containerId=null
-         * @protected
-         */
-        containerId: null,
         /**
          * Internal flag. Gets calculated after mounting grid.View rows
          * @member {Number} containerWidth_=0
@@ -139,13 +134,6 @@ class GridView extends Component {
      */
     scrollTimeoutId = null
 
-    /**
-     * @member {Neo.grid.Container|null} gridContainer
-     */
-    get gridContainer() {
-        return Neo.getComponent(this.containerId)
-    }
-
     /**
      * @member {String[]} selectedRows
      */
@@ -496,11 +484,12 @@ class GridView extends Component {
             rowIndex = this.store.indexOf(record)
         }
 
-        let me       = this,
-            {bufferColumnRange, gridContainer, selectedRows, visibleColumns} = me,
-            columns  = gridContainer.items[0].items,
-            id       = me.getRowId(record, rowIndex),
-            trCls    = me.getTrClass(record, rowIndex),
+        let me            = this,
+            {bufferColumnRange, selectedRows, visibleColumns} = me,
+            gridContainer = me.parent,
+            columns       = gridContainer.headerToolbar.items,
+            id            = me.getRowId(record, rowIndex),
+            trCls         = me.getTrClass(record, rowIndex),
             config, column, endIndex, gridRow, i, startIndex;
 
         if (rowIndex % 2 !== 0) {
@@ -602,7 +591,7 @@ class GridView extends Component {
             dataField = me.getCellDataField(id),
             record    = me.getRecord(id);
 
-        me.gridContainer.fire(eventName, {data, dataField, record, view: me})
+        me.parent.fire(eventName, {data, dataField, record, view: me})
     }
 
     /**
@@ -614,7 +603,7 @@ class GridView extends Component {
             id     = data.currentTarget,
             record = me.getRecord(id);
 
-        me.gridContainer.fire(eventName, {data, record, view: me})
+        me.parent.fire(eventName, {data, record, view: me})
     }
 
     /**
@@ -641,10 +630,9 @@ class GridView extends Component {
      * @returns {Object|Number|null}
      */
     getColumn(field, returnIndex=false) {
-        let {gridContainer} = this,
-            columns         = gridContainer.headerToolbar.items,
-            i               = 0,
-            len             = columns.length,
+        let columns = this.parent.headerToolbar.items,
+            i       = 0,
+            len     = columns.length,
             column;
 
         for (; i < len; i++) {
@@ -658,6 +646,35 @@ class GridView extends Component {
         return null
     }
 
+    /**
+     * Get all painted column cells (visible + buffer range)
+     * @param {String} dataField
+     * @returns {Object[]}
+     */
+    getColumnCells(dataField) {
+        let me       = this,
+            cells    = [],
+            vdomRoot = me.getVdomRoot(),
+            firstRow = vdomRoot.cn[0],
+            i        = 0,
+            len      = firstRow.cn.length,
+            columnIndex;
+
+        // Columns might get moved via drag&drop, so let's check for the current match
+        for (; i < len; i++) {
+            if (dataField === me.getDataField(firstRow.cn[i].id)) {
+                columnIndex = i;
+                break;
+            }
+        }
+
+        vdomRoot.cn.forEach(row => {
+            cells.push(row.cn[columnIndex])
+        });
+
+        return cells
+    }
+
     /**
      * @param {String} cellId
      * @returns {String}
@@ -819,7 +836,7 @@ class GridView extends Component {
         let me                     = this,
             fieldNames             = fields.map(field => field.name),
             needsUpdate            = false,
-            {gridContainer}        = me,
+            gridContainer          = me.parent,
             rowIndex               = me.store.indexOf(record),
             {selectionModel, vdom} = me,
             cellId, cellNode, cellStyle, cellVdom, column, columnIndex;

package/src/grid/header/Toolbar.mjs

@@ -1,5 +1,4 @@
 import BaseToolbar from '../../toolbar/Base.mjs';
-import NeoArray    from '../../util/Array.mjs';
 
 /**
  * @class Neo.grid.header.Toolbar
@@ -25,10 +24,6 @@ class Toolbar extends BaseToolbar {
          * @member {Boolean} draggable_=true
          */
         draggable_: true,
-        /**
-         * @member {Neo.grid.Container|null} gridContainer=null
-         */
-        gridContainer: null,
         /**
          * @member {Object} itemDefaults={ntype: 'grid-header-button'}
          */
@@ -188,9 +183,10 @@ class Toolbar extends BaseToolbar {
      */
     async passSizeToView(silent=false) {
         let me              = this,
-            rects           = await me.getDomRect(me.items.map(item => item.id)),
+            {items}         = me,
+            rects           = await me.getDomRect(items.map(item => item.id)),
             lastItem        = rects[rects.length - 1],
-            columnPositions = rects.map(item => ({width: item.width, x: item.x - rects[0].x})),
+            columnPositions = rects.map((item, index) => ({dataField: items[index].dataField, width: item.width, x: item.x - rects[0].x})),
             i               = 1,
             len             = columnPositions.length,
             layoutFinished  = true;
@@ -208,7 +204,7 @@ class Toolbar extends BaseToolbar {
             await me.timeout(100);
             await me.passSizeToView(silent)
         } else {
-            me.gridContainer.view[silent ? 'setSilent' : 'set']({
+            me.parent.view[silent ? 'setSilent' : 'set']({
                 availableWidth: lastItem.x + lastItem.width - rects[0].x,
                 columnPositions
             })

package/src/selection/grid/RowModel.mjs

@@ -29,7 +29,7 @@ class RowModel extends BaseModel {
     addDomListener() {
         let me = this;
 
-        me.view.gridContainer.on('rowClick', me.onRowClick, me)
+        me.view.parent.on('rowClick', me.onRowClick, me)
     }
 
     /**
@@ -38,7 +38,7 @@ class RowModel extends BaseModel {
     destroy(...args) {
         let me = this;
 
-        me.view.gridContainer.un('rowClick', me.onRowClick, me);
+        me.view.parent.un('rowClick', me.onRowClick, me);
 
         super.destroy(...args)
     }