neo.mjs 8.4.1 → 8.5.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-14",
+      "datePublished": "2025-01-16",
       "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.4.1'
+                html  : 'v8.5.0'
             }]
         }],
         /**

package/apps/portal/view/learn/ContentComponent.mjs

@@ -84,18 +84,6 @@ class ContentComponent extends Component {
 
         if (value) {
             me.timeout(50).then(() => {
-                me.customComponents.forEach(component => {
-                    if (!component.mounted && !component.rendering) {
-                        component.render(true)
-                    }
-                });
-
-                me.livePreviews.forEach(livePreview => {
-                    if (!livePreview.mounted && !livePreview.rendering) {
-                        livePreview.render(true)
-                    }
-                });
-
                 Neo.main.addon.IntersectionObserver.register({
                     callback: 'findTopmostItem',
                     id      : me.id,
@@ -110,7 +98,7 @@ class ContentComponent extends Component {
 
             me.livePreviews.forEach(livePreview => {
                 livePreview.mounted = false
-            });
+            })
         }
     }
 

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/MainContainer.mjs

@@ -49,12 +49,19 @@ class MainContainer extends Viewport {
                 value     : '50',
                 width     : 200
             }, {
-                labelText : 'Buffer Row Range',
-                labelWidth: 140,
+                labelText : 'Buffer Rows',
+                labelWidth: 95,
                 listeners : {change: 'up.ontBufferRowRangeChange'},
                 store     : ['0', '3', '5', '10', '25', '50'],
                 value     : '5',
-                width     : 200
+                width     : 160
+            }, {
+                labelText : 'Buffer Columns',
+                labelWidth: 120,
+                listeners : {change: 'up.ontBufferColumnRangeChange'},
+                store     : ['0', '3', '5', '10', '20'],
+                value     : '0',
+                width     : 185
             }]
         }, {
             module    : GridContainer,
@@ -73,12 +80,16 @@ class MainContainer extends Viewport {
         style: {padding: '20px'}
     }
 
+    get grid() {
+        return this.getItem('grid')
+    }
+
     /**
      * @param {Object} data
      */
     onAmountColumnsChange(data) {
         if (data.oldValue) {
-            this.getItem('grid').amountColumns = parseInt(data.value.id)
+            this.grid.amountColumns = parseInt(data.value.id)
         }
     }
 
@@ -87,7 +98,16 @@ class MainContainer extends Viewport {
      */
     onAmountRowsChange(data) {
         if (data.oldValue) {
-            this.getItem('grid').store.amountRows = parseInt(data.value.id)
+            this.grid.store.amountRows = parseInt(data.value.id)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    ontBufferColumnRangeChange(data) {
+        if (data.oldValue) {
+            this.grid.view.bufferColumnRange = parseInt(data.value.id)
         }
     }
 
@@ -96,7 +116,7 @@ class MainContainer extends Viewport {
      */
     ontBufferRowRangeChange(data) {
         if (data.oldValue) {
-            this.getItem('grid').view.bufferRowRange = parseInt(data.value.id)
+            this.grid.view.bufferRowRange = parseInt(data.value.id)
         }
     }
 }

package/examples/grid/bigData/MainStore.mjs

@@ -27,67 +27,21 @@ class MainStore extends Store {
     }
 
     firstnames = [
-        'Ashley',
-        'Barbara',
-        'Betty',
-        'Chris',
-        'David',
-        'Elizabeth',
-        'Jack',
-        'James',
-        'Jennifer',
-        'Jessica',
-        'Joe',
-        'John',
-        'Karen',
-        'Kelly',
-        'Kim',
-        'Linda',
-        'Lisa',
-        'Mary',
-        'Max',
-        'Michael',
-        'Nancy',
-        'Patricia',
-        'Rich',
-        'Robert',
-        'Sam',
-        'Sandra',
-        'Sarah',
-        'Susan',
-        'Thomas',
-        'Tobias'
+        'Amanda', 'Andrew', 'Anthony', 'Ashley', 'Barbara', 'Betty', 'Brian', 'Carol', 'Charles', 'Christopher',
+        'Daniel', 'David', 'Deborah', 'Donna', 'Elizabeth', 'Emily', 'George', 'Jack', 'James', 'Jennifer',
+        'Jessica', 'Joe', 'John', 'Joseph', 'Joshua', 'Karen', 'Kenneth', 'Kelly', 'Kevin', 'Kimberly',
+        'Linda', 'Lisa', 'Margaret', 'Mark', 'Mary', 'Matthew', 'Max', 'Melissa', 'Michael', 'Michelle',
+        'Nancy', 'Patricia', 'Paul', 'Richard', 'Robert', 'Ronald', 'Sam', 'Sandra', 'Sarah', 'Stephanie',
+        'Steven', 'Susan', 'Thomas', 'Timothy', 'Tobias', 'William'
     ]
 
     lastnames = [
-        'Anderson',
-        'Brown',
-        'Davis',
-        'Garcia',
-        'Gonzales',
-        'Harris',
-        'Hernandez',
-        'Jackson',
-        'Johnson',
-        'Jones',
-        'Lee',
-        'Lopez',
-        'Martin',
-        'Martinez',
-        'Miller',
-        'Moore',
-        'Perez',
-        'Rahder',
-        'Rodriguez',
-        'Smith',
-        'Taylor',
-        'Thomas',
-        'Thompson',
-        'Uhlig',
-        'Waters',
-        'White',
-        'Williams',
-        'Wilson'
+        'Adams', 'Allen', 'Anderson', 'Baker', 'Brown', 'Campbell', 'Carter', 'Clark', 'Davis', 'Flores',
+        'Garcia', 'Gonzales', 'Green', 'Hall', 'Harris', 'Hernandez', 'Hill', 'Jackson', 'Johnson', 'Jones',
+        'King', 'Lee', 'Lewis', 'Lopez', 'Martin', 'Martinez', 'Miller', 'Mitchell', 'Moore', 'Nelson',
+        'Nguyen', 'Perez', 'Rahder', 'Ramirez', 'Roberts', 'Rivera', 'Robinson', 'Rodriguez', 'Sanchez', 'Scott',
+        'Smith', 'Taylor', 'Thomas', 'Thompson', 'Torres', 'Uhlig', 'Walker', 'Waters', 'White', 'Williams',
+        'Wilson', 'Wright', 'Young'
     ]
 
     /**

package/examples/grid/cellEditing/MainContainer.mjs

@@ -106,12 +106,11 @@ class MainContainer extends ConfigurationViewport {
      */
     createExampleComponent() {
         return {
-            module        : GridContainer,
-            bind          : {store : 'stores.mainStore'},
-            cellEditing   : true,
-            parentId      : this.id,
-            selectionModel: CellModel,
-            store         : MainStore,
+            module     : GridContainer,
+            bind       : {store: 'stores.mainStore'},
+            cellEditing: true,
+            parentId   : this.id,
+            store      : MainStore,
 
             columnDefaults: {
                 editable: true,
@@ -159,7 +158,11 @@ class MainContainer extends ConfigurationViewport {
                 dataField: 'githubId',
                 editable : false,
                 text     : 'Github Id (Non-editable)'
-            }]
+            }],
+
+            viewConfig: {
+                selectionModel: CellModel
+            }
         }
     }
 

package/examples/grid/container/MainContainer.mjs

@@ -25,7 +25,8 @@ class MainContainer extends ConfigurationViewport {
     }
 
     createConfigurationComponents() {
-        let me = this;
+        let me     = this,
+            {view} = me.exampleComponent;
 
         const selectionModelRadioDefaults = {
             module        : Radio,
@@ -45,34 +46,34 @@ class MainContainer extends ConfigurationViewport {
             value    : me.exampleComponent.height
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-cellmodel',
             labelText     : 'selectionModel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
             style         : {marginTop: '10px'},
             valueLabelText: 'Cell'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-columnmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-columnmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', ColumnModel)},
             valueLabelText: 'Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-rowmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-rowmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', RowModel)},
             valueLabelText: 'Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellcolumnmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-cellcolumnmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
             valueLabelText: 'Cell & Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellrowmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-cellrowmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
             valueLabelText: 'Cell & Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
             valueLabelText: 'Cell & Column & Row'
         }]
@@ -80,9 +81,8 @@ class MainContainer extends ConfigurationViewport {
 
     createExampleComponent() {
         return {
-            module        : GridContainer,
-            selectionModel: CellModel,
-            store         : MainStore,
+            module: GridContainer,
+            store : MainStore,
 
             columnDefaults: {
                 width: 200
@@ -93,7 +93,22 @@ class MainContainer extends ConfigurationViewport {
                 {dataField: 'lastname',  text: 'Lastname'},
                 {dataField: 'githubId',  text: 'Github Id'},
                 {dataField: 'country',   text: 'Country'}
-            ]
+            ],
+
+            viewConfig: {
+                selectionModel: CellModel
+            }
+        }
+    }
+
+    /**
+     * @param {String} config
+     * @param {String} value
+     * @param {Object} opts
+     */
+    onRadioChange(config, value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            this.exampleComponent.view[config] = value
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.4.1",
+    "version": "8.5.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,7 +52,7 @@
         "commander": "^13.0.0",
         "cssnano": "^7.0.6",
         "envinfo": "^7.14.0",
-        "fs-extra": "^11.2.0",
+        "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
         "inquirer": "^12.3.2",
         "marked": "^15.0.6",

package/resources/data/deck/learnneo/pages/tutorials/TodoList.md

@@ -91,7 +91,7 @@ class MainComponent extends Component {
         let me     = this,
             cls    = ['far', 'fa-square'],
             oldCls = ['fa',  'fa-check'],
-            node   = VdomUtil.findVdomChild(me.vdom, data.path[0].id).vdom;
+            node   = VdomUtil.find(me.vdom, data.path[0].id).vdom;
 
         if (data.path[0].cls.includes('fa-square')) {
             cls    = ['fa',  'fa-check'];

package/resources/data/deck/training/pages/2023-02-05T17-44-53-815Z.md

@@ -77,7 +77,7 @@ Use the utility method, replacing the statement referencing the vdom hierarchy.
 
 <pre>
     <s>view.vdom.cn[0].innerHTML = business.title;</s>
-    Neo.util.VDom.findVdomChild(view.vdom, 'title').vdom.innerHTML = business.title;
+    Neo.util.VDom.find(view.vdom, 'title').vdom.innerHTML = business.title;
 </pre>
 
 
@@ -86,17 +86,17 @@ calling the function.
 
 Code a new class member.
 
-    findVdomChild = Neo.util.VDom.findVdomChild
+    find = Neo.util.VDom.find
 
 Then use it in the after set method. Here's how that part of the code will look afterwards.
 
 <pre style="color:gray; padding: 8px; border: thin solid lightgray;">
-findVdomChild = Neo.util.VDom.findVdomChild;
+find = Neo.util.VDom.find;
 
 afterSetBusiness(business){
     if (!business) return;
     const view = this.getReference('view');
-    this.findVdomChild(view.vdom, 'title').vdom.innerHTML = business.title;
+    this.find(view.vdom, 'title').vdom.innerHTML = business.title;
     view.update();
 }
 </pre>
@@ -129,7 +129,7 @@ Then back in the details view, update the vdom as follows.
 
 Then modify the `afterSetBusiness()` method to update the element's `src`.
 
-    this.findVdomChild(view.vdom, 'thumbnail').vdom.src = business.imageUrl;
+    this.find(view.vdom, 'thumbnail').vdom.src = business.imageUrl;
 
 ??Add the address
 
@@ -184,7 +184,7 @@ of thought and try it. If you get stuck, that code is given in the next lab step
 
 Here's one way to code it. How does this compare to your solution?
 
-    this.findVdomChild(view.vdom, 'address').vdom.cn = business
+    this.find(view.vdom, 'address').vdom.cn = business
         .address
         .map(item => ({tag: 'div', innerHTML: item}));
 

package/resources/scss/src/apps/portal/examples/TabContainer.scss

@@ -1,5 +1,9 @@
 .portal-examples-tab-container.neo-tab-container {
-
+    .neo-tab-strip {
+        .neo-active-tab-indicator {
+            background-color: #3E63DD;
+        }
+    }
 }
 
 // must not be inside the root class to honor the styling for tab button drag&drop

package/resources/scss/src/grid/View.scss

@@ -5,6 +5,10 @@
     overflow-y     : auto;
     position       : relative;
 
+    &:focus {
+        outline: none;
+    }
+
     .neo-grid-scrollbar {
         height        : 1px;
         position      : absolute;

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -402,9 +402,12 @@ class Component extends Base {
     }
 
     /**
-     * @member {String[]} childUpdateCache=[]
+     * If an update() gets called while a parent is updating, we store the id & distance of the
+     * requesting component inside the childUpdateCache of the parent, to get resolved once the update is done.
+     * e.g. childUpdateCache = {'neo-grid-view-1': {distance: 1, resolve: fn}}
+     * @member {Object} childUpdateCache={}
      */
-    childUpdateCache = []
+    childUpdateCache = {}
     /**
      * Stores the updateDepth while an update is running to enable checks for parent update collisions
      * @member {Number|null} currentUpdateDepth=null
@@ -1954,7 +1957,7 @@ class Component extends Base {
                             console.warn('vdom parent update conflict with:', parent, 'for:', me)
                         }
 
-                        NeoArray.add(parent.childUpdateCache, me.id);
+                        parent.childUpdateCache[me.id] = {distance, resolve};
 
                         // Adding the resolve fn to its own cache, since the parent will trigger
                         // a new update() directly on this cmp
@@ -2335,22 +2338,46 @@ class Component extends Base {
      * @protected
      */
     resolveVdomUpdate(resolve) {
-        let me = this;
+        let me                  = this,
+            hasChildUpdateCache = !Neo.isEmpty(me.childUpdateCache),
+            component;
 
         me.doResolveUpdateCache();
 
         resolve?.();
 
         if (me.needsVdomUpdate) {
-            // if a new update is scheduled, we can clear the cache => these updates are included
-            me.childUpdateCache = [];
+            if (hasChildUpdateCache) {
+                Object.entries(me.childUpdateCache).forEach(([key, value]) => {
+                    component = Neo.getComponent(key);
+
+                    // The component might already got destroyed
+                    if (component) {
+                        // Pass callbacks to the resolver cache => getting executed once the following update is done
+                        value.resolve && NeoArray.add(me.resolveUpdateCache, value.resolve);
+
+                        // Adjust the updateDepth to include the depth of all merged child updates
+                        if (me.updateDepth !== -1) {
+                            if (component.updateDepth === -1) {
+                                me.updateDepth = -1
+                            } else {
+                                // Since updateDepth is 1-based, we need to subtract 1 level
+                                me.updateDepth = me.updateDepth + value.distance + component.updateDepth - 1
+                            }
+                        }
+                    }
+                });
+
+                me.childUpdateCache = {}
+            }
 
             me.update()
-        } else if (me.childUpdateCache) {
-            [...me.childUpdateCache].forEach(id => {
-                Neo.getComponent(id)?.update();
-                NeoArray.remove(me.childUpdateCache, id)
-            })
+        } else if (hasChildUpdateCache) {
+            Object.keys(me.childUpdateCache).forEach(key => {
+                Neo.getComponent(key)?.update()
+            });
+
+            me.childUpdateCache = {}
         }
     }
 

package/src/grid/Container.mjs

@@ -1,7 +1,6 @@
 import BaseContainer   from '../container/Base.mjs';
 import ClassSystemUtil from '../util/ClassSystem.mjs';
 import GridView        from './View.mjs';
-import RowModel        from '../selection/grid/RowModel.mjs';
 import Store           from '../data/Store.mjs';
 import * as header     from './header/_export.mjs';
 
@@ -58,11 +57,6 @@ class GridContainer extends BaseContainer {
          * @member {String|null} headerToolbarId_=null
          */
         headerToolbarId_: null,
-        /**
-         * Additional used keys for the selection model
-         * @member {Object} keys
-         */
-        keys: {},
         /**
          * @member {String} layout='base'
          */
@@ -81,10 +75,6 @@ class GridContainer extends BaseContainer {
          * @protected
          */
         scrollbarId_: null,
-        /**
-         * @member {Neo.selection.Model} selectionModel_=null
-         */
-        selectionModel_: null,
         /**
          * @member {Boolean} showHeaderFilters_=false
          */
@@ -294,16 +284,6 @@ class GridContainer extends BaseContainer {
         }
     }
 
-    /**
-     * Triggered after the selectionModel config got changed
-     * @param {Neo.selection.Model} value
-     * @param {Neo.selection.Model} oldValue
-     * @protected
-     */
-    afterSetSelectionModel(value, oldValue) {
-        this.rendered && value.register(this)
-    }
-
     /**
      * Triggered after the showHeaderFilters config got changed
      * @param {Boolean} value
@@ -352,18 +332,6 @@ class GridContainer extends BaseContainer {
         return value || oldValue
     }
 
-    /**
-     * Triggered before the selectionModel config gets changed.
-     * @param {Neo.selection.Model} value
-     * @param {Neo.selection.Model} oldValue
-     * @protected
-     */
-    beforeSetSelectionModel(value, oldValue) {
-        oldValue?.destroy();
-
-        return ClassSystemUtil.beforeSetInstance(value, RowModel)
-    }
-
     /**
      * Triggered before the store config gets changed.
      * @param {Neo.data.Store} value
@@ -534,14 +502,6 @@ class GridContainer extends BaseContainer {
         return `${this.id}__wrapper`
     }
 
-    /**
-     *
-     */
-    onConstructed() {
-        super.onConstructed();
-        this.selectionModel?.register(this)
-    }
-
     /**
      * @param {Object} data
      */
@@ -608,12 +568,6 @@ class GridContainer extends BaseContainer {
             if (me.store.sorters.length < 1) {
                 me.removeSortingCss()
             }
-        } else {
-            me.on('rendered', () => {
-                me.timeout(50).then(() => {
-                    me.createViewData(data)
-                })
-            }, me, {once: true})
         }
     }
 

package/src/grid/View.mjs

@@ -1,6 +1,8 @@
-import Component from '../component/Base.mjs';
-import NeoArray  from '../util/Array.mjs';
-import VDomUtil  from '../util/VDom.mjs';
+import ClassSystemUtil from '../util/ClassSystem.mjs';
+import Component       from '../component/Base.mjs';
+import NeoArray        from '../util/Array.mjs';
+import RowModel        from '../selection/grid/RowModel.mjs';
+import VDomUtil        from '../util/VDom.mjs';
 
 /**
  * @class Neo.grid.View
@@ -38,6 +40,12 @@ class GridView extends Component {
          * @protected
          */
         baseCls: ['neo-grid-view'],
+        /**
+         * The amount of columns (cells) to paint before the first & after the last visible column,
+         * to enhance the scrolling performance
+         * @member {Number} bufferColumnRange_=0
+         */
+        bufferColumnRange_: 0,
         /**
          * The amount of rows to paint before the first & after the last visible row,
          * to enhance the scrolling performance
@@ -54,6 +62,11 @@ class GridView extends Component {
          * @protected
          */
         containerId: null,
+        /**
+         * Internal flag. Gets calculated after mounting grid.View rows
+         * @member {Number} containerWidth_=0
+         */
+        containerWidth_: 0,
         /**
          * @member {Object[]} columnPositions_=[]
          * @protected
@@ -64,9 +77,10 @@ class GridView extends Component {
          */
         isScrolling_: false,
         /**
-         * @member {Object} recordVnodeMap={}
+         * Additional used keys for the selection model
+         * @member {Object} keys
          */
-        recordVnodeMap: {},
+        keys: {},
         /**
          * @member {String} role='rowgroup'
          */
@@ -80,6 +94,10 @@ class GridView extends Component {
          * @member {Object} scrollPosition_={x:0,y:0}
          */
         scrollPosition_: {x: 0, y: 0},
+        /**
+         * @member {Neo.selection.Model} selectionModel_=null
+         */
+        selectionModel_: null,
         /**
          * @member {String} selectedRecordField='annotations.selected'
          */
@@ -92,13 +110,9 @@ class GridView extends Component {
          * @member {Neo.data.Store|null} store_=null
          */
         store_: null,
-        /**
-         * @member {Boolean} useRowRecordIds=true
-         */
-        useRowRecordIds: true,
         /**
          * Stores the indexes of the first & last painted columns
-         * @member {Array} visibleColumns_=[0,0]
+         * @member {Number[]} visibleColumns_=[0,0]
          * @protected
          */
         visibleColumns_: [0, 0],
@@ -110,7 +124,7 @@ class GridView extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-        {cn: [
+        {tabIndex: '-1', cn: [
             {cn: []},
             {cls: 'neo-grid-scrollbar'}
         ]}
@@ -132,10 +146,10 @@ class GridView extends Component {
      * @member {String[]} selectedRows
      */
     get selectedRows() {
-        let {gridContainer} = this;
+        let {selectionModel} = this;
 
-        if (gridContainer.selectionModel.ntype === 'selection-grid-rowmodel') {
-            return gridContainer.selectionModel.items
+        if (selectionModel.ntype === 'selection-grid-rowmodel') {
+            return selectionModel.items
         }
 
         return []
@@ -205,6 +219,16 @@ class GridView extends Component {
         }
     }
 
+    /**
+     * Triggered after the bufferColumnRange config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetBufferColumnRange(value, oldValue) {
+        oldValue !== undefined && this.createViewData()
+    }
+
     /**
      * Triggered after the bufferRowRange config got changed
      * @param {Number} value
@@ -215,6 +239,18 @@ class GridView extends Component {
         oldValue !== undefined && this.createViewData()
     }
 
+    /**
+     * Triggered after the containerWidth config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetContainerWidth(value, oldValue) {
+        if (value > 0 && this.columnPositions.length > 0) {
+            this.updateVisibleColumns()
+        }
+    }
+
     /**
      * Triggered after the columnPositions config got changed
      * @param {Object[]} value
@@ -222,13 +258,8 @@ class GridView extends Component {
      * @protected
      */
     afterSetColumnPositions(value, oldValue) {
-        let me = this;
-
-        if (value.length > 0) {
-            // for changing an array inline, we need to use the leading underscore
-            me._visibleColumns[1] = value.length - 1;
-
-            me.createViewData()
+        if (value.length > 0 && this.containerWidth > 0) {
+            this.updateVisibleColumns()
         }
     }
 
@@ -291,6 +322,16 @@ class GridView extends Component {
         }
     }
 
+    /**
+     * Triggered after the selectionModel config got changed
+     * @param {Neo.selection.Model} value
+     * @param {Neo.selection.Model} oldValue
+     * @protected
+     */
+    afterSetSelectionModel(value, oldValue) {
+        this.rendered && value.register(this)
+    }
+
     /**
      * Triggered after the startIndex config got changed
      * @param {Number} value
@@ -322,8 +363,8 @@ class GridView extends Component {
 
     /**
      * Triggered after the visibleColumns config got changed
-     * @param {Number} value
-     * @param {Number} oldValue
+     * @param {Number[]} value
+     * @param {Number[]} oldValue
      * @protected
      */
     afterSetVisibleColumns(value, oldValue) {
@@ -400,8 +441,7 @@ class GridView extends Component {
             id             : cellId,
             cls            : cellCls,
             role           : 'gridcell',
-            style          : rendererOutput.style || {},
-            tabIndex       : '-1'
+            style          : rendererOutput.style || {}
         };
 
         if (column.width) {
@@ -421,6 +461,18 @@ class GridView extends Component {
         return cellConfig
     }
 
+    /**
+     * Triggered before the selectionModel config gets changed.
+     * @param {Neo.selection.Model} value
+     * @param {Neo.selection.Model} oldValue
+     * @protected
+     */
+    beforeSetSelectionModel(value, oldValue) {
+        oldValue?.destroy();
+
+        return ClassSystemUtil.beforeSetInstance(value, RowModel)
+    }
+
     /**
      * @param {Object} opts
      * @param {Object} opts.record
@@ -433,13 +485,11 @@ class GridView extends Component {
         }
 
         let me       = this,
-            {gridContainer, selectedRows, visibleColumns} = me,
+            {bufferColumnRange, gridContainer, selectedRows, visibleColumns} = me,
             columns  = gridContainer.items[0].items,
             id       = me.getRowId(record, rowIndex),
             trCls    = me.getTrClass(record, rowIndex),
-            config, column, gridRow, i;
-
-        me.recordVnodeMap[id] = rowIndex;
+            config, column, endIndex, gridRow, i, startIndex;
 
         if (rowIndex % 2 !== 0) {
             trCls.push('neo-even')
@@ -463,7 +513,6 @@ class GridView extends Component {
             cls            : trCls,
             cn             : [],
             role           : 'row',
-            tabIndex       : '-1',
 
             style: {
                 height   : me.rowHeight + 'px',
@@ -471,7 +520,10 @@ class GridView extends Component {
             }
         };
 
-        for (i=visibleColumns[0]; i <= visibleColumns[1]; i++) {
+        endIndex   = Math.min(columns.length - 1, visibleColumns[1] + bufferColumnRange);
+        startIndex = Math.max(0, visibleColumns[0] - bufferColumnRange);
+
+        for (i=startIndex; i <= endIndex; i++) {
             column = columns[i];
             config = me.applyRendererOutput({column, gridContainer, index: rowIndex, record});
 
@@ -495,16 +547,23 @@ class GridView extends Component {
      *
      */
     createViewData() {
-        let me   = this,
+        let me           = this,
             {bufferRowRange, startIndex, store} = me,
-            rows = [],
+            countRecords = store.getCount(),
+            rows         = [],
             endIndex, i;
 
-        if (store.getCount() < 1 || me.availableRows < 1 || me.columnPositions.length < 1) {
+        if (
+            countRecords              < 1 ||
+            me.availableRows          < 1 ||
+            me._containerWidth        < 1 || // we are not checking me.containerWidth, since we want to ignore the config symbol
+            me.columnPositions.length < 1 ||
+            me.visibleColumns[1]      < 1
+        ) {
             return
         }
 
-        endIndex   = Math.min(store.getCount(), me.availableRows + startIndex + bufferRowRange);
+        endIndex   = Math.min(countRecords, me.availableRows + startIndex + bufferRowRange);
         startIndex = Math.max(0, startIndex - bufferRowRange);
 
         for (i=startIndex; i < endIndex; i++) {
@@ -619,27 +678,28 @@ class GridView extends Component {
 
     /**
      * @param {String} rowId
-     * @returns {Object}
+     * @returns {Record}
      */
     getRecordByRowId(rowId) {
-        return this.store.getAt(this.recordVnodeMap[rowId])
+        let recordId = rowId.split('__')[2],
+            {store}  = this,
+            {model}  = store,
+            keyField = model?.getField(store.getKeyProperty()),
+            keyType  = keyField?.type?.toLowerCase();
+
+        if (keyType === 'int' || keyType === 'integer') {
+            recordId = parseInt(recordId)
+        }
+
+        return store.get(recordId)
     }
 
     /**
      * @param {Object} record
-     * @param {Number} [index]
      * @returns {String}
      */
-    getRowId(record, index) {
-        let me      = this,
-            {store} = me;
-
-        if (me.useRowRecordIds) {
-            return `${me.id}__tr__${record[store.keyProperty]}`
-        } else {
-            index = Neo.isNumber(index) ? index : store.indexOf(record);
-            return me.vdom.cn[index]?.id || Neo.getId('tr')
-        }
+    getRowId(record) {
+        return `${this.id}__tr__${record[this.store.getKeyProperty()]}`
     }
 
     /**
@@ -689,6 +749,14 @@ class GridView extends Component {
         this.fireCellEvent(data, 'cellDoubleClick')
     }
 
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+        this.selectionModel?.register(this)
+    }
+
     /**
      * @param {Object} data
      */
@@ -730,7 +798,7 @@ class GridView extends Component {
      * @param {Neo.data.Model} opts.model The model instance of the changed record
      * @param {Object} opts.record
      */
-    onStoreRecordChange({fields, model, record}) {
+    onStoreRecordChange({fields, record}) {
         let me               = this,
             fieldNames       = fields.map(field => field.name),
             needsUpdate      = false,
@@ -787,15 +855,16 @@ class GridView extends Component {
      *
      */
     updateVisibleColumns() {
-        let me       = this,
-            {x}      = me.scrollPosition,
-            i        = 0,
-            len      = me.columnPositions.length,
-            endIndex = len - 1,
+        let me                = this,
+            {columnPositions} = me,
+            {x}               = me.scrollPosition,
+            i                 = 0,
+            len               = columnPositions.length,
+            endIndex          = len - 1,
             column, startIndex;
 
         for (; i < len; i++) {
-            column = me.columnPositions[i];
+            column = columnPositions[i];
 
             if (x >= column.x && x <= column.x + column.width) {
                 startIndex = i
@@ -807,7 +876,12 @@ class GridView extends Component {
             }
         }
 
-        me.visibleColumns = [startIndex, endIndex]
+        if (
+            Math.abs(startIndex - me.visibleColumns[0]) >= me.bufferColumnRange ||
+            me.visibleColumns[1] < 1 // initial call
+        ) {
+            me.visibleColumns = [startIndex, endIndex]
+        }
     }
 }
 

package/src/grid/header/Toolbar.mjs

@@ -106,7 +106,8 @@ class Toolbar extends BaseToolbar {
      *
      */
     createItems() {
-        let me = this;
+        let me        = this,
+            {mounted} = me;
 
         me.itemDefaults.showHeaderFilter = me.showHeaderFilters;
 
@@ -130,7 +131,8 @@ class Toolbar extends BaseToolbar {
         });
 
         me.promiseUpdate().then(() => {
-            me.mounted && me.passSizeToView()
+            // To prevent duplicate calls, we need to check the mounted state before the update call
+            mounted && me.passSizeToView()
         })
     }
 

package/src/selection/Model.mjs

@@ -189,11 +189,11 @@ class Model extends Base {
      */
     register(component) {
         let me  = this,
-            cls = component.cls || [];
+            cls = component.wrapperCls || [];
 
         if (me.cls && !cls.includes(me.cls)) {
             cls.push(me.cls);
-            component.cls = cls
+            component.wrapperCls = cls
         }
 
         me.view = component;

package/src/selection/grid/RowModel.mjs

@@ -30,7 +30,7 @@ class RowModel extends BaseModel {
     addDomListener() {
         let me = this;
 
-        me.view.on('rowClick', me.onRowClick, me)
+        me.view.gridContainer.on('rowClick', me.onRowClick, me)
     }
 
     /**
@@ -44,76 +44,45 @@ class RowModel extends BaseModel {
         super.destroy(...args)
     }
 
-    /**
-     * Finds the matching table row for a given row index
-     * @param {Number} index row index
-     * @returns {String|null} The table row node id
-     */
-    getRowId(index) {
-        if (index < 0 || this.view.store.getCount() < index) {
-            return null
-        }
-
-        return this.view.vdom.cn[0].cn[1].cn[index].id
-    }
-
-    /**
-     * Finds the matching table row for a given event path
-     * @param {Object} path The event path
-     * @returns {Object|null} The node containing the table row class or null
-     * @protected
-     */
-    static getRowNode(path) {
-        let i    = 0,
-            len  = path.length,
-            node = null;
-
-        for (; i < len; i++) {
-            if (path[i].cls.includes('neo-grid-row')) {
-                node = path[i]
-            }
-        }
-
-        return node
-    }
-
     /**
      * @param {Object} data
      */
     onKeyDownDown(data) {
-        this.onNavKeyRow(data, 1)
+        this.onNavKeyRow(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownUp(data) {
-        this.onNavKeyRow(data, -1)
+        this.onNavKeyRow(-1)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyRow(data, step) {
+    onNavKeyRow(step) {
         let me           = this,
-            node         = RowModel.getRowNode(data.path),
             {view}       = me,
             {store}      = view,
-            vdomNode     = VDomUtil.find(view.vdom, node.id),
-            newIndex     = (vdomNode.index + step) % store.getCount(),
-            {parentNode} = vdomNode,
-            id;
+            currentIndex = 0,
+            newIndex, newRecord, rowId;
+
+        if (me.hasSelection()) {
+            currentIndex = store.indexOf(view.getRecordByRowId(me.items[0]))
+        }
+
+        newIndex = (currentIndex + step) % store.getCount();
 
         while (newIndex < 0) {
             newIndex += store.getCount()
         }
 
-        id = parentNode.cn[newIndex].id;
+        newRecord = store.getAt(newIndex);
+        rowId     = view.getRowId(newRecord);
 
-        if (id) {
-            me.select(id);
-            view.focus(id);
+        if (rowId) {
+            me.select(rowId);
 
             view.fire('select', {
                 record: store.getAt(newIndex)