feat(frozen): fix header grouping grid with frozen columns, fixes #290

ghiscoding · Oct 21, 2019 · b851224 · b851224
1 parent 2d6025e
commit b851224
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 32 deletions.
diff --git a/src/app/examples/grid-colspan.component.html b/src/app/examples/grid-colspan.component.html
@@ -1,12 +1,24 @@
 <div class="container-fluid">
-    <h2>{{title}}</h2>
-    <div class="subtitle" [innerHTML]="subTitle"></div>
+  <h2>{{title}}</h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
 
-    <angular-slickgrid gridId="grid2"
-        [columnDefinitions]="columnDefinitions"
-        [gridOptions]="gridOptions"
-        [dataset]="dataset"
-        gridHeight="500"
-        gridWidth="800">
-    </angular-slickgrid>
-  </div>
+  <h3>Grid 1 <small>(with Header Grouping &amp; Colspan)</small></h3>
+  <angular-slickgrid gridId="grid1"
+                     [columnDefinitions]="columnDefinitions1"
+                     [gridOptions]="gridOptions1"
+                     [dataset]="dataset1"
+                     gridHeight="275"
+                     gridWidth="800">
+  </angular-slickgrid>
+
+  <hr />
+
+  <h3>Grid 2 <small>(with Header Grouping &amp; Frozen/Pinned Columns)</small></h3>
+  <angular-slickgrid gridId="grid2"
+                     [columnDefinitions]="columnDefinitions2"
+                     [gridOptions]="gridOptions2"
+                     [dataset]="dataset2"
+                     gridHeight="275"
+                     gridWidth="800">
+  </angular-slickgrid>
+</div>
diff --git a/src/app/examples/grid-colspan.component.scss b/src/app/examples/grid-colspan.component.scss
@@ -0,0 +1,11 @@
+/** You can change the pinned/frozen border styling through this css override */
+
+.slick-row .slick-cell.frozen:last-child,
+.slick-headerrow-column.frozen:last-child,
+.slick-footerrow-column.frozen:last-child {
+  border-right: 1px solid #969696 !important;
+}
+
+.slick-pane-bottom {
+  border-top: 1px solid #969696 !important;
+}
diff --git a/src/app/examples/grid-colspan.component.ts b/src/app/examples/grid-colspan.component.ts
@@ -1,20 +1,17 @@
 import { Component, OnInit } from '@angular/core';
-import { Column, FieldType, Formatter, Formatters, GridOption } from './../modules/angular-slickgrid';
-
-// create my custom Formatter with the Formatter type
-const myCustomCheckmarkFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) =>
-  value ? `<i class="fa fa-fire" aria-hidden="true"></i>` : '<i class="fa fa-snowflake-o" aria-hidden="true"></i>';
+import { Column, FieldType, GridOption } from './../modules/angular-slickgrid';
 
 @Component({
-  templateUrl: './grid-colspan.component.html'
+  templateUrl: './grid-colspan.component.html',
+  styleUrls: ['./grid-colspan.component.scss'],
 })
 export class GridColspanComponent implements OnInit {
   title = 'Example 15: Column Span & Header Grouping';
   subTitle = `
   This example demonstrates how to easily span a row over multiple columns & how to group header titles.
   <ul>
     <li>
-      Row Colspan - (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Colspan" target="_blank">Wiki docs</a>) |
+      Row Colspan - (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Colspan" target="_blank">Wiki docs</a>) /
       Header Grouping - (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Header-Title-Grouping" target="_blank">Wiki docs</a>)
     </li>
     <li>Note that you can add Sort but remember that it will sort by the data that the row contains, even if the data is visually hidden by colspan it will still sort it</li>
@@ -25,12 +22,20 @@ export class GridColspanComponent implements OnInit {
   </ul>
   `;
 
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset = [];
+  columnDefinitions1: Column[];
+  columnDefinitions2: Column[];
+  gridOptions1: GridOption;
+  gridOptions2: GridOption;
+  dataset1 = [];
+  dataset2 = [];
 
   ngOnInit(): void {
-    this.columnDefinitions = [
+    this.prepareGrid1();
+    this.prepareGrid2();
+  }
+
+  prepareGrid1() {
+    this.columnDefinitions1 = [
       { 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' },
@@ -39,7 +44,7 @@ export class GridColspanComponent implements OnInit {
       { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', type: FieldType.boolean, columnGroup: 'Analysis' }
     ];
 
-    this.gridOptions = {
+    this.gridOptions1 = {
       enableAutoResize: false,
       enableCellNavigation: true,
       enableColumnReorder: false,
@@ -51,15 +56,40 @@ export class GridColspanComponent implements OnInit {
       colspanCallback: this.renderDifferentColspan
     };
 
-    this.getData();
+    this.dataset1 = this.getData(500);
+  }
+
+  prepareGrid2() {
+    this.columnDefinitions2 = [
+      { 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' },
+      { id: 'finish', name: 'Finish', field: 'finish', columnGroup: 'Period' },
+      { id: '%', name: '% Complete', field: 'percentComplete', selectable: false, columnGroup: 'Analysis' },
+      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', type: FieldType.boolean, columnGroup: 'Analysis' }
+    ];
+
+    this.gridOptions2 = {
+      alwaysShowVerticalScroll: false, // disable scroll since we don't want it to show on the left pinned columns
+      enableCellNavigation: true,
+      enableColumnReorder: false,
+      createPreHeaderPanel: true,
+      showPreHeaderPanel: true,
+      preHeaderPanelHeight: 25,
+      explicitInitialization: true,
+      frozenColumn: 1,
+    };
+
+    this.dataset2 = this.getData(500);
   }
 
-  getData() {
+  getData(count: number) {
     // Set up some test columns.
     const mockDataset = [];
-    for (let i = 0; i < 500; i++) {
+    for (let i = 0; i < count; i++) {
       mockDataset[i] = {
         id: i,
+        num: i,
         title: 'Task ' + i,
         duration: '5 days',
         percentComplete: Math.round(Math.random() * 100),
@@ -68,7 +98,7 @@ export class GridColspanComponent implements OnInit {
         effortDriven: (i % 5 === 0)
       };
     }
-    this.dataset = mockDataset;
+    return mockDataset;
   }
 
   /**

diff --git a/src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts b/src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts
@@ -64,21 +64,36 @@ export class GroupingAndColspanService {
   }
 
   createPreHeaderRowGroupingTitle() {
-    const $preHeaderPanel = $(this._grid.getPreHeaderPanel())
-      .empty()
+    if (this._gridOptions && this._gridOptions.frozenColumn >= 0) {
+      // Add column groups to left panel
+      let $preHeaderPanel = $(this._grid.getPreHeaderPanelLeft());
+      this.renderHeaderGroups($preHeaderPanel, 0, this._gridOptions.frozenColumn + 1);
+
+      // Add column groups to right panel
+      $preHeaderPanel = $(this._grid.getPreHeaderPanelRight());
+      this.renderHeaderGroups($preHeaderPanel, this._gridOptions.frozenColumn + 1, this._columnDefinitions.length);
+    } else {
+      // regular grid (not a frozen grid)
+      const $preHeaderPanel = $(this._grid.getPreHeaderPanel());
+      this.renderHeaderGroups($preHeaderPanel, 0, this._columnDefinitions.length);
+    }
+  }
+
+  renderHeaderGroups(preHeaderPanel: any, start: number, end: number) {
+    preHeaderPanel.empty()
       .addClass('slick-header-columns')
       .css('left', '-1000px')
       .width(this._grid.getHeadersWidth());
-
-    $preHeaderPanel.parent().addClass('slick-header');
+    preHeaderPanel.parent().addClass('slick-header');
 
     const headerColumnWidthDiff = this._grid.getHeaderColumnWidthDiff();
+
     let m;
     let header;
     let lastColumnGroup = '';
     let widthTotal = 0;
 
-    for (let i = 0; i < this._columnDefinitions.length; i++) {
+    for (let i = start; i < end; i++) {
       m = this._columnDefinitions[i];
       if (lastColumnGroup === m.columnGroup && i > 0) {
         widthTotal += m.width;
@@ -88,7 +103,7 @@ export class GroupingAndColspanService {
         header = $(`<div class="ui-state-default slick-header-column" />`)
           .html(`<span class="slick-column-name">${m.columnGroup || ''}</span>`)
           .width(m.width - headerColumnWidthDiff)
-          .appendTo($preHeaderPanel);
+          .appendTo(preHeaderPanel);
       }
       lastColumnGroup = m.columnGroup;
     }