fix(components): empty data warning should work with autoheight grid (#…

…234) * fix(components): empty data warning should work with autoheight grid
ghiscoding · Jan 12, 2021 · 16daa36 · 16daa36
1 parent d2559af
commit 16daa36
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git a/packages/empty-warning-component/src/slick-empty-warning.component.ts b/packages/empty-warning-component/src/slick-empty-warning.component.ts
@@ -63,6 +63,18 @@ export class SlickEmptyWarningComponent implements ExternalResource {
       return false;
     }
 
+    // when dealing with a grid that has "autoHeight" option, we need to override 2 height that get miscalculated
+    // that is because it is not aware that we are adding this slick empty element in this grid DOM
+    if (this.gridOptions.autoHeight) {
+      const leftPaneElm = document.querySelector<HTMLDivElement>('.slick-pane.slick-pane-top.slick-pane-left');
+      if (leftPaneElm && leftPaneElm.style && gridCanvasLeftElm && gridCanvasLeftElm.style) {
+        const leftPaneHeight = parseInt(leftPaneElm.style.height, 10) || 0;
+        const gridRowHeight = this.gridOptions?.rowHeight ?? 0;
+        leftPaneElm.style.height = `${leftPaneHeight + gridRowHeight}px`;
+        gridCanvasLeftElm.style.height = `${gridRowHeight}px`;
+      }
+    }
+
     // warning message could come from a translation key or by the warning options
     let warningMessage = mergedOptions.message;
     if (this.gridOptions.enableTranslate && this.translaterService && mergedOptions?.messageKey) {

diff --git a/packages/empty-warning-component/src/slick-empty-warning.spec.ts b/packages/empty-warning-component/src/slick-empty-warning.spec.ts
@@ -24,16 +24,25 @@ describe('Slick-Empty-Warning Component', () => {
   let translateService: TranslateServiceStub;
 
   beforeEach(() => {
-    container = new ContainerServiceStub();
     div = document.createElement('div');
+    const paneLeft = document.createElement('div');
+    paneLeft.className = 'slick-pane slick-pane-top slick-pane-left';
+    paneLeft.style.height = '44px';
+    const paneRight = document.createElement('div');
+    paneRight.className = 'slick-pane slick-pane-top slick-pane-right';
+    paneRight.style.height = '44px';
     const canvasLeft = document.createElement('div');
     const canvasRight = document.createElement('div');
     canvasLeft.className = 'grid-canvas grid-canvas-left';
     canvasRight.className = 'grid-canvas grid-canvas-right';
-    div.className = GRID_UID;
-    div.appendChild(canvasLeft);
-    div.appendChild(canvasRight);
+    div.className = `slickgrid-container ${GRID_UID}`;
+    div.appendChild(paneLeft);
+    div.appendChild(paneRight);
+    paneLeft.appendChild(canvasLeft);
+    paneRight.appendChild(canvasRight);
     document.body.appendChild(div);
+
+    container = new ContainerServiceStub();
     translateService = new TranslateServiceStub();
 
     mockGridOptions.emptyDataWarning = {
@@ -56,7 +65,7 @@ describe('Slick-Empty-Warning Component', () => {
 
       expect(component).toBeTruthy();
       expect(component.constructor).toBeDefined();
-      expect(output).toBeFalse();
+      expect(output).toBeFalsy();
     });
 
     it('should expect the Slick-Empty-Warning to be created and NOT be rendered when passing False as 2nd argument and component was never rendered', () => {
@@ -151,6 +160,31 @@ describe('Slick-Empty-Warning Component', () => {
       expect(componentRightElm.textContent).toBe('No data to display.');
     });
 
+    it('should expect the Slick-Empty-Warning to be created with proper height when defining a grid that has the "autoHeight" grid option', () => {
+      mockGridOptions.frozenColumn = -1;
+      (mockGridOptions.emptyDataWarning as EmptyWarning).leftViewportMarginLeft = '40%';
+      component = new SlickEmptyWarningComponent();
+      component.init(gridStub, container);
+      mockGridOptions.autoHeight = true;
+      mockGridOptions.rowHeight = 55;
+      component.showEmptyDataMessage(true);
+
+      const componentLeftElm = document.querySelector<HTMLSelectElement>('div.slickgrid_123456 .grid-canvas.grid-canvas-left .slick-empty-data-warning') as HTMLSelectElement;
+      const componentRightElm = document.querySelector<HTMLSelectElement>('div.slickgrid_123456 .grid-canvas.grid-canvas-right .slick-empty-data-warning') as HTMLSelectElement;
+      const gridPaneElm = document.querySelector<HTMLDivElement>('.slick-pane.slick-pane-top.slick-pane-left');
+
+      expect(component).toBeTruthy();
+      expect(component.constructor).toBeDefined();
+      expect(componentLeftElm).toBeTruthy();
+      expect(componentLeftElm.style.display).toBe('block');
+      expect(componentRightElm.style.display).toBe('block');
+      expect(componentLeftElm.style.marginLeft).toBe('40%');
+      expect(componentRightElm.style.marginLeft).toBe('0px');
+      expect(componentLeftElm.textContent).toBe('No data to display.');
+      expect(componentRightElm.textContent).toBe('No data to display.');
+      expect(gridPaneElm.style.height).toBe('99px');
+    });
+
     it('should expect the Slick-Empty-Warning to be created and use different left margin when "rightViewportMarginLeft" is set', () => {
       mockGridOptions.frozenColumn = -1;
       (mockGridOptions.emptyDataWarning as EmptyWarning).rightViewportMarginLeft = '40%';