fix: grouping bug

packages/grid/src/datasource/dataContainer.ts

@@ -14,7 +14,6 @@ export const getNextKey = function () {
  */
 export class DataContainer {
     private __collection: Entity[] = [];
-    private __markedForDeletion: Entity[] = [];
     private __keyAttribute = '';
     private EntityHandler = EntityHandler;
     /**
@@ -66,16 +65,55 @@ export class DataContainer {
      * @returns
      */
     public getMarkedForDeletion() {
-        return this.__markedForDeletion;
+        return this.__collection.filter((e) => e.__controller.__isDeleted);
     }
 
     /**
-     * resets data, all edits are resets and marked for deletetion if returned
+     * for selected rows only
+     * resets data, all edits are resets/tags are reset
+     * new entities are removed
+     */
+    public resetDataSelection(data: Entity[]) {
+        const newEntities: Entity[] = [];
+
+        if (data) {
+            if (Array.isArray(data)) {
+                data.forEach((d) => {
+                    const i = this.__collection.indexOf(d);
+                    if (i !== -1 && this.__collection[i]) {
+                        const row = this.__collection[i];
+                        if (row.__controller.__isDeleted) {
+                            row.__controller.__isDeleted = false;
+                        }
+                        if (row.__controller.__isNew) {
+                            newEntities.push(row);
+                        }
+                        if (row.__controller.__edited) {
+                            for (const k in row.__controller.__originalValues) {
+                                row[k] = row.__controller.__originalValues[k];
+                            }
+                            row.__controller.__editedProps = {};
+                            row.__controller.__edited = false;
+                        }
+                    }
+                });
+            }
+        }
+
+        this.removeData(newEntities);
+    }
+
+    /**
+     * resets data, all edits are resets/tags are reset
+     * new entities are removed
      */
     public resetData() {
         const newEntities: Entity[] = [];
-        this.setData(this.__markedForDeletion, true);
+
         this.__collection.forEach((row) => {
+            if (row.__controller.__isDeleted) {
+                row.__controller.__isDeleted = false;
+            }
             if (row.__controller.__isNew) {
                 newEntities.push(row);
             }
@@ -88,8 +126,6 @@ export class DataContainer {
             }
         });
         this.removeData(newEntities);
-
-        this.__markedForDeletion = [];
     }
 
     /**
@@ -98,9 +134,13 @@ export class DataContainer {
      */
     public getChanges() {
         const newEntities: Entity[] = [];
-        const deletedEntities: Entity[] = this.__markedForDeletion.slice();
+        const deletedEntities: Entity[] = [];
         const modifiedEntities: Entity[] = [];
         this.__collection.forEach((row) => {
+            if (row.__controller.__isDeleted) {
+                deletedEntities.push(row);
+                return;
+            }
             if (row.__controller.__isNew) {
                 newEntities.push(row);
                 return;
@@ -129,25 +169,36 @@ export class DataContainer {
      */
     public markForDeletion(data: Entity | Entity[], all = false) {
         if (all) {
-            const removed = this.__collection.slice();
-            this.__collection = [];
-            this.__markedForDeletion = removed;
+            this.__collection.forEach((e) => {
+                if (e.__controller.__isNew) {
+                    const i = this.__collection.indexOf(e);
+                    this.__collection.splice(i, 1)[0];
+                } else {
+                    e.__controller.__isDeleted = true;
+                }
+            });
         }
 
         if (data) {
             if (Array.isArray(data)) {
-                const removed: Entity[] = [];
                 data.forEach((d) => {
                     const i = this.__collection.indexOf(d);
                     if (i !== -1) {
-                        removed.push(this.__collection.splice(i, 1)[0]);
+                        if (this.__collection[i]?.__controller.__isNew) {
+                            this.__collection.splice(i, 1)[0];
+                        } else {
+                            this.__collection[i].__controller.__isDeleted = true;
+                        }
                     }
                 });
-                this.__markedForDeletion = this.__markedForDeletion.concat(removed);
             } else {
                 const i = this.__collection.indexOf(data);
                 if (i !== -1) {
-                    this.__markedForDeletion.push(this.__collection.splice(i, 1)[0]);
+                    if (this.__collection[i]?.__controller.__isNew) {
+                        this.__collection.splice(i, 1)[0];
+                    } else {
+                        this.__collection[i].__controller.__isDeleted = true;
+                    }
                 }
             }
         }
@@ -157,7 +208,18 @@ export class DataContainer {
      *
      */
     public clearMarkedForDeletion() {
-        this.__markedForDeletion = [];
+        const tempArr: Entity[] = [];
+        this.__collection.forEach((e) => {
+            if (e.__controller.__isDeleted) {
+                tempArr.push(e);
+            }
+        });
+        tempArr.forEach((e) => {
+            const i = this.__collection.indexOf(e);
+            if (i !== -1) {
+                this.__collection.splice(i, 1)[0];
+            }
+        });
     }
 
     /**
@@ -203,7 +265,6 @@ export class DataContainer {
      */
     public setData(data: any[], add = false, tagAsNew = false): Entity[] | void {
         if (!add) {
-            this.__markedForDeletion = [];
             this.__collection = [];
         }
 

packages/grid/src/datasource/dataSource.ts

@@ -153,6 +153,17 @@ export class Datasource<T = any> {
         }
     }
 
+    /**
+     * resets all edited data and brings back marked for deletion
+     */
+    public resetDataSelectionOnly() {
+        this.__dataContainer.resetDataSelection(this.getSelectedRows());
+        const eventTriggered = this.__internalUpdate(true);
+        if (!eventTriggered) {
+            this.__callSubscribers('collection-filtered', { info: 'resetData' });
+        }
+    }
+
     /**
      * returns copy of all modified, new or marked for deletion
      * changes to these do not edit anything in grid
@@ -772,7 +783,10 @@ export class Datasource<T = any> {
 
     public reloadDatasource() {
         this.__collectionFiltered = this.getAllData();
-        this.__internalUpdate(true);
+        const eventTriggered = this.__internalUpdate(true);
+        if (!eventTriggered) {
+            this.__callSubscribers('collection-filtered', { info: 'filter' });
+        }
     }
 
     public getFilterString(ctx?: Grid) {

packages/grid/src/datasource/entityHandler.ts

@@ -12,7 +12,8 @@ export class EntityHandler {
     __currentValues?: Record<string, any> = {};
     __newprops?: Record<string, any> = {};
     __isNew? = false;
-    __edited? = false;
+    __isDeleted? = false;
+    __edited? = false; // change to isModified?
     __controller?: EntityHandler;
     __KEY?: string | number;
     __KEYSTRING?: string | number;
@@ -36,6 +37,7 @@ export class EntityHandler {
         if (
             [
                 '__KEY',
+                '__rowState',
                 '__group',
                 '__groupID',
                 '__groupName',
@@ -49,9 +51,22 @@ export class EntityHandler {
                 if (this.__KEYSTRING) {
                     return target[this.__KEYSTRING];
                 }
+            } else if (prop === '__rowState') {
+                if (this.__isDeleted) {
+                    return 'D';
+                }
+                if (this.__isNew) {
+                    return 'N';
+                }
+
+                if (this.__edited) {
+                    return 'M';
+                }
             }
+
             return this[prop];
         }
+
         return target[prop];
     }
 
@@ -63,6 +78,7 @@ export class EntityHandler {
             if (
                 [
                     '__KEY',
+                    '__rowState',
                     '__group',
                     '__groupID',
                     '__groupName',
@@ -78,6 +94,8 @@ export class EntityHandler {
                     } else {
                         this[prop] = value;
                     }
+                } else if (prop === '__rowState') {
+                    // nothing
                 } else {
                     this[prop] = value;
                 }

packages/grid/src/grid.css

@@ -760,6 +760,7 @@ input {
     filter: opacity(0.5);
 }
 
+
 .simple-html-grid-col-resize {
     position: absolute;
     bottom: 0;

packages/grid/src/grid/gridFunctions/autoResizeColumns.ts

@@ -77,7 +77,7 @@ export function autoResizeColumns(ctx: Grid, onlyResizeAttribute?: string) {
                     if (attributeKeys.indexOf(rowAttribute) !== -1) {
                         const xx = widths[attributeKeys.indexOf(rowAttribute)];
                         if (xx > x) {
-                            x = getTextWidth(ctx, text[attributeKeys.indexOf(rowAttribute)]) + 5;
+                            x = getTextWidth(ctx, text[attributeKeys.indexOf(rowAttribute)]) + 15;
                         }
                     }
                 }

packages/grid/src/grid/gridFunctions/rebuildHeaderColumns.ts

@@ -204,8 +204,8 @@ export function rebuildHeaderColumns(ctx: Grid) {
                                 col.width = originalWidth + (event.clientX - clientX);
                             }
 
-                            if (col.width < 50) {
-                                col.width = 50;
+                            if (col.width < 25) {
+                                col.width = 25;
                             }
                             ctx.gridInterface.__parseConfig();
                             updateMainElementSizes(ctx);

packages/grid/src/grid/gridFunctions/renderRowSelector.ts

@@ -47,8 +47,29 @@ export function renderRowSelector(
                 }
             }}
         >
-            <span role="cell" aria-label=${'row selector'} class="simple-html-selector-text">${row + 1}</span>
+            <div class="${isModified(rowData)}">
+                <span role="cell" aria-label=${'row selector'} class="simple-html-selector-text"
+                    >${row + 1}</span
+                >
+            </div>
         </div>`,
         cell as any
     );
 }
+
+// helper to add class so we can override color when row is modified
+function isModified(rowData: Entity) {
+    if (rowData?.__controller?.__isDeleted) {
+        return 'row-is-deleted';
+    }
+
+    if (rowData?.__controller?.__isNew) {
+        return 'row-is-new';
+    }
+
+    if (rowData?.__controller?.__edited) {
+        return 'row-is-modified';
+    }
+
+    return '';
+}

samples/grid01/gridConfig.ts

@@ -31,6 +31,12 @@ export const gridConfig: GridConfig = {
         },
     ],   */
     columnsCenter: [
+        {
+            // you almost need to include this now
+            // N = new, D = deleted, M=modified
+            rows: ['__rowState'], 
+            width: 20
+        },
         {
             rows: ['company', 'country'],
             width: 200
@@ -106,6 +112,11 @@ export const gridConfig: GridConfig = {
         }
     ],
     attributes: [
+        {
+            attribute:'__rowState', // N = new, D = deleted, M=modified
+            label: "RS",
+            readonly: true
+        },
         {
             attribute: 'isActive',
             type: 'boolean'

samples/grid01/index.ts

@@ -216,10 +216,20 @@ createButton('reset data/changes', () => {
     datasource.resetData();
 });
 
+createButton('reset data/changes -selection', () => {
+    datasource.resetDataSelectionOnly();
+});
+
 createButton('get changes (ses console)', () => {
     console.log(datasource.getChanges());
 });
 
+createButton('remove marked for deleted (no undo)', () => {
+
+    datasource.getDataContainer().clearMarkedForDeletion();
+    datasource.reloadDatasource();
+});
+
 createButton('use init config', () => {
     gridInterface.loadConfig(gridConfig);
 });

samples/grid01/toggelDarkGrid.ts

@@ -47,6 +47,22 @@ export function toggelDarkGrid() {
         border-top: 0px;
     }
 
+
+
+     .simple-html-selector-text.row-is-modified {
+        color: #9595f1;
+    }
+
+     .simple-html-selector-text.row-is-new {
+        color: #5ff95f;
+    }
+
+    .simple-html-selector-text.row-is-deleted {
+        color: red;
+    }
+
+
+
     .simple-html-grid .filter-dialog-bottom-row button{
         border: 1px solid #515458;
     }