fix(grid): last column header, filter are partially hidden on small grid

aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts

@@ -4,6 +4,7 @@ import { FilterType, DelimiterType, FileType, GridOption } from './models/index'
  * Default Options that can be passed to the Aurelia-Slickgrid
  */
 export const GlobalGridOptions: GridOption = {
+  alwaysShowVerticalScroll: true,
   autoEdit: false,
   asyncEditorLoading: false,
   autoFitColumnsOnFirstLoad: true,
@@ -59,7 +60,7 @@ export const GlobalGridOptions: GridOption = {
     iconRefreshDatasetCommand: 'fa fa-refresh',
     iconToggleFilterCommand: 'fa fa-random',
     menuWidth: 16,
-    resizeOnShowHeaderRow: false,
+    resizeOnShowHeaderRow: true,
     showClearAllFiltersCommand: true,
     showClearAllSortingCommand: true,
     showExportCsvCommand: true,

aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts

@@ -16,12 +16,18 @@ import {
 } from './../models/index';
 
 export interface GridOption {
+  /** Defaults to false, which leads to always show the vertical scroll. This is necessary if you plan to always use the Grid Menu with a grid that could have a small dataset */
+  alwaysShowVerticalScroll?: boolean;
+
   /** Defaults to false, which leads to load editor asynchronously (delayed) */
   asyncEditorLoading?: boolean;
 
   /** Defaults to false, when enabled will automatically open the inlined editor as soon as there is a focus on the cell (can be combined with "enableCellNavigation: true"). */
   autoEdit?: boolean;
 
+  /** Defaults to false, when enabled will automatically adjust grid height. */
+  autoHeight?: boolean;
+
   /** Defaults to true, which leads to automatically adjust the size of each column with the available space. Similar to "Force Fit Column" but only happens on first page/component load. */
   autoFitColumnsOnFirstLoad?: boolean;
 
@@ -142,6 +148,9 @@ export interface GridOption {
   /** Do we want to force fit columns in the grid at all time? */
   forceFitColumns?: boolean;
 
+  /** Defaults to false, force synchronous scrolling */
+  forceSyncScrolling?: boolean;
+
   /** Grid DOM element container ID (used Aurelia-Slickgrid auto-resizer) */
   gridContainerId?: string;
 

aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss

@@ -214,15 +214,6 @@
     }
   }
 
-
-  /*
-  .slick-header-columns:last-child .slick-header-column:last-child {
-    width: 210px !important;
-  }
-  .slick-viewport {
-    overflow-y: scroll !important;
-  }
-  */
   .slick-header-columns {
     background: $table-background;
     width: calc(100% - #{$header-scroll-width-to-remove});

aurelia-slickgrid/src/examples/slickgrid/example1.ts

@@ -36,7 +36,7 @@ export class Example1 {
   getData() {
     // mock a dataset
     this.dataset = [];
-    for (let i = 0; i < 1000; i++) {
+    for (let i = 0; i < 5; i++) {
       const randomYear = 2000 + Math.floor(Math.random() * 10);
       const randomMonth = Math.floor(Math.random() * 11);
       const randomDay = Math.floor((Math.random() * 29));

aurelia-slickgrid/src/examples/slickgrid/example6.html

@@ -21,6 +21,6 @@ <h2>${title}</h2>
   </div>
 
   <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset"
-    grid-height="200" grid-width="700">
+    grid-height="200" grid-width="800">
   </aurelia-slickgrid>
 </template>

aurelia-slickgrid/src/examples/slickgrid/example6.ts

@@ -49,26 +49,26 @@ export class Example6 {
 
   defineGrid() {
     this.columnDefinitions = [
-      { id: 'name', field: 'name', headerKey: 'NAME', filterable: true, sortable: true, type: FieldType.string },
+      { id: 'name', field: 'name', headerKey: 'NAME', filterable: true, sortable: true, type: FieldType.string, width: 60 },
       {
-        id: 'gender', field: 'gender', headerKey: 'GENDER', filterable: true, sortable: true,
+        id: 'gender', field: 'gender', headerKey: 'GENDER', filterable: true, sortable: true, width: 60,
         filter: {
           type: FilterType.singleSelect,
           collection: [{ value: '', label: '' }, { value: 'male', label: 'male', labelKey: 'MALE' }, { value: 'female', label: 'female', labelKey: 'FEMALE' }]
         }
       },
       {
-        id: 'company', field: 'company', headerKey: 'COMPANY',
+        id: 'company', field: 'company', headerKey: 'COMPANY', width: 60,
         sortable: true,
         filterable: true,
         filter: {
           type: FilterType.multipleSelect,
           collection: [{ value: 'acme', label: 'Acme' }, { value: 'abc', label: 'Company ABC' }, { value: 'xyz', label: 'Company XYZ' }]
         }
       },
-      { id: 'billing.address.street', field: 'billing.address.street', headerKey: 'BILLING.ADDRESS.STREET', filterable: true, sortable: true },
+      { id: 'billing.address.street', field: 'billing.address.street', headerKey: 'BILLING.ADDRESS.STREET', filterable: true, sortable: true, width: 60 },
       {
-        id: 'billing.address.zip', field: 'billing.address.zip', headerKey: 'BILLING.ADDRESS.ZIP',
+        id: 'billing.address.zip', field: 'billing.address.zip', headerKey: 'BILLING.ADDRESS.ZIP', width: 60,
         type: FieldType.number,
         filterable: true, sortable: true,
         filter: {
@@ -79,6 +79,7 @@ export class Example6 {
     ];
 
     this.gridOptions = {
+      autoHeight: false,
       enableAutoResize: false,
       enableFiltering: true,
       enableCellNavigation: true,
@@ -90,6 +91,9 @@ export class Example6 {
         pageSize: defaultPageSize,
         totalItems: 0
       },
+      gridMenu: {
+        resizeOnShowHeaderRow: true,
+      },
 
       presets: {
         // you can also type operator as string, e.g.: operator: 'EQ'

doc/github-demo/package.json

@@ -20,7 +20,7 @@
     "aurelia-i18n": "^2.1.2",
     "aurelia-polyfills": "latest",
     "aurelia-router": "^1.5.0",
-    "aurelia-slickgrid": "^1.11.0",
+    "aurelia-slickgrid": "^1.11.1",
     "aurelia-validation": "^1.1.2",
     "bluebird": "^3.5.1",
     "bootstrap": "^3.3.7",