diff --git a/aurelia-slickgrid/package.json b/aurelia-slickgrid/package.json index d2b59d158..c71fcf1ec 100644 --- 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.15", + "slickgrid": "^2.3.17", "text-encoding-utf-8": "^1.0.2" }, "peerDependencies": {}, diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts b/aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts index 099b57609..dc9e36baf 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts @@ -68,6 +68,9 @@ export const GlobalGridOptions: GridOption = { }, headerRowHeight: 35, multiColumnSort: true, + numberedMultiColumnSort: true, + tristateMultiColumnSort: false, + sortColNumberInSeparateSpan: true, pagination: { pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100], pageSize: 25, diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts b/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts index f644e8bcf..fcca2059b 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts @@ -163,6 +163,9 @@ export interface GridOption { /** Do we want to enable multi-column sorting? */ multiColumnSort?: boolean; + /** Defaults to true, which will display numbers indicating column sort precedence are displayed in the columns when multiple columns selected */ + numberedMultiColumnSort?: boolean; + /** DEPRECATED, Please use "backendServiceApi" instead */ onBackendEventApi?: BackendEventChanged; @@ -193,6 +196,12 @@ export interface GridOption { /** Do we want to show top panel row? */ showTopPanel?: boolean; + /** Defaults to true, which leads to render a separate span for the number and styles it with css class slick-sort-indicator-numbered */ + sortColNumberInSeparateSpan?: boolean; + /** What is the top panel height in pixels (only type the number) */ topPanelHeight?: number; + + /** Defaults to false, when set to True will lead to multiple columns sorting without the need to hold or do shift-click to execute a multiple sort. */ + tristateMultiColumnSort?: boolean; } diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss b/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss index 76edd7610..99278fa59 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss +++ b/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss @@ -80,11 +80,6 @@ $icon-group-font-weight: bold !default; $icon-group-margin-right: 2px !default; $icon-group-height: 20px !default; $icon-group-width: 14px !default; -$icon-sort-asc: "\f0d8" !default; -$icon-sort-desc: "\f0d7" !default; -$icon-sort-color: rgb(76, 128, 190) !default; -$icon-sort-position-right: 10px !default; -$icon-sort-position-top: ((15px * $header-row-count) - 15px) !default; $table-background: transparent !default; $container-border: 0px solid $border-color !default; $link-color: #08c !default; @@ -93,6 +88,18 @@ $gray-dark: #333 !default; $text-color: $gray-dark !default; $navbar-default-link-hover-color: $gray-dark !default; +/* Sorting */ +$icon-sort-asc: "\f0d8" !default; +$icon-sort-desc: "\f0d7" !default; +$icon-sort-color: rgb(76, 128, 190) !default; +$icon-sort-position-right: 10px !default; +$icon-sort-position-top: ((15px * $header-row-count) - 15px) !default; +$sort-indicator-number-font-size: 10px !default; +$sort-indicator-number-width: 8px !default; +$sort-indicator-number-left: auto !default; +$sort-indicator-number-right: 0px !default; +$sort-indicator-number-top: 27px !default; + /* Grouping Totals Formatter */ $group-totals-formatter-color: gray !default; $group-totals-formatter-bgcolor: #fff !default; diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss b/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss index 19e2d7ed7..3a4e03127 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss +++ b/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss @@ -276,6 +276,9 @@ } .slick-sort-indicator { + background: none; + font-family: $icon-font-family; + font-size: $icon-font-size; position: absolute; display: inline-block; color: $icon-sort-color; @@ -285,11 +288,16 @@ right: $icon-sort-position-right; top: $icon-sort-position-top; } - - [class*="slick-sort-"] { - background: none; - font-family: $icon-font-family; - font-size: $icon-font-size; + .slick-sort-indicator-numbered { + font-family: $font-family; + font-size: $sort-indicator-number-font-size; + position: absolute; + display: inline-block; + color: $icon-sort-color; + width: $sort-indicator-number-width; + left: $sort-indicator-number-left; + right: $sort-indicator-number-right; + top: $sort-indicator-number-top; } .slick-sort-indicator-asc { &:before { diff --git a/package.json b/package.json index fcfdb28dd..b3ff36051 100644 --- 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.15", + "slickgrid": "^2.3.17", "text-encoding-utf-8": "^1.0.2" }, "devDependencies": {