Merge the angular slickgrid header columns into single header column

Question

In angular slickgrid, i want to merge the multiple column header like column span functionality for rows. Column span applicable for slickgrid row. So i tried with columnGroup property, the header columns are grouped but that grouped column shown in pre-panel. But i want to show in header panel. Give me a solution to achieve my scenario.

Here i shared my grid option and column definition so you can understand what i have tried.

Grid Option

public gridOptions: GridOption = {
    enablePagination: true,
    autoEdit: false,
    rowHeight: 40,
    enableCellNavigation: true,
    editable: true,
    enableAutoResize: true,
    enableSorting: true,
    enableFiltering: true,
    enableExcelExport: true,
    enableExport: true,
    createPreHeaderPanel: true,
    showPreHeaderPanel: true,
    preHeaderPanelHeight: 30,
    i18n: this.translateService,
    gridMenu: {
        hideExportExcelCommand: true,
        hideExportCsvCommand: true
    },
    enableAutoTooltip: true,
    autoTooltipOptions: {
        enableForCells: true,
        enableForHeaderCells: true,
        maxToolTipLength: 1000
    },
    headerMenu: {
        hideColumnHideCommand: true
    },
    autoResize: {
        containerId: this.gridContainerId,
        calculateAvailableSizeBy: 'container'
    },
    exportOptions: {
        exportWithFormatter: true
    },
    excelExportOptions: {
        exportWithFormatter: true,
    },
    enableTranslate: true,
    presets: {
        sorters: [{ columnId: this.tableColumnInfo['pfm138993_institutename']['prop'], direction: 'ASC' }],
    },
    enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
    asyncPostRenderDelay: 0,    // also make sure to remove any delay to render it
    params: {
        angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
    },
    checkboxSelector: {
        // you can toggle these 2 properties to show the "select all" checkbox in different location
        hideInFilterHeaderRow: false,
    },
    rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        selectActiveRow: false,
    },
    enableCheckboxSelector: true,
    enableRowSelection: true
};

Column definition

public tableColumnInfo: { [key: string]: FieldInfo } = {
    pfm138993_cspfmaction1: {
        label: "Approval Action",
        fieldName: "cspfmaction",
        prop: "cspfmaction1",
        fieldType: "ACTION",
        child: "",
        dateFormat: "",
        mappingDetails: "",
        currencyDetails: "",
        actionInfo: [
            {
                actionIcon: "icon-mat-done",
                actionName: "Approve",
                actionType: "cspfmaction2",
                sourceId: "12345",
                uiType: "label-only",
                buttonColor: "#06623b",
                buttonCss: "cs-web-action-button",
                objectName: ""
            }
        ]
    }, pfm138993_cspfmaction2: {
        label: "Webservice Action",
        fieldName: "cspfmaction",
        prop: "cspfmaction2",
        fieldType: "ACTION",
        child: "",
        dateFormat: "",
        mappingDetails: "",
        currencyDetails: "",
        actionInfo: [
            {
                actionIcon: "icon-cs-export-data",
                actionName: "Data Upsert",
                actionType: "cspfmaction2",
                sourceId: "12345",
                uiType: "icon-label",
                buttonColor: "#f0a500",
                buttonText: "#1b1c25",
                buttonCss: "cs-web-action-button",
                objectName: ""
            }
        ]
    },
    pfm138993_lastmodifiedon: {
        label: "Audit",
        fieldName: "lastmodifiedon",
        prop: "lastmodifiedon",
        fieldType: "TIMESTAMP",
        child: "",
        dateFormat: "",
        mappingDetails: "",
        currencyDetails: "",
        actionInfo: [
            {
                actionIcon: "icon-mat-info_outline",
                actionName: "Audit Info",
                actionType: "Who column",
                uiType: "icon-only",
                buttonCss: "cs-web-action-button",
                sourceId: "",
                objectName: "Institute"

            }
        ]
    },
    pfm138993_cspfmaction3: {
        label: "Share",
        fieldName: "cspfmaction",
        prop: "cspfmaction3",
        fieldType: "ACTION",
        child: "",
        dateFormat: "",
        mappingDetails: "",
        currencyDetails: "",
        actionInfo: [{
            "actionIcon": "icon-mat-share",
            "actionName": "Share",
            "actionType": "cspfmaction1",
            "sourceId": "12345",
            "uiType": "icon-only",
            "buttonColor": "#1f4068",
            buttonCss: "cs-web-action-button",
            "objectName": ""
        }
        ]
    }
}

public columnDefinitions: Array<Column> = [
    {
        id: this.tableColumnInfo['pfm138993_cspfmaction1']['prop'],
        nameKey: this.tableColumnInfo['pfm138993_cspfmaction1']['label'],
        field: this.tableColumnInfo['pfm138993_cspfmaction1']['prop'],
        minWidth: 120,
        type: FieldType.unknown,
        formatter: CspfmActionsFormatter,
        params: {
            actionInfo: this.tableColumnInfo['pfm138993_cspfmaction1']['actionInfo']
        },
        filterable: false,
        sortable: false,
        columnGroup: "Action list",
        excludeFromExport: true
    },
    {
        id: this.tableColumnInfo['pfm138993_cspfmaction2']['prop'],
        nameKey: this.tableColumnInfo['pfm138993_cspfmaction2']['label'],
        field: this.tableColumnInfo['pfm138993_cspfmaction2']['prop'],
        minWidth: 120,
        type: FieldType.unknown,
        formatter: CspfmActionsFormatter,
        params: {
            actionInfo: this.tableColumnInfo['pfm138993_cspfmaction2']['actionInfo']
        },
        filterable: false,
        sortable: false,
        columnGroup: "Action list",
        excludeFromExport: true
    },
    {
        id: this.tableColumnInfo['pfm138993_lastmodifiedon']['prop'],
        nameKey: this.tableColumnInfo['pfm138993_lastmodifiedon']['label'],
        field: this.tableColumnInfo['pfm138993_lastmodifiedon']['prop'],
        minWidth: 100,
        type: FieldType.unknown,
        formatter: CspfmActionsFormatter,
        params: {
            actionInfo: this.tableColumnInfo['pfm138993_lastmodifiedon']['actionInfo']
        },
        filterable: false,
        sortable: false,
        excludeFromExport: true,
        columnGroup: "Action list",
        excludeFromHeaderMenu: true
    }
]

Custom Formatter

export const CspfmActionsFormatter: Formatter = (row: number, cell: number, value: any, columnDef: any, dataContext: any, grid: any) => {
  var actionInfo = columnDef['params']['actionInfo'] && columnDef['params']['actionInfo'][0] || {}
  var uiType = actionInfo && actionInfo['uiType'] || 'icon-only';
  var actionIcon = actionInfo && actionInfo['actionIcon'] || '';
  var actionName = actionInfo && actionInfo['actionName'] || '';
  var buttonColor = actionInfo && actionInfo['buttonColor'] || 'var(--ion-color-primary)';
  var buttonText = actionInfo && actionInfo['buttonText'] || 'white';
  var buttonCss = actionInfo && actionInfo['buttonCss'] || '';

  var outputTag = '';
  if (uiType === 'icon-label') {
    outputTag = `
    <div title="${actionName}" style="text-align: center;">
      <span style="color: ${buttonText}; background-color: ${buttonColor}; padding: 7px; border-radius: 5px; text-align: center;" class="${buttonCss}">
        <ion-icon class="${actionIcon}" slot="start"></ion-icon>
        <ion-label>
          ${actionName}
        </ion-label>
      </span>
    </div>
  `;
  } else if (uiType === 'label-only') {
    outputTag = `
    <div title="${actionName}" style="text-align: center;" >
      <ion-label style="color: ${buttonText}; background-color: ${buttonColor}; padding: 5px 10px; border-radius: 5px; text-align: center;" class="${buttonCss}">
        ${actionName}
      </ion-label>
    </div>
  `;
  } else {
    outputTag = `
    <div title="${actionName}" style="text-align: center;">
      <ion-icon class="${actionIcon} ${buttonCss}" slot="icon-only" style="color: ${buttonText}; background-color: ${buttonColor}; padding: 7px; border-radius: 5px; text-align: center;">
      </ion-icon>
    </div>
  `;
  }

  return outputTag;
};

Current Behavior

The header columns are grouped but that grouped column shown in pre-panel.

Expected behavior

I want to merge the multiple column header into single column header

Software Version

Angular : 7.3.5

Angular-Slickgrid : 2.19.0

TypeScript : 3.1.6

Operating System : Windows 10

Node : 10.16.3

NPM : 6.9.0

Answer 1

I found out today that when using the onClick event, you can get to know which buttons/icons got clicked even when having multiple buttons/icons in the same cell.

So for example if you have 1 column named "Action" and you have 2 buttons/icons within that column definition like so

this.columnDefinitions = [
  {
    id: 'action', name: 'Action', field: 'action', width: 120, maxWidth: 120,
    excludeFromExport: true,
    formatter: () => `<span class="mdi mdi-chevron-down mdi-22px"></span> 
      <span class="mdi mdi-help-circle-outline mdi-22px"></span>`,
  },
];

You can use the onClick event and from the event you can find the target which tells you which icon got clicked

<angular-slickgrid 
     gridId="grid2"
     [columnDefinitions]="columnDefinitions" 
     [gridOptions]="gridOptions" 
     [dataset]="dataset"
     (sgOnClick)="handleOnCellClicked($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>

handleOnCellClicked(event, args) {
    if (event.target.classList.contains('mdi-help-circle-outline')) {
      alert('please HELP!!!');
    } else if (event.target.classList.contains('mdi-chevron-down')) {
      alert('do something else...');
    }
  }

and here's the animated gif showing that it works