feat(colspan): add colspanCallback into gridOptions for easier usage

aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts

@@ -353,6 +353,14 @@ export class AureliaSlickgridCustomElement {
       grid.invalidateRows(args.rows);
       grid.render();
     });
+
+    // does the user have a colspan callback?
+    if (gridOptions.colspanCallback) {
+      dataView.getItemMetadata = (rowNumber: number) => {
+        const item = dataView.getItem(rowNumber);
+        return gridOptions.colspanCallback(item);
+      };
+    }
   }
 
   attachBackendCallbackFunctions(gridOptions: GridOption) {

aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts

@@ -14,7 +14,6 @@ import {
   HeaderMenu,
   Pagination
 } from './../models/index';
-import { BooleanLiteral, NumberLiteralType } from 'typescript';
 
 export interface GridOption {
   /** CSS class name used on newly added row */
@@ -65,6 +64,9 @@ export interface GridOption {
   /** Checkbox Select Plugin options (columnId, cssClass, toolTip, width) */
   checkboxSelector?: CheckboxSelector;
 
+  /** A callback function that will be used to define row spanning accross multiple columns */
+  colspanCallback?: (item: any) => { columns: any };
+
   /** Checkbox Select Plugin options (columnTitle, forceFitTitle, syncResizeTitle) */
   columnPicker?: ColumnPicker;
 

aurelia-slickgrid/src/aurelia-slickgrid/services/groupingAndColspan.service.ts

@@ -30,24 +30,26 @@ export class GroupingAndColspanService {
 
     this.aureliaEventPrefix = (this._gridOptions && this._gridOptions.defaultAureliaEventPrefix) ? this._gridOptions.defaultAureliaEventPrefix : 'asg';
 
-    // When dealing with Pre-Header Grouping colspan, we need to re-create the pre-header in multiple occasions
-    // for all these occasions, we have to trigger a re-create
-    if (this._gridOptions.createPreHeaderPanel) {
-      this._eventHandler.subscribe(grid.onSort, (e: Event, args: any) => {
-        this.createPreHeaderRowGroupingTitle();
-      });
-      this._eventHandler.subscribe(grid.onColumnsResized, (e: Event, args: any) => {
-        this.createPreHeaderRowGroupingTitle();
-      });
-      this._eventHandler.subscribe(dataView.onRowCountChanged, (e: Event, args: any) => {
-        this.createPreHeaderRowGroupingTitle();
-      });
+    if (grid && this._gridOptions) {
+      // When dealing with Pre-Header Grouping colspan, we need to re-create the pre-header in multiple occasions
+      // for all these occasions, we have to trigger a re-create
+      if (this._gridOptions.createPreHeaderPanel) {
+        this._eventHandler.subscribe(grid.onSort, (e: Event, args: any) => {
+          this.createPreHeaderRowGroupingTitle();
+        });
+        this._eventHandler.subscribe(grid.onColumnsResized, (e: Event, args: any) => {
+          this.createPreHeaderRowGroupingTitle();
+        });
+        this._eventHandler.subscribe(dataView.onRowCountChanged, (e: Event, args: any) => {
+          this.createPreHeaderRowGroupingTitle();
+        });
 
-      // also not sure why at this point, but it seems that I need to call the 1st create in a delayed execution
-      // probably some kind of timing issues and delaying it until the grid is fully ready does help
-      setTimeout(() => {
-        this.createPreHeaderRowGroupingTitle();
-      }, 50);
+        // also not sure why at this point, but it seems that I need to call the 1st create in a delayed execution
+        // probably some kind of timing issues and delaying it until the grid is fully ready does help
+        setTimeout(() => {
+          this.createPreHeaderRowGroupingTitle();
+        }, 50);
+      }
     }
   }
 

aurelia-slickgrid/src/examples/slickgrid/example14.html

@@ -3,6 +3,6 @@ <h2>${title}</h2>
   <div class="subtitle" innerhtml.bind="subTitle"></div>
 
   <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset"
-    sg-on-dataview-created.delegate="onDataviewCreated($event.detail)" grid-height="500" grid-width="800">
+    grid-height="500" grid-width="800">
   </aurelia-slickgrid>
 </template>

aurelia-slickgrid/src/examples/slickgrid/example14.ts

@@ -6,11 +6,8 @@ import * as $ from 'jquery';
 export class Example14 {
   title = 'Example 14: Column Span & Header Grouping';
   subTitle = `
-    This example demonstrates how to easily span a column over multiple columns.
+    This example demonstrates how to easily span a row over multiple columns & how to group header titles.
     <ul>
-      <li>However please note that for this to work properly, you need to call the "dataView.getItemMetadata"
-      <b>only</b> after the "dataView" is created for it to render at the correct time (else you will face timing UI issues)
-      </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>
       <li>
         Header Grouping spanning accross multiple columns is working but has some UI issues on window resize.
@@ -21,13 +18,17 @@ export class Example14 {
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset = [];
-  visibleColumns;
 
   constructor() {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
   }
 
+  attached() {
+    // populate the dataset once the grid is ready
+    this.getData();
+  }
+
   defineGrid() {
     this.columnDefinitions = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' },
@@ -46,7 +47,8 @@ export class Example14 {
       createPreHeaderPanel: true,
       showPreHeaderPanel: true,
       preHeaderPanelHeight: 25,
-      explicitInitialization: true
+      explicitInitialization: true,
+      colspanCallback: this.renderDifferentColspan
     };
   }
 
@@ -66,37 +68,28 @@ export class Example14 {
     }
   }
 
-  /** Execute after DataView is created and ready */
-  onDataviewCreated(dataView) {
-    // populate the dataset once the DataView is ready
-    this.getData();
-
-    // render different colspan right after the DataView is filled
-    this.renderDifferentColspan(dataView);
-  }
-
-  /** Call the "getItemMetadata" on the DataView to render different column span */
-  renderDifferentColspan(dataView: any) {
-    dataView.getItemMetadata = (rowNumber: number) => {
-      const item = dataView.getItem(rowNumber);
-
-      if (item.id % 2 === 1) {
-        return {
-          columns: {
-            duration: {
-              colspan: 3
-            }
+  /**
+   * 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
+   * Your return must always be in the form of:: return { columns: {}}
+   */
+  renderDifferentColspan(item: any) {
+    if (item.id % 2 === 1) {
+      return {
+        columns: {
+          duration: {
+            colspan: 3 // "duration" will span over 3 columns
           }
-        };
-      } else {
-        return {
-          columns: {
-            0: {
-              colspan: '*'
-            }
+        }
+      };
+    } else {
+      return {
+        columns: {
+          0: {
+            colspan: '*' // starting at column index 0, we will span accross all column (*)
           }
-        };
-      }
-    };
+        }
+      };
+    }
   }
 }