fix(resizer): allow gridHeight/gridWidth to be passed as string (#284)

* fix(resizer): allow gridHeight/gridWidth to be passed as string
- fixes Aurelia-Slickgrid issue [#534](ghiscoding/aurelia-slickgrid#534)

packages/common/src/interfaces/gridOption.interface.ts

@@ -384,17 +384,23 @@ export interface GridOption {
   /** Grid DOM element container ID (used Slickgrid-Universal auto-resizer) */
   gridContainerId?: string;
 
-  /** When using a fixed grid height */
-  gridHeight?: number;
+  /**
+   * When using a fixed grid height, can be a number or a string.
+   * if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  gridHeight?: number | string;
 
   /** Grid DOM element ID */
   gridId?: string;
 
   /** Grid Menu options (aka hamburger menu) */
   gridMenu?: GridMenu;
 
-  /** When using a fixed grid width */
-  gridWidth?: number;
+  /**
+   * When using a fixed grid width, can be a number or a string.
+   * if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  gridWidth?: number | string;
 
   /** Header row height in pixels (only type the number). Header row is where the filters are. */
   headerRowHeight?: number;

packages/common/src/interfaces/gridSize.interface.ts

@@ -1,7 +1,13 @@
 export interface GridSize {
-  /** Height of the grid */
-  height?: number;
+  /**
+   * When using a fixed grid height, can be a number or a string.
+   * if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  height?: number | string;
 
-  /** Width of the grid */
-  width?: number;
+  /**
+   * When using a fixed grid width, can be a number or a string.
+   * if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  width?: number | string;
 }

packages/vanilla-bundle/src/services/resizer.service.ts

@@ -67,15 +67,15 @@ export class ResizerService {
     this._grid = grid;
     const fixedGridDimensions = (this.gridOptions?.gridHeight || this.gridOptions?.gridWidth) ? { height: this.gridOptions?.gridHeight, width: this.gridOptions?.gridWidth } : undefined;
     const autoResizeOptions = this.gridOptions?.autoResize ?? { bottomPadding: 0 };
-    if (autoResizeOptions && autoResizeOptions.bottomPadding !== undefined && this.gridOptions.showCustomFooter) {
+    if (autoResizeOptions?.bottomPadding !== undefined && this.gridOptions.showCustomFooter) {
       const footerHeight: string | number = this.gridOptions?.customFooterOptions?.footerHeight ?? DATAGRID_FOOTER_HEIGHT;
       autoResizeOptions.bottomPadding += parseInt(`${footerHeight}`, 10);
     }
-    if (autoResizeOptions && autoResizeOptions.bottomPadding !== undefined && this.gridOptions.enablePagination) {
+    if (autoResizeOptions?.bottomPadding !== undefined && this.gridOptions.enablePagination) {
       autoResizeOptions.bottomPadding += DATAGRID_PAGINATION_HEIGHT;
     }
     if (fixedGridDimensions?.width && gridParentContainerElm?.style) {
-      gridParentContainerElm.style.width = `${fixedGridDimensions.width}px`;
+      gridParentContainerElm.style.width = typeof fixedGridDimensions.width === 'string' ? fixedGridDimensions.width : `${fixedGridDimensions.width}px`;
     }
 
     this._addon = new Slick.Plugins.Resizer({ ...autoResizeOptions, gridContainer: gridParentContainerElm }, fixedGridDimensions);
@@ -105,7 +105,7 @@ export class ResizerService {
 
   /**
    * Return the last resize dimensions used by the service
-   * @return {object} last dimensions (height: number, width: number)
+   * @return {object} last dimensions (height, width)
    */
   getLastResizeDimensions(): GridSize {
     return this._addon?.getLastResizeDimensions();
@@ -126,7 +126,7 @@ export class ResizerService {
   /**
    * Resize the datagrid to fit the browser height & width.
    * @param {number} delay to wait before resizing, defaults to 0 (in milliseconds)
-   * @param {object} newSizes can optionally be passed (height: number, width: number)
+   * @param {object} newSizes can optionally be passed (height, width)
    * @param {object} event that triggered the resize, defaults to null
    * @return If the browser supports it, we can return a Promise that would resolve with the new dimensions
    */