fix(grid): gridHeight & gridWidth not set, closes #35 (#40)

ghiscoding · Apr 2, 2018 · 0bd2c53 · 0bd2c53
1 parent c87bd83
commit 0bd2c53
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.html b/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.html
@@ -1,6 +1,6 @@
 <template>
-  <div id="slickGridContainer-${gridId}" class="gridPane">
-    <div id.bind="gridId" class="slickgrid-container" style.bind="style">
+  <div id="slickGridContainer-${gridId}" class="gridPane" css.bind="gridStyleWidth">
+    <div id.bind="gridId" class="slickgrid-container" style="width: 100%" css.bind="gridStyleHeight">
     </div>
 
     <slick-pagination id="slickPagingContainer-${gridId}" if.bind="showPagination" asg-on-pagination-changed.delegate="paginationChanged($event.detail)"

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts b/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts
@@ -61,11 +61,10 @@ export class AureliaSlickgridCustomElement {
   private _dataset: any[];
   private _eventHandler: any = new Slick.EventHandler();
   gridStateSubscriber: Subscription;
-  gridHeightString: string;
-  gridWidthString: string;
+  gridStyleHeight: { height: string; };
+  gridStyleWidth: { width: string; };
   localeChangedSubscriber: Subscription;
   showPagination = false;
-  style: any;
 
   @bindable({ defaultBindingMode: bindingMode.twoWay }) element: Element;
   @bindable({ defaultBindingMode: bindingMode.twoWay }) dataset: any[];
@@ -75,7 +74,7 @@ export class AureliaSlickgridCustomElement {
   @bindable() gridId: string;
   @bindable() columnDefinitions: Column[];
   @bindable() gridOptions: GridOption;
-  @bindable() gridHeight = 100;
+  @bindable() gridHeight = 200;
   @bindable() gridWidth = 600;
   @bindable() pickerOptions: any;
 
@@ -186,10 +185,14 @@ export class AureliaSlickgridCustomElement {
     // get the grid options (priority is Global Options first, then user option which could overwrite the Global options)
     this.gridOptions = { ...GlobalGridOptions, ...binding.gridOptions };
 
-    this.style = {
-      height: `${binding.gridHeight}px`,
-      width: `${binding.gridWidth}px`
-    };
+    if (!this.gridOptions.enableAutoResize) {
+      this.gridStyleWidth = {
+        width: `${this.gridWidth}px`
+      };
+      this.gridStyleHeight = {
+        height: `${this.gridHeight}px`
+      };
+    }
 
     // Wrap each editor class in the Factory resolver so consumers of this library can use
     // dependency injection. Aurelia will resolve all dependencies when we pass the container
@@ -395,8 +398,6 @@ export class AureliaSlickgridCustomElement {
       if (options.autoFitColumnsOnFirstLoad && typeof grid.autosizeColumns === 'function') {
         grid.autosizeColumns();
       }
-    } else {
-      this.resizer.resizeGrid(0, { height: this.gridHeight, width: this.gridWidth });
     }
   }