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

@@ -75,7 +75,7 @@ export class ResizerService {
       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
    */