fix(grid): issue #44, sort icon hidden behind grid menu w/small datas…

…et (#53)
ghiscoding · May 12, 2018 · 737da5f · 737da5f
1 parent 3bd2d90
commit 737da5f
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 20 deletions.
diff --git a/aurelia-slickgrid/package.json b/aurelia-slickgrid/package.json
@@ -39,7 +39,7 @@
     "moment": "^2.19.1",
     "moment-mini": "^2.18.1",
     "nps": "^5.7.1",
-    "slickgrid": "^2.3.17",
+    "slickgrid": "^2.3.18",
     "text-encoding-utf-8": "^1.0.2"
   },
   "peerDependencies": {},
@@ -77,7 +77,7 @@
     "jest-cli": "20.0.4",
     "json-loader": "0.5.7",
     "minimatch": "^3.0.2",
-    "node-sass": "4.5.3",
+    "node-sass": "4.9.0",
     "nps-utils": "1.2.0",
     "opn": "^5.1.0",
     "protractor": "^5.1.2",

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts b/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,
@@ -60,7 +61,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,

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts b/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts
@@ -19,6 +19,9 @@ export interface GridOption {
   /** CSS class name used on newly added row */
   addNewRowCssClass?: string;
 
+  /** Defaults to true, which leads to always show a vertical scrolling. This is rather important to use when using the Grid Menu (hamburger) */
+  alwaysShowVerticalScroll?: boolean;
+
   /** Defaults to 100, which is the asynchronous editor loading delay */
   asyncEditorLoadDelay?: number;
 
@@ -34,6 +37,9 @@ export interface GridOption {
   /** 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;
 
@@ -199,7 +205,7 @@ export interface GridOption {
   /** Do we want to force fit columns in the grid at all time? */
   forceFitColumns?: boolean;
 
-  /** Do we want to force synchronous scrolling? */
+  /** Defaults to false, force synchronous scrolling */
   forceSyncScrolling?: boolean;
 
   /** Formatter classes factory */

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/services/controlAndPlugin.service.ts b/aurelia-slickgrid/src/aurelia-slickgrid/services/controlAndPlugin.service.ts
@@ -106,7 +106,7 @@ export class ControlAndPluginService {
     }
 
     // Row Selection Plugin
-    if (options.enableRowSelection) {
+    if (!options.enableCheckboxSelector && options.enableRowSelection) {
       this.rowSelectionPlugin = new Slick.RowSelectionModel(options.rowSelectionOptions || {});
       grid.setSelectionModel(this.rowSelectionPlugin);
     }

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss b/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss
@@ -241,14 +241,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});

diff --git a/aurelia-slickgrid/src/examples/slickgrid/example6.html b/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>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example6.ts b/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', width: 60, filterable: true, sortable: true },
       {
-        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,12 +79,16 @@ export class Example6 {
     ];
 
     this.gridOptions = {
+      autoHeight: false,
       enableAutoResize: false,
       enableFiltering: true,
       enableCellNavigation: true,
       enableCheckboxSelector: true,
       enableRowSelection: true,
       enableTranslate: true,
+      gridMenu: {
+        resizeOnShowHeaderRow: true,
+      },
       pagination: {
         pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
         pageSize: defaultPageSize,

diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "jquery-ui-dist": "^1.12.1",
     "moment": ">=2.18.1",
     "moment-mini": ">=2.18.1",
-    "slickgrid": "^2.3.17",
+    "slickgrid": "^2.3.18",
     "text-encoding-utf-8": "^1.0.2"
   },
   "devDependencies": {