From 22514c683e15004617cbbbac3a472072c8cb3fa0 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Sat, 7 Apr 2018 00:46:47 -0400 Subject: [PATCH] fix(grid): last column header, filter are partially hidden on small grid --- .../src/aurelia-slickgrid/global-grid-options.ts | 3 ++- .../models/gridOption.interface.ts | 9 +++++++++ .../aurelia-slickgrid/styles/slick-bootstrap.scss | 9 --------- .../src/examples/slickgrid/example1.ts | 2 +- .../src/examples/slickgrid/example6.html | 2 +- .../src/examples/slickgrid/example6.ts | 14 +++++++++----- doc/github-demo/package.json | 2 +- 7 files changed, 23 insertions(+), 18 deletions(-) diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts b/aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts index 099b57609..0d2f60e77 100644 --- 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, @@ -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, diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts b/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts index f644e8bcf..9f222ff84 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts +++ b/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; diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss b/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss index 19e2d7ed7..334361c5a 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss +++ b/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}); diff --git a/aurelia-slickgrid/src/examples/slickgrid/example1.ts b/aurelia-slickgrid/src/examples/slickgrid/example1.ts index 2bae7c5f1..14d5f6f6d 100644 --- a/aurelia-slickgrid/src/examples/slickgrid/example1.ts +++ b/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)); diff --git a/aurelia-slickgrid/src/examples/slickgrid/example6.html b/aurelia-slickgrid/src/examples/slickgrid/example6.html index be3ece410..ebf7853af 100644 --- a/aurelia-slickgrid/src/examples/slickgrid/example6.html +++ b/aurelia-slickgrid/src/examples/slickgrid/example6.html @@ -21,6 +21,6 @@

${title}

+ grid-height="200" grid-width="800"> diff --git a/aurelia-slickgrid/src/examples/slickgrid/example6.ts b/aurelia-slickgrid/src/examples/slickgrid/example6.ts index 5ddf5cb1c..e4bbf1db1 100644 --- a/aurelia-slickgrid/src/examples/slickgrid/example6.ts +++ b/aurelia-slickgrid/src/examples/slickgrid/example6.ts @@ -49,16 +49,16 @@ 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: { @@ -66,9 +66,9 @@ export class Example6 { 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' diff --git a/doc/github-demo/package.json b/doc/github-demo/package.json index 6422365c3..6b0dac1fa 100644 --- a/doc/github-demo/package.json +++ b/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",