From 2ae2bf8a5e7e009b043284c603b837ddca9c364a Mon Sep 17 00:00:00 2001 From: Volker Theile Date: Thu, 12 Sep 2019 13:37:03 +0200 Subject: [PATCH] mgr/dashboard: Improve workaround to redraw datatables The current approach to workaround this issue is to fire a 'resize' event to force the datatable to redraw the grid with correct column widths. This approach is like using a sledgehammer to crack a nut. The new approach simply uses Angular's change-detection mechanism. The datatable is marked as changed and Angular will do the rest for us. This should also finally solve the error that variables have been changed after Angular's change-detection has been done. Fixes: https://tracker.ceph.com/issues/41787 Signed-off-by: Volker Theile (cherry picked from commit 08a5ab12ce17de2b4e54d6990e930fa4973d6ee2) # Conflicts: # src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts --- .../src/app/shared/datatable/table/table.component.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts index fa29c91094a36..4ce9237760c66 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts @@ -323,7 +323,14 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O // https://github.com/swimlane/ngx-datatable/issues/193#issuecomment-329144543 if (this.table && this.table.element.clientWidth !== this.currentWidth) { this.currentWidth = this.table.element.clientWidth; + // Recalculate the sizes of the grid. this.table.recalculate(); + // Mark the datatable as changed, Angular's change-detection will + // do the rest for us => the grid will be redrawn. + // Note, the ChangeDetectorRef variable is private, so we need to + // use this workaround to access it and make TypeScript happy. + const cdRef = _.get(this.table, 'cd'); + cdRef.markForCheck(); } } -- 2.39.5