From a83e958eb86d0d07bde5058ffeff1613d21d4644 Mon Sep 17 00:00:00 2001 From: "Ghislain B." Date: Sat, 20 Jul 2024 14:03:27 -0400 Subject: [PATCH] feat: add `columnPickerLabel` for custom label (#1239) --- .../src/global-grid-options.ts | 8 +++- .../src/models/gridOption.interface.ts | 4 +- .../demo/src/examples/slickgrid/example13.ts | 20 +++++++++- test/cypress/e2e/example13.cy.ts | 40 ++++++++++++++++++- 4 files changed, 65 insertions(+), 7 deletions(-) diff --git a/packages/aurelia-slickgrid/src/global-grid-options.ts b/packages/aurelia-slickgrid/src/global-grid-options.ts index 02a147be2..da9b56075 100644 --- a/packages/aurelia-slickgrid/src/global-grid-options.ts +++ b/packages/aurelia-slickgrid/src/global-grid-options.ts @@ -266,10 +266,14 @@ export const GlobalGridOptions: Partial = { * else we'll simply return the column name title */ function pickerHeaderColumnValueExtractor(column: Column, gridOptions?: GridOption) { + let colName = column?.columnPickerLabel ?? column?.name ?? ''; + if (colName instanceof HTMLElement || colName instanceof DocumentFragment) { + colName = colName.textContent || ''; + } const headerGroup = column?.columnGroup || ''; const columnGroupSeparator = gridOptions?.columnGroupSeparator ?? ' - '; if (headerGroup) { - return headerGroup + columnGroupSeparator + column.name; + return headerGroup + columnGroupSeparator + colName; } - return column?.name ?? ''; + return colName; } diff --git a/packages/aurelia-slickgrid/src/models/gridOption.interface.ts b/packages/aurelia-slickgrid/src/models/gridOption.interface.ts index 5ff2983be..0a9c6b27d 100644 --- a/packages/aurelia-slickgrid/src/models/gridOption.interface.ts +++ b/packages/aurelia-slickgrid/src/models/gridOption.interface.ts @@ -1,9 +1,9 @@ import type { I18N } from '@aurelia/i18n'; -import type { GridOption as UniversalGridOption } from '@slickgrid-universal/common'; +import type { Column, GridOption as UniversalGridOption } from '@slickgrid-universal/common'; import type { RowDetailView } from './rowDetailView.interface'; -export interface GridOption extends UniversalGridOption { +export interface GridOption extends UniversalGridOption { /** I18N translation service instance */ i18n?: I18N; diff --git a/packages/demo/src/examples/slickgrid/example13.ts b/packages/demo/src/examples/slickgrid/example13.ts index 2ee5e4b52..90f5d5036 100644 --- a/packages/demo/src/examples/slickgrid/example13.ts +++ b/packages/demo/src/examples/slickgrid/example13.ts @@ -57,11 +57,27 @@ export class Example13 { /* Define grid Options and Columns */ defineGrid() { + // add a simple button with event listener on 1st column for testing purposes + // a simple button with click event + const nameElementColumn1 = document.createElement('div'); + const btn = document.createElement('button'); + const btnLabel = document.createElement('span'); + btnLabel.className = 'mdi mdi-help-circle no-padding'; + btn.dataset.test = 'col1-hello-btn'; + btn.className = 'btn btn-outline-secondary btn-xs btn-icon ms-1'; + btn.textContent = 'Click me'; + btn.title = 'simple column header test with a button click listener'; + btn.addEventListener('click', () => alert('Hello World')); + btn.appendChild(btnLabel); + nameElementColumn1.appendChild(document.createTextNode('Id ')); + nameElementColumn1.appendChild(btn); + this.columnDefinitions = [ { - id: 'sel', name: '#', field: 'num', width: 40, type: FieldType.number, + id: 'sel', name: nameElementColumn1, field: 'num', type: FieldType.number, + columnPickerLabel: 'Custom Label', // add a custom label for the ColumnPicker/GridMenu when default header value extractor doesn't work for you () + width: 140, maxWidth: 150, excludeFromExport: true, - maxWidth: 70, resizable: true, filterable: true, selectable: false, diff --git a/test/cypress/e2e/example13.cy.ts b/test/cypress/e2e/example13.cy.ts index e5a57b740..52e8f4258 100644 --- a/test/cypress/e2e/example13.cy.ts +++ b/test/cypress/e2e/example13.cy.ts @@ -1,5 +1,5 @@ describe('Example 13 - Grouping & Aggregators', () => { - const fullTitles = ['#', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Cost', 'Effort Driven']; + const fullTitles = ['Id Click me', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Cost', 'Effort Driven']; const GRID_ROW_HEIGHT = 35; it('should display Example title', () => { @@ -182,4 +182,42 @@ describe('Example 13 - Grouping & Aggregators', () => { cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 311'); }); }); + + describe('Column Header with HTML Elements', () => { + it('should trigger an alert when clicking on the 1st column button inside its header', () => { + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('button[data-test=col1-hello-btn]') + .click({ force: true }) + .then(() => expect(stub.getCall(0)).to.be.calledWith('Hello World')); + }); + + it('should open Column Picker and have a "Custom Label" as the 1st column label', () => { + cy.get('#grid13') + .find('.slick-header-column') + .first() + .trigger('mouseover') + .trigger('contextmenu') + .invoke('show'); + + cy.get('.slick-column-picker') + .find('.slick-column-picker-list li:nth-child(1) .checkbox-label') + .should('have.text', 'Custom Label'); + }); + + it('should open Grid Menu and have a "Custom Label" as the 1st column label', () => { + cy.get('#grid13') + .find('button.slick-grid-menu-button') + .trigger('click') + .click({ force: true }); + + cy.get(`.slick-grid-menu:visible`) + .find('.slick-column-picker-list li:nth-child(1) .checkbox-label') + .should('have.text', 'Custom Label'); + + cy.get('[data-dismiss="slick-grid-menu"]') + .click(); + }); + }); });