diff --git a/package.json b/package.json index 0c58c30f4..997c8bf55 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "lodash.isequal": "^4.5.0", "moment-mini": "^2.22.1", "rxjs": "^6.3.3", - "slickgrid": "^2.4.24", + "slickgrid": "^2.4.25", "text-encoding-utf-8": "^1.0.2" }, "devDependencies": { diff --git a/src/app/examples/grid-colspan.component.html b/src/app/examples/grid-colspan.component.html index e57c4519d..47842fa49 100644 --- a/src/app/examples/grid-colspan.component.html +++ b/src/app/examples/grid-colspan.component.html @@ -14,11 +14,20 @@

Grid 1 (with Header Grouping & Colspan)

Grid 2 (with Header Grouping & Frozen/Pinned Columns)

+
+ + +
+ gridWidth="800" + (onAngularGridCreated)="angularGridReady2($event)"> diff --git a/src/app/examples/grid-colspan.component.ts b/src/app/examples/grid-colspan.component.ts index bc6c14203..b145b6270 100644 --- a/src/app/examples/grid-colspan.component.ts +++ b/src/app/examples/grid-colspan.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Column, FieldType, GridOption } from './../modules/angular-slickgrid'; +import { AngularGridInstance, Column, FieldType, GridOption } from './../modules/angular-slickgrid'; @Component({ templateUrl: './grid-colspan.component.html', @@ -15,9 +15,15 @@ export class GridColspanComponent implements OnInit { Header Grouping - (Wiki docs)
  • Note that you can add Sort but remember that it will sort by the data which the row contains, even if the data is visually hidden by colspan it will still sort it
    • +
  • + Header Grouping spanning accross multiple columns is working but has some UI issues on window resize. + If anyone can fix it, probably some CSS issues, please let us know. +
    • `; + angularGrid2: AngularGridInstance; + gridObj2: any; columnDefinitions1: Column[]; columnDefinitions2: Column[]; gridOptions1: GridOption; @@ -30,6 +36,11 @@ export class GridColspanComponent implements OnInit { this.prepareGrid2(); } + angularGridReady2(angularGrid: AngularGridInstance) { + this.angularGrid2 = angularGrid; + this.gridObj2 = angularGrid.slickGrid; + } + prepareGrid1() { this.columnDefinitions1 = [ { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' }, @@ -49,7 +60,7 @@ export class GridColspanComponent implements OnInit { showPreHeaderPanel: true, preHeaderPanelHeight: 28, explicitInitialization: true, - colspanCallback: this.renderDifferentColspan + colspanCallback: this.renderDifferentColspan, }; this.dataset1 = this.getData(500); @@ -57,6 +68,7 @@ export class GridColspanComponent implements OnInit { prepareGrid2() { this.columnDefinitions2 = [ + { id: 'sel', name: '#', field: 'num', behavior: 'select', cssClass: 'cell-selection', width: 40, resizable: false, selectable: false }, { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' }, { id: 'duration', name: 'Duration', field: 'duration', columnGroup: 'Common Factor' }, { id: 'start', name: 'Start', field: 'start', columnGroup: 'Period' }, @@ -73,7 +85,9 @@ export class GridColspanComponent implements OnInit { showPreHeaderPanel: true, preHeaderPanelHeight: 25, explicitInitialization: true, - frozenColumn: 1, + frozenColumn: 2, + gridMenu: { hideClearFrozenColumnsCommand: false }, + headerMenu: { hideFreezeColumnsCommand: false } }; this.dataset2 = this.getData(500); @@ -97,6 +111,11 @@ export class GridColspanComponent implements OnInit { return mockDataset; } + setFrozenColumns2(frozenCols: number) { + this.gridObj2.setOptions({ frozenColumn: frozenCols, alwaysShowVerticalScroll: false }); + this.gridOptions2 = this.gridObj2.getOptions(); + } + /** * A callback to render different row column span * Your callback will always have the "item" argument which you can use to decide on the colspan diff --git a/src/app/examples/grid-frozen.component.html b/src/app/examples/grid-frozen.component.html index 83b8d3224..0c8bd8370 100644 --- a/src/app/examples/grid-frozen.component.html +++ b/src/app/examples/grid-frozen.component.html @@ -19,6 +19,16 @@

    {{title}}

    Set + + +
    + + +