feat(colspan): add Header Grouping & Column Span example

ghiscoding · Apr 28, 2020 · b9a155d · b9a155d
1 parent 7a4743b
commit b9a155d
Show file tree

Hide file tree

Showing 13 changed files with 185 additions and 115 deletions.
diff --git a/README.md b/README.md
@@ -151,3 +151,4 @@ npm run test:watch
 - [ ] Add Typings for Grid & DataView objects
 - [x] Add simple input bindings in the demo (e.g. pinned rows input)
 - [ ] Cannot copy text from cell since it's not selectable
+- [ ] Remove all Service init 2nd argument (we can get DataView from the Grid object)
diff --git a/packages/common/src/services/groupingAndColspan.service.ts b/packages/common/src/services/groupingAndColspan.service.ts
@@ -37,8 +37,9 @@ export class GroupingAndColspanService {
    * @param grid
    * @param dataView
    */
-  init(grid: any, dataView: any) {
+  init(grid: any, resizerPlugin: any) {
     this._grid = grid;
+    const dataView = grid.getData && grid.getData();
 
     if (grid && this._gridOptions) {
       // When dealing with Pre-Header Grouping colspan, we need to re-create the pre-header in multiple occasions
@@ -47,7 +48,7 @@ export class GroupingAndColspanService {
         this._eventHandler.subscribe(grid.onSort, () => this.renderPreHeaderRowGroupingTitles());
         this._eventHandler.subscribe(grid.onColumnsResized, () => this.renderPreHeaderRowGroupingTitles());
         this._eventHandler.subscribe(grid.onColumnsReordered, () => this.renderPreHeaderRowGroupingTitles());
-        this._eventHandler.subscribe(grid.onGridAfterResize, () => this.renderPreHeaderRowGroupingTitles());
+        this._eventHandler.subscribe(resizerPlugin.onGridAfterResize, () => this.renderPreHeaderRowGroupingTitles());
         this._eventHandler.subscribe(dataView.onRowCountChanged, () => this.renderPreHeaderRowGroupingTitles());
 
         // also not sure why at this point, but it seems that I need to call the 1st create in a delayed execution

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -39,7 +39,9 @@ $cell-border-left:                          1px transparent !default;
 $cell-even-background-color: 			          #ffffff !default;
 $cell-odd-background-color:                 darken($grid-cell-color, 3%) !default; // for striping every second row
 $cell-odd-active-background-color:          darken($grid-cell-color, 5%) !default;
-$cell-padding:                              5px 6px !default;
+$cell-padding-top-bottom:                   5px !default;
+$cell-padding-right-left:                   6px !default;
+$cell-padding:                              $cell-padding-top-bottom $cell-padding-right-left !default;
 
 /** 4x available slick-pane (top, bottom, left, right) */
 $slick-pane-top-border-top:                 none !default;
@@ -61,6 +63,7 @@ $preheader-border-right-last-element:       none !default;
 $preheader-border-bottom:                   none !default;
 $preheader-border-top:                      none !default;
 $preheader-font-size:                       $font-size-base + 3px !default;
+$preheader-height:                          25px !default; /* full height is calculated with cell padding + borders (25px + 5px + 0px + 0px) = 30px must be set as preHeaderPanelHeight */
 
 /* header */
 $header-background-color:                   #ffffff !default;

diff --git a/packages/common/src/styles/se-slickgrid-theme-material.scss b/packages/common/src/styles/se-slickgrid-theme-material.scss
@@ -3,109 +3,18 @@
 @import './multiple-select';
 @import './roboto-font.scss';
 
-$font-family:                           Roboto, "Helvetica Neue", sans-serif;
-$font-size-base-value:                  14;
-$icon-font-family:                      "Material Design Icons";
-$icon-font-size:                        20px;
-$group-totals-formatter-color:          #666666;
-$cell-border-top:                       none;
 $header-background-color:               #F3F3F3;
 $header-border-bottom:                  1px solid #ccc;
-$header-font-size:                      12px;
 $header-font-weight:                    500;
-$header-text-color:                     rgba(0, 0, 0, 0.87);
-$cell-font-weight:                      400;
-$cell-padding:                          8px 7px;
-$cell-odd-background-color:             #f5f5f5;
-$cell-text-color:                       rgba(0, 0, 0, 0.87);
-$header-row-filter-padding:             8px 4px;
-$header-border-bottom:                  transparent;
 $header-filter-row-border-bottom:       1px solid #d0d0d0;
 $slick-pane-top-border-top:             1px solid #d0d0d0;
 $header-resizable-hover:                2px solid #1589ee;
-$header-resizable-hover-border-bottom:  $header-resizable-hover;
-$header-resizable-hover-border-left:    $header-resizable-hover;
-$header-resizable-hover-border-right:   $header-resizable-hover;
-$header-resizable-hover-border-top:     $header-resizable-hover;
-$header-resizable-hover-width:          4px;
-$header-resizable-hover-border-radius:  8px;
-$header-resizable-hover-right:          0;
-$header-resizable-hover-opacity:        0.5;
-$container-border-top:                  1px solid #ccc;
-$container-border-bottom:               1px solid #ccc;
-$container-border-left:                 1px solid #ccc;
-$container-border-right:                1px solid #ccc;
-$icon-sort-asc:                         "\F0360";
-$icon-sort-desc:                        "\F035D";
-$icon-sort-font-size:                   22px;
-$icon-sort-position-right:              18px;
-$checkbox-selector-size:                22px;
-$checkbox-selector-icon-font-weight:    normal;
-$checkbox-selector-icon-checked:        "\F0132";
-$checkbox-selector-icon-unchecked:      "\F0131";
-$checkbox-selector-opacity:             1;
-$checkbox-selector-opacity-hover:       0.9;
-$cell-menu-icon-margin-right:           6px;
-$column-picker-checkbox-size:           18px;
-$column-picker-checkbox-font-weight:    normal;
-$column-picker-checkbox-icon-checked:   "\F012c";
-$column-picker-checkbox-icon-unchecked: "\F012c";
-$column-picker-checkbox-width:          18px;
-$column-picker-title-font-size:         18px;
-$context-menu-item-font-size:           16px;
-$context-menu-icon-font-size:           16px;
-$icon-group-collapsed:                  "\F0142";
-$icon-group-expanded:                   "\F0140";
-$icon-group-font-weight:                normal;
-$icon-group-margin-right:               8px;
-$draggable-group-drop-width:            100%;
-$draggable-group-drop-radius:           0;
-$draggable-group-toggle-collapsed-icon: "\F0142";
-$draggable-group-toggle-expanded-icon:  "\F0140";
-$draggable-group-title-height:          24px;
-$draggable-group-title-line-height:     24px;
-$draggable-group-title-vertical-align:  top;
-$grid-menu-checkbox-size:               18px;
-$grid-menu-checkbox-font-weight:        normal;
-$grid-menu-checkbox-icon-checked:       "\F012c";
-$grid-menu-checkbox-icon-unchecked:     "\F012c";
-$grid-menu-checkbox-width:              18px;
-$grid-menu-icon-font-size:              20px;
-$grid-menu-icon-width:                  20px;
-$grid-menu-title-font-size:             18px;
-$header-menu-button-icon-font-size:     20px;
-$header-menu-icon-font-size:            18px;
-$header-menu-icon-width:                18px;
-$header-menu-button-icon:               "\F0140";
-$header-menu-button-margin-right:       6px;
-$header-menu-display:                   inline-block;
-$multiselect-icon-arrow-down:           "\F035D";
-$multiselect-icon-arrow-up:             "\F0360";
-$multiselect-icon-arrow-font-size:      $icon-font-size - 4px;
-$multiselect-icon-checked:              "\F0132";
-$multiselect-icon-unchecked:            "\F0131";
-$multiselect-icon-radio-checked:        "\F043E";
-$multiselect-icon-radio-unchecked:      "\F0130";
-$multiselect-icon-search:               "\F0349";
-$multiselect-unchecked-opacity:         0.8;
-$row-move-plugin-cursor:                grab;
-$row-move-plugin-icon:                  "\F0278";
-$slider-editor-height:                  26px;
+$header-resizable-hover-opacity:        0.4;
 $primary-color:                         #009530;
 $row-mouse-hover-color:                 #ebfaef;
 $row-selected-color:                    #d4f6d7; /*rgba(0, 149, 48, 0.2);*/
 
-@import './slick-without-bootstrap-min-styling';
-@import './slick-grid';
-@import './slick-controls';
-@import './slick-editors';
-@import './slick-plugins';
-@import './slick-default-theme';
-@import './slick-pagination';
-@import './slick-footer';
-@import './slickgrid-examples';
-@import './slick-bootstrap';
-@import './bootstrap-jquery-ui-autocomplete';
+@import './slickgrid-theme-material.scss';
 
 $link-color: #0099ff;
 

diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss
@@ -258,6 +258,7 @@
     background: none;
     background-color: $header-background-color;
     width: calc(100% - #{$header-scroll-width-to-remove});
+    height: calc(#{$preheader-height} + #{$cell-padding-top-bottom} - #{$preheader-border-top} - #{$preheader-border-bottom});
 
     .slick-header-sortable {
       .slick-column-name {
@@ -377,18 +378,22 @@
 
   /** Header Grouping **/
   .slick-preheader-panel.ui-state-default  {
-    .slick-header-column {
-      border-left: $preheader-border-left;
-      border-right: $preheader-border-right;
-      border-bottom: $preheader-border-bottom;
+    .slick-header-columns {
       border-top: $preheader-border-top;
-      font-size: $preheader-font-size;
-    }
-    .slick-header-column:first-child {
-      border-left: $preheader-border-left-first-element;
-    }
-    .slick-header-column:last-child {
-      border-right: $preheader-border-right-last-element;
+      border-bottom: $preheader-border-bottom;
+
+      .slick-header-column {
+        height: calc(#{$preheader-height} - #{$cell-padding-top-bottom});
+        border-left: $preheader-border-left;
+        border-right: $preheader-border-right;
+        font-size: $preheader-font-size;
+      }
+      .slick-header-column:first-child {
+        border-left: $preheader-border-left-first-element;
+      }
+      .slick-header-column:last-child {
+        border-right: $preheader-border-right-last-element;
+      }
     }
   }
 

diff --git a/packages/common/src/styles/slickgrid-theme-material.scss b/packages/common/src/styles/slickgrid-theme-material.scss
@@ -5,7 +5,8 @@ $icon-font-size:                        20px;
 $group-totals-formatter-color:          #666666;
 $cell-border-top:                       none;
 $cell-font-weight:                      400;
-$cell-padding:                          8px 7px;
+$cell-padding-top-bottom:               8px;
+$cell-padding-right-left:               7px;
 $cell-odd-background-color:             #f5f5f5;
 $cell-text-color:                       rgba(0, 0, 0, 0.87);
 $header-row-filter-padding:             8px 4px;
@@ -82,6 +83,8 @@ $multiselect-icon-radio-checked:        "\F043E";
 $multiselect-icon-radio-unchecked:      "\F0130";
 $multiselect-icon-search:               "\F0349";
 $multiselect-unchecked-opacity:         0.8;
+$preheader-border-right:                1px solid #e9e9e9;
+// $preheader-border-bottom:               1px solid #e9e9e9;
 $row-move-plugin-cursor:                grab;
 $row-move-plugin-icon:                  "\F0278";
 $slider-editor-height:                  26px;

diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss
@@ -91,6 +91,8 @@ $multiselect-icon-radio-checked:        "\F043E";
 $multiselect-icon-radio-unchecked:      "\F0130";
 $multiselect-icon-search:               "\F0349";
 $multiselect-unchecked-opacity:         0.8;
+$preheader-border-right:                1px solid #e9e9e9;
+// $preheader-border-bottom:               1px solid #e9e9e9;
 $row-move-plugin-cursor:                grab;
 $row-move-plugin-icon:                  "\F0278";
 $editor-focus-box-shadow:               0 0 3px $primary-color;

diff --git a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip
diff --git a/packages/vanilla-bundle/src/vanilla-grid-bundle.ts b/packages/vanilla-bundle/src/vanilla-grid-bundle.ts
@@ -316,13 +316,6 @@ export class VanillaGridBundle {
 
     this.grid.invalidate();
 
-    // bind & initialize the grid service
-    this.gridService.init(this.grid, this.dataView);
-    this.gridStateService.init(this.grid, this.dataView);
-    this.excelExportService.init(this.grid, this.dataView);
-    this.exportService.init(this.grid, this.dataView);
-    // this.paginationService.init(this.grid, this.dataView);
-
     if (this._dataset.length > 0) {
       // if (!this._isDatasetInitialized && (this._gridOptions.enableCheckboxSelector || this._gridOptions.enableRowSelection)) {
       //   this.loadRowSelectionPresetWhenExists();
@@ -358,6 +351,14 @@ export class VanillaGridBundle {
     this.gridEventService.bindOnCellChange(this.grid, this.dataView);
     this.gridEventService.bindOnClick(this.grid, this.dataView);
 
+    // bind & initialize the grid service
+    this.gridService.init(this.grid, this.dataView);
+    this.gridStateService.init(this.grid, this.dataView);
+    this.excelExportService.init(this.grid, this.dataView);
+    this.exportService.init(this.grid, this.dataView);
+    // this.paginationService.init(this.grid, this.dataView);
+    this.groupingAndColspanService.init(this.grid, this.resizerPlugin);
+
     const slickerElementInstance = {
       // Slick Grid & DataView objects
       dataView: this.dataView,

diff --git a/packages/web-demo-vanilla-bundle/src/app-routing.ts b/packages/web-demo-vanilla-bundle/src/app-routing.ts
@@ -11,6 +11,7 @@ export class AppRouting {
       { route: 'example05', name: 'example05', title: 'Example05', moduleId: './examples/example05' },
       { route: 'example06', name: 'example06', title: 'Example06', moduleId: './examples/example06' },
       { route: 'example07', name: 'example07', title: 'Example07', moduleId: './examples/example07' },
+      { route: 'example08', name: 'example08', title: 'Example08', moduleId: './examples/example08' },
       { route: 'example50', name: 'example50', title: 'Example50', moduleId: './examples/example50' },
       { route: '', redirect: 'example01' },
       { route: '**', redirect: 'example01' }

diff --git a/packages/web-demo-vanilla-bundle/src/app.html b/packages/web-demo-vanilla-bundle/src/app.html
@@ -48,6 +48,10 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
             Example06 - Tree Data from Hierarchical View Dataset
           </a>
           <a class="navbar-item" onclick.delegate="loadRoute('example07')">Example07 - Row Move &amp; Row Selections</a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example08')">
+            Example08 - Column Span &amp; Header Grouping
+          </a>
+
           <!-- <hr class="navbar-divider">
           <a class="navbar-item" onclick.delegate="loadRoute('example50')">Example50 - SE Tree Data</a> -->
         </div>

diff --git a/packages/web-demo-vanilla-bundle/src/examples/example08.html b/packages/web-demo-vanilla-bundle/src/examples/example08.html
@@ -0,0 +1,15 @@
+<div class="demo-container">
+  <h3 class="title is-3">
+    Example 08 - Column Span &amp; Header Grouping
+  </h3>
+
+  <h4 class="title is-4">Grid 1 <small>(with Header Grouping &amp; Colspan)</small></h4>
+  <div class="grid1">
+  </div>
+
+  <hr />
+
+  <h4 class="title is-4">Grid 2 <small>(with Header Grouping &amp; Frozen/Pinned Columns)</small></h4>
+  <div class="grid2">
+  </div>
+</div>