fix(grid): fix column checked being reset when data reload

ng-matero · Mar 19, 2024 · efec521 · efec521
1 parent 8cb333e
commit efec521
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/projects/extensions/grid/column-menu.html b/projects/extensions/grid/column-menu.html
@@ -120,7 +120,7 @@
 
   <mat-checkbox class="mtx-grid-column-menu-item-label" *ngIf="selectable"
                 [(ngModel)]="col[selectableChecked]" [disabled]="col.disabled"
-                (change)="_handleChecked($event)">
+                (change)="_handleChecked(col)">
     {{col.header | toObservable | async}}
   </mat-checkbox>
   <span class="mtx-grid-column-menu-item-label" *ngIf="!selectable">

diff --git a/projects/extensions/grid/column-menu.ts b/projects/extensions/grid/column-menu.ts
@@ -9,7 +9,6 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import { MatCheckboxChange } from '@angular/material/checkbox';
 import { ThemePalette } from '@angular/material/core';
 import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
 import {
@@ -81,7 +80,12 @@ export class MtxGridColumnMenu {
     this.columnChange.emit(this.columns);
   }
 
-  _handleChecked(e: MatCheckboxChange) {
+  _handleChecked(col: MtxGridColumn) {
+    if (this.selectableChecked === 'show') {
+      col.hide = !col.show;
+    } else {
+      col.show = !col.hide;
+    }
     this.columnChange.emit(this.columns);
   }
 

diff --git a/projects/extensions/grid/grid-pipes.ts b/projects/extensions/grid/grid-pipes.ts
@@ -24,11 +24,11 @@ export class MtxGridColClassPipe implements PipeTransform {
 export class MtxGridRowClassPipe implements PipeTransform {
   transform(
     rowData: Record<string, any>,
-    index: number,
+    index: number | undefined,
     dataIndex: number,
     rowClassFormatter?: MtxGridRowClassFormatter
   ) {
-    const rowIndex = typeof index === 'undefined' ? dataIndex : index;
+    const rowIndex = index === undefined ? dataIndex : index;
     const classList: string[] = rowIndex % 2 === 1 ? ['mat-row-odd'] : [];
     if (rowClassFormatter) {
       for (const key of Object.keys(rowClassFormatter)) {

diff --git a/projects/extensions/grid/grid.ts b/projects/extensions/grid/grid.ts
@@ -333,19 +333,22 @@ export class MtxGrid implements OnChanges, AfterViewInit, OnDestroy {
     return this._utils.getColData(data, colDef);
   }
 
+  _isColumnHide(item: MtxGridColumn) {
+    return item.hide !== undefined ? item.hide : item.show !== undefined ? !item.show : false;
+  }
+
   // Waiting for async data
   ngOnChanges(changes: SimpleChanges) {
     this._countPinnedPosition();
 
-    this.displayedColumns = this.columns.filter(item => !item.hide).map(item => item.field);
+    this.displayedColumns = this.columns
+      .filter(item => !this._isColumnHide(item))
+      .map(item => item.field);
 
     if (this.showColumnMenuButton) {
       this.columns.forEach(item => {
-        if (this.columnHideableChecked === 'show') {
-          item.show = !item.hide;
-        } else {
-          item.hide = !!item.hide;
-        }
+        item.hide = this._isColumnHide(item);
+        item.show = !item.hide;
       });
     }
 
@@ -415,8 +418,8 @@ export class MtxGrid implements OnChanges, AfterViewInit, OnDestroy {
     });
   }
 
-  _getIndex(index: number, dataIndex: number) {
-    return typeof index === 'undefined' ? dataIndex : index;
+  _getIndex(index: number | undefined, dataIndex: number) {
+    return index === undefined ? dataIndex : index;
   }
 
   _onSortChange(sort: Sort) {