From d45881e5776aa40ffafa9e3a9db117b7b05df4e9 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 6 Feb 2026 18:11:18 -0500 Subject: [PATCH 01/24] feat: add custom menu slot renderers --- demos/vanilla/src/app-routing.ts | 2 + demos/vanilla/src/app.html | 1 + demos/vanilla/src/examples/example40.html | 47 ++ demos/vanilla/src/examples/example40.ts | 579 ++++++++++++++++++ docs/column-functionalities/cell-menu.md | 5 + docs/grid-functionalities/context-menu.md | 5 + docs/grid-functionalities/grid-menu.md | 5 + .../header-menu-header-buttons.md | 5 + docs/menu-slots.md | 496 +++++++++++++++ .../examples/example-header-menu-slots.html | 227 +++++++ .../common/src/extensions/menuBaseClass.ts | 96 ++- .../interfaces/cellMenuOption.interface.ts | 14 + .../interfaces/contextMenuOption.interface.ts | 14 + .../interfaces/gridMenuOption.interface.ts | 14 + .../interfaces/headerMenuOption.interface.ts | 14 + .../src/interfaces/menuItem.interface.ts | 35 ++ 16 files changed, 1538 insertions(+), 21 deletions(-) create mode 100644 demos/vanilla/src/examples/example40.html create mode 100644 demos/vanilla/src/examples/example40.ts create mode 100644 docs/menu-slots.md create mode 100644 examples/vite-demo-vanilla-bundle/src/examples/example-header-menu-slots.html diff --git a/demos/vanilla/src/app-routing.ts b/demos/vanilla/src/app-routing.ts index 54de24e7ce..3a557e7581 100644 --- a/demos/vanilla/src/app-routing.ts +++ b/demos/vanilla/src/app-routing.ts @@ -37,6 +37,7 @@ import Example36 from './examples/example36.js'; import Example37 from './examples/example37.js'; import Example38 from './examples/example38.js'; import Example39 from './examples/example39.js'; +import Example40 from './examples/example40.js'; import Icons from './examples/icons.js'; import type { RouterConfig } from './interfaces.js'; @@ -84,6 +85,7 @@ export class AppRouting { { route: 'example37', name: 'example37', view: './examples/example37.html', viewModel: Example37, title: 'Example37' }, { route: 'example38', name: 'example38', view: './examples/example38.html', viewModel: Example38, title: 'Example38' }, { route: 'example39', name: 'example39', view: './examples/example39.html', viewModel: Example39, title: 'Example39' }, + { route: 'example40', name: 'example40', view: './examples/example40.html', viewModel: Example40, title: 'Example40' }, { route: '', redirect: 'example01' }, { route: '**', redirect: 'example01' }, ]; diff --git a/demos/vanilla/src/app.html b/demos/vanilla/src/app.html index e665df91ee..5e7542fc5a 100644 --- a/demos/vanilla/src/app.html +++ b/demos/vanilla/src/app.html @@ -79,6 +79,7 @@

Slickgrid-Universal

Example37 - Hybrid Selection Model Example38 - Spreadsheet Drag-Fill Example39 - Master/Detail Grids + Example40 - Menus with Slots diff --git a/demos/vanilla/src/examples/example40.html b/demos/vanilla/src/examples/example40.html new file mode 100644 index 0000000000..b4e9efd3dd --- /dev/null +++ b/demos/vanilla/src/examples/example40.html @@ -0,0 +1,47 @@ +

+ Example 40 - Menus with Slots + (Custom Menu Item Content) +
+ see + + code + +
+

+ +
+

+ + Menu Slots Demo +

+

+ Click on the menu buttons to see the new single slot functionality working across all menu types (Header Menu, Cell + Menu, Context Menu, Grid Menu): +

+ +

+ Note: The demo focuses on the custom rendering capability via slotRenderer and + defaultItemRenderer, which work across all menu plugins (SlickHeaderMenu, SlickCellMenu, SlickContextMenu, + SlickGridMenu). Also note that the keyboard shortcuts displayed in the menus (e.g., Alt+↑, F5) are for demo + purposes only and do not actually trigger any actions. + +

+
+ +
diff --git a/demos/vanilla/src/examples/example40.ts b/demos/vanilla/src/examples/example40.ts new file mode 100644 index 0000000000..4d08c486c2 --- /dev/null +++ b/demos/vanilla/src/examples/example40.ts @@ -0,0 +1,579 @@ +import { BindingEventService } from '@slickgrid-universal/binding'; +import { Filters, Formatters, type Column, type GridOption } from '@slickgrid-universal/common'; +import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle'; +import { ExampleGridOptions } from './example-grid-options.js'; + +interface ReportItem { + id: number; + title: string; + duration: number; + cost: number; + percentComplete: number; + start: Date; + finish: Date; + action?: string; +} + +export default class Example40 { + private _bindingEventService: BindingEventService; + columnDefinitions: Column[]; + gridOptions: GridOption; + dataset: ReportItem[]; + sgb: SlickVanillaGridBundle; + + constructor() { + this._bindingEventService = new BindingEventService(); + } + + attached() { + this.initializeGrid(); + this.dataset = this.loadData(1000); + const gridContainerElm = document.querySelector(`.grid40`) as HTMLDivElement; + + this.sgb = new Slicker.GridBundle( + gridContainerElm, + this.columnDefinitions, + { ...ExampleGridOptions, ...this.gridOptions }, + this.dataset + ); + } + + dispose() { + this.sgb?.dispose(); + this._bindingEventService.unbindAll(); + } + + initializeGrid() { + // This example demonstrates Menu Slot functionality across all menu types: + // - SlickHeaderMenu (Title, Duration, Cost, % Complete columns) + // - SlickCellMenu (Action column with chevron button) + // - SlickContextMenu (right-click context menu) + // - SlickGridMenu (grid menu button) + // All demonstrate: slotRenderer callbacks (item, args) returning strings or HTMLElements + + this.columnDefinitions = [ + { + id: 'title', + name: 'Title', + field: 'title', + sortable: true, + filterable: true, + minWidth: 100, + // Demo: Header Menu with Slot - complete custom HTML with keyboard shortcuts + header: { + menu: { + commandItems: [ + { + command: 'sort-asc', + title: 'Sort Ascending', + positionOrder: 50, + // Slot renderer replaces entire menu item content + slotRenderer: () => ` +
+ + Sort Ascending + Alt+↑ +
+ `, + }, + { + command: 'sort-desc', + title: 'Sort Descending', + positionOrder: 51, + slotRenderer: () => ` +
+ + Sort Descending + Alt+↓ +
+ `, + }, + ], + }, + }, + }, + { + id: 'duration', + name: 'Duration', + field: 'duration', + sortable: true, + filterable: true, + minWidth: 100, + // Demo: Header Menu with Slot - showing badge and status dot + header: { + menu: { + commandItems: [ + { + command: 'column-resize-by-content', + title: 'Resize by Content', + positionOrder: 47, + // Slot renderer with badge + slotRenderer: () => ` +
+ + Resize by Content + NEW +
+ `, + }, + { divider: true, command: '', positionOrder: 48 }, + { + command: 'sort-asc', + title: 'Sort Ascending', + iconCssClass: 'mdi mdi-sort-ascending', + positionOrder: 50, + }, + { + command: 'sort-desc', + title: 'Sort Descending', + iconCssClass: 'mdi mdi-sort-descending', + positionOrder: 51, + }, + { divider: true, command: '', positionOrder: 52 }, + { + command: 'clear-sort', + title: 'Remove Sort', + positionOrder: 58, + // Slot renderer with status indicator + slotRenderer: () => ` +
+ + Remove Sort + +
+ `, + }, + ], + }, + }, + }, + { + id: 'start', + name: 'Start', + field: 'start', + sortable: true, + formatter: Formatters.dateIso, + filterable: true, + filter: { model: Filters.compoundDate }, + minWidth: 100, + }, + { + id: 'finish', + name: 'Finish', + field: 'finish', + sortable: true, + formatter: Formatters.dateIso, + filterable: true, + filter: { model: Filters.dateRange }, + minWidth: 100, + }, + { + id: 'cost', + name: 'Cost', + field: 'cost', + width: 90, + sortable: true, + filterable: true, + formatter: Formatters.dollar, + // Demo: Header Menu with Slot - showing slotRenderer with callback (item, args) + header: { + menu: { + commandItems: [ + { + command: 'custom-action', + title: 'Advanced Export', + // Demo: Native HTMLElement with event listeners using slotRenderer (full DOM control) + slotRenderer: (item, _args) => { + const containerDiv = document.createElement('div'); + containerDiv.style.cssText = 'display: flex; align-items: center;'; + + const iconDiv = document.createElement('div'); + iconDiv.style.cssText = + 'width: 18px; height: 18px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 3px; display: flex; align-items: center; justify-content: center; margin-right: 4px; transition: transform 0.2s;'; + iconDiv.innerHTML = '📊'; + + const textSpan = document.createElement('span'); + textSpan.style.cssText = 'flex: 1;'; + textSpan.textContent = item.title; + + const kbdElm = document.createElement('kbd'); + kbdElm.style.cssText = + 'background: #eee; border: 1px solid #ccc; border-radius: 2px; padding: 2px 4px; font-size: 10px; margin-left: 10px; display: inline-flex; align-items: center; height: 18px;'; + kbdElm.textContent = 'Ctrl+E'; + + containerDiv.appendChild(iconDiv); + containerDiv.appendChild(textSpan); + containerDiv.appendChild(kbdElm); + + // Add native event listeners for hover effects + containerDiv.addEventListener('mouseenter', () => { + iconDiv.style.transform = 'scale(1.1)'; + containerDiv.style.backgroundColor = '#f5f5f5'; + }); + containerDiv.addEventListener('mouseleave', () => { + iconDiv.style.transform = 'scale(1)'; + containerDiv.style.backgroundColor = ''; + }); + + return containerDiv; + }, + action: (_e, _args) => { + alert('Custom export action triggered!'); + }, + }, + { divider: true, command: '', positionOrder: 48 }, + { + command: 'filter-column', + title: 'Filter Column', + positionOrder: 55, + // Slot renderer with status indicator and beta badge + slotRenderer: () => ` +
+ + Filter Column + BETA +
+ `, + }, + ], + }, + }, + }, + { + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + sortable: true, + filterable: true, + filter: { model: Filters.slider, operator: '>=' }, + // Demo: Header Menu with Slot - showing interactive element (checkbox) + header: { + menu: { + commandItems: [ + { + command: 'auto-refresh', + title: 'Auto Refresh', + positionOrder: 45, + iconCssClass: 'mdi mdi-refresh', + }, + ], + }, + }, + }, + { + id: 'action', + name: 'Action', + field: 'action', + width: 70, + minWidth: 70, + maxWidth: 70, + cssClass: 'justify-center flex', + formatter: () => `
`, + excludeFromExport: true, + // Demo: Cell Menu with slot examples (demonstrating defaultItemRenderer at menu level) + cellMenu: { + hideCloseButton: false, + commandTitle: 'Cell Actions', + // Demo: Menu-level default renderer that applies to all items unless overridden + defaultItemRenderer: (item, _args) => { + return ` +
+ ${item.iconCssClass ? `` : '◦'} + ${item.title} +
+ `; + }, + commandItems: [ + { + command: 'copy-cell', + title: 'Copy Cell Value', + positionOrder: 50, + iconCssClass: 'mdi mdi-content-copy', + action: (_e, args) => { + console.log('Copy cell value:', args.dataContext[args.column.field]); + alert(`Copied: ${args.dataContext[args.column.field]}`); + }, + }, + 'divider', + { + command: 'export-row', + title: 'Export Row', + positionOrder: 51, + iconCssClass: 'mdi mdi-download', + action: (_e, args) => { + console.log('Export row:', args.dataContext); + alert(`Export row #${args.dataContext.id}`); + }, + }, + { + command: 'export', + title: 'Export', + positionOrder: 52, + iconCssClass: 'mdi mdi-download', + commandItems: [ + { + command: 'export-excel', + title: 'Export as Excel', + iconCssClass: 'mdi mdi-file-excel-outline text-success', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to Excel`); + }, + }, + { + command: 'export-csv', + title: 'Export as CSV', + iconCssClass: 'mdi mdi-file-document-outline', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to CSV`); + }, + }, + { + command: 'export-pdf', + title: 'Export as PDF', + iconCssClass: 'mdi mdi-file-pdf-outline text-red', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to PDF`); + }, + }, + ], + }, + { divider: true, command: '', positionOrder: 52 }, + { + command: 'edit-row', + title: 'Edit Row', + positionOrder: 53, + // Individual slotRenderer overrides the defaultItemRenderer + slotRenderer: (_item, args) => ` +
+
+ ✎ +
+ Edit Row #${args.dataContext.id} +
+ `, + action: (_e, args) => { + console.log('Edit row:', args.dataContext); + alert(`Edit row #${args.dataContext.id}`); + }, + }, + { + command: 'delete-row', + title: 'Delete Row', + positionOrder: 54, + iconCssClass: 'mdi mdi-delete', + action: (_e, args) => { + if (confirm(`Delete row #${args.dataContext.id}?`)) { + console.log('Delete row:', args.dataContext); + alert(`Deleted row #${args.dataContext.id}`); + } + }, + }, + ], + }, + }, + ]; + + this.gridOptions = { + autoResize: { + container: '.demo-container', + }, + enableAutoResize: true, + enableCellNavigation: true, + enableFiltering: true, + enableSorting: true, + + // Header Menu with slots (already configured in columns above) + enableHeaderMenu: true, + headerMenu: { + hideColumnHideCommand: false, + // Demo: Menu-level default renderer for all header menu items + defaultItemRenderer: (item, _args) => { + return ` +
+ ${item.iconCssClass ? `` : ''} + ${item.title} +
+ `; + }, + }, + + // Cell Menu with slots (configured in the Action column above) + enableCellMenu: true, + + // Context Menu with slot examples + enableContextMenu: true, + contextMenu: { + // Demo: Menu-level default renderer for context menu items + defaultItemRenderer: (item, _args) => { + return ` +
+ ${item.iconCssClass ? `` : ''} + ${item.title} +
+ `; + }, + commandItems: [ + { + positionOrder: 60, + command: 'edit-cell', + title: 'Edit Cell', + // Demo: Individual slotRenderer overrides the menu's defaultItemRenderer + slotRenderer: (item, _args) => { + const containerDiv = document.createElement('div'); + containerDiv.style.cssText = 'display: flex; align-items: center;'; + + const iconDiv = document.createElement('div'); + iconDiv.style.cssText = + 'width: 18px; height: 18px; background: linear-gradient(135deg, #00c853 0%, #64dd17 100%); border-radius: 3px; display: flex; align-items: center; justify-content: center; margin-right: 4px; transition: all 0.2s;'; + iconDiv.innerHTML = '✎'; + + const textSpan = document.createElement('span'); + textSpan.style.cssText = 'flex: 1;'; + textSpan.textContent = item.title; + + const kbdElm = document.createElement('kbd'); + kbdElm.style.cssText = + 'background: #eee; border: 1px solid #ccc; border-radius: 2px; padding: 2px 4px; font-size: 10px; margin-left: 10px; display: inline-flex; align-items: center; height: 18px;'; + kbdElm.textContent = 'F2'; + + containerDiv.appendChild(iconDiv); + containerDiv.appendChild(textSpan); + containerDiv.appendChild(kbdElm); + + // Native event listeners for interactive effects + containerDiv.addEventListener('mouseenter', () => { + iconDiv.style.transform = 'rotate(15deg) scale(1.1)'; + iconDiv.style.boxShadow = '0 2px 8px rgba(0,200,83,0.4)'; + }); + containerDiv.addEventListener('mouseleave', () => { + iconDiv.style.transform = 'rotate(0deg) scale(1)'; + iconDiv.style.boxShadow = 'none'; + }); + + return containerDiv; + }, + action: () => alert('Edit cell'), + }, + { divider: true, command: '' }, + { + command: 'export', + title: 'Export', + iconCssClass: 'mdi mdi-download', + commandItems: [ + { + command: 'export-excel', + title: 'Export as Excel', + iconCssClass: 'mdi mdi-file-excel-outline text-success', + action: () => alert('Export to Excel'), + }, + { + command: 'export-csv', + title: 'Export as CSV', + iconCssClass: 'mdi mdi-file-document-outline', + action: () => alert('Export to CSV'), + }, + { + command: 'export-pdf', + title: 'Export as PDF', + iconCssClass: 'mdi mdi-file-pdf-outline text-danger', + action: () => alert('Export to PDF'), + }, + ], + }, + { divider: true, command: '' }, + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete', + action: () => alert('Delete row'), + }, + ], + }, + + // Grid Menu with slot examples (demonstrating defaultItemRenderer at menu level) + enableGridMenu: true, + gridMenu: { + // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) + defaultItemRenderer: (item, _args) => { + return ` +
+ ${item.iconCssClass ? `` : ''} + ${item.title} +
+ `; + }, + commandItems: [ + { + command: 'toggle-filter', + title: 'Toggle Filter Row', + iconCssClass: 'mdi mdi-filter-outline', + action: () => alert('Toggle filter row'), + }, + { + command: 'clear-filters', + title: 'Clear All Filters', + iconCssClass: 'mdi mdi-filter-remove-outline', + action: () => alert('Clear filters'), + }, + { divider: true, command: '' }, + { + command: 'export-excel', + title: 'Export to Excel', + iconCssClass: 'mdi mdi-file-excel-outline', + action: () => alert('Export to Excel'), + }, + { + command: 'export-csv', + title: 'Export to CSV', + iconCssClass: 'mdi mdi-download', + // Individual slotRenderer overrides the defaultItemRenderer for this item + slotRenderer: (item, _args) => ` +
+ + ${item.title} + CUSTOM +
+ `, + action: () => alert('Export to CSV'), + }, + { + command: 'refresh-data', + title: 'Refresh Data', + iconCssClass: 'mdi mdi-refresh', + // Demo: slotRenderer with keyboard shortcut + slotRenderer: (item) => ` +
+ + ${item.title} + F5 +
+ `, + action: () => alert('Refresh data'), + }, + ], + }, + }; + } + + loadData(count: number): ReportItem[] { + const tmpData: ReportItem[] = []; + for (let i = 0; i < count; i++) { + const randomDuration = Math.round(Math.random() * 100); + const randomYear = 2000 + Math.floor(Math.random() * 10); + const randomMonth = Math.floor(Math.random() * 11); + const randomDay = Math.floor(Math.random() * 29); + const randomPercent = Math.round(Math.random() * 100); + + tmpData[i] = { + id: i, + title: 'Task ' + i, + duration: randomDuration, + cost: Math.round(Math.random() * 10000) / 100, + percentComplete: randomPercent, + start: new Date(randomYear, randomMonth, randomDay), + finish: new Date(randomYear, randomMonth + 1, randomDay), + }; + } + return tmpData; + } +} diff --git a/docs/column-functionalities/cell-menu.md b/docs/column-functionalities/cell-menu.md index 8dbbb14c5c..32a869b81f 100644 --- a/docs/column-functionalities/cell-menu.md +++ b/docs/column-functionalities/cell-menu.md @@ -140,6 +140,11 @@ this.gridOptions = { }; ``` +### Custom Menu Item Rendering +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. + +See [Custom Menu Slots](../../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. + ### Override Callback Methods What if you want to dynamically disable or hide a Command/Option or even disable the entire menu in certain circumstances? For these cases, you would use the override callback methods, the method must return a `boolean`. The list of override available are the following - `menuUsabilityOverride` returning false would make the Cell Menu unavailable to the user diff --git a/docs/grid-functionalities/context-menu.md b/docs/grid-functionalities/context-menu.md index 4b9ecd1b42..e7f883b257 100644 --- a/docs/grid-functionalities/context-menu.md +++ b/docs/grid-functionalities/context-menu.md @@ -122,6 +122,11 @@ contextMenu: { } ``` +### Custom Menu Item Rendering +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. + ### Override Callback Methods What if you want to dynamically disable or hide a Command/Option or even disable the entire menu in certain circumstances? For these cases, you would use the override callback methods, the method must return a `boolean`. The list of override available are the following - `menuUsabilityOverride` returning false would make the Context Menu unavailable to the user diff --git a/docs/grid-functionalities/grid-menu.md b/docs/grid-functionalities/grid-menu.md index e69d0c03ee..1fc525998f 100644 --- a/docs/grid-functionalities/grid-menu.md +++ b/docs/grid-functionalities/grid-menu.md @@ -105,6 +105,11 @@ gridMenu: { For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/extensions/slickGridMenu.ts) itself. +### Custom Menu Item Rendering +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultItemRenderer` callbacks. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. + ### How to change an icon of all default commands? You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults. ```ts diff --git a/docs/grid-functionalities/header-menu-header-buttons.md b/docs/grid-functionalities/header-menu-header-buttons.md index 555e7ca51c..4f785f43fb 100644 --- a/docs/grid-functionalities/header-menu-header-buttons.md +++ b/docs/grid-functionalities/header-menu-header-buttons.md @@ -58,6 +58,11 @@ There are 2 callback hooks which are accessible in the Grid Options For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/extensions/slickHeaderButtons.ts) itself. +### Custom Menu Item Rendering +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultItemRenderer` callbacks. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. + ### How to change icon(s) of the default commands? You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults. ```ts diff --git a/docs/menu-slots.md b/docs/menu-slots.md new file mode 100644 index 0000000000..74d892b2c3 --- /dev/null +++ b/docs/menu-slots.md @@ -0,0 +1,496 @@ +## Custom Menu Slots - Rendering + +All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cross-framework compatible slot rendering** for custom content injection in menu items. This is achieved through the `slotRenderer` callback at the item level combined with an optional `defaultItemRenderer` at the menu level. + +### Core Concept + +Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. + +### Slot Renderer Callback + +```typescript +slotRenderer?: (item: any, args: any, event?: Event) => string | HTMLElement +``` + +- **item** - The menu item object containing command, title, iconCssClass, etc. +- **args** - The callback args providing access to grid, column, dataContext, and other context +- **event** - Optional DOM event passed during click handling (allows `stopPropagation()`) + +### Basic Example - HTML String Rendering + +```typescript +const menuItem = { + command: 'custom-command', + title: 'Custom Action', + iconCssClass: 'mdi mdi-star', + // Return custom HTML string for the entire menu item + slotRenderer: () => ` +
+ + Custom Action + NEW +
+ ` +}; +``` + +### Advanced Example - HTMLElement Objects + +```typescript +// Create custom element with full DOM control +const menuItem = { + command: 'notifications', + title: 'Notifications', + // Return HTMLElement for more control and event listeners + slotRenderer: (item, args) => { + const container = document.createElement('div'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + + const icon = document.createElement('i'); + icon.className = 'mdi mdi-bell'; + icon.style.marginRight = '8px'; + + const text = document.createElement('span'); + text.textContent = item.title; + + const badge = document.createElement('span'); + badge.className = 'badge'; + badge.textContent = '5'; + badge.style.marginLeft = 'auto'; + + container.appendChild(icon); + container.appendChild(text); + container.appendChild(badge); + + return container; + } +}; +``` + +### Default Menu-Level Renderer + +Set a `defaultItemRenderer` at the menu option level to apply to all items (unless overridden by individual `slotRenderer`): + +```typescript +const menuOption = { + // Apply this renderer to all menu items (can be overridden per item) + defaultItemRenderer: (item, args) => { + return ` +
+ ${item.iconCssClass ? `` : ''} + ${item.title} +
+ `; + }, + commandItems: [ + { + command: 'action-1', + title: 'Action One', + iconCssClass: 'mdi mdi-check', + // This item uses defaultItemRenderer + }, + { + command: 'custom', + title: 'Custom Item', + // This item overrides defaultItemRenderer with its own slotRenderer + slotRenderer: () => ` +
+ Custom rendering overrides default +
+ ` + } + ] +}; +``` + +### Menu Types & Configuration + +The `slotRenderer` and `defaultItemRenderer` work identically across all menu plugins: + +#### Header Menu +```typescript +const columnDef = { + id: 'name', + header: { + menu: { + defaultItemRenderer: (item, args) => `
${item.title}
`, + commandItems: [ + { + command: 'sort', + title: 'Sort', + slotRenderer: () => '
Custom sort
' + } + ] + } + } +}; +``` + +#### Cell Menu +```typescript +const columnDef = { + id: 'action', + cellMenu: { + defaultItemRenderer: (item, args) => `
${item.title}
`, + commandItems: [ + { + command: 'edit', + title: 'Edit', + slotRenderer: (item, args) => `
Edit row ${args.dataContext.id}
` + } + ] + } +}; +``` + +#### Context Menu +```typescript +const gridOptions = { + enableContextMenu: true, + contextMenu: { + defaultItemRenderer: (item, args) => `
${item.title}
`, + commandItems: [ + { + command: 'export', + title: 'Export', + slotRenderer: () => '
📊 Export data
' + } + ] + } +}; +``` + +#### Grid Menu +```typescript +const gridOptions = { + enableGridMenu: true, + gridMenu: { + defaultItemRenderer: (item, args) => `
${item.title}
`, + commandItems: [ + { + command: 'refresh', + title: 'Refresh', + slotRenderer: () => '
🔄 Refresh data
' + } + ] + } +}; +``` + +### Framework Integration Examples + +#### Vanilla JavaScript +```typescript +const menuItem = { + command: 'custom', + title: 'Action', + slotRenderer: () => ` + + ` +}; +``` + +#### Angular - Dynamic Components +```typescript +// In component class +const menuItem = { + command: 'with-component', + title: 'With Angular Component', + slotRenderer: (item, args) => { + // Create a placeholder element + const placeholder = document.createElement('div'); + placeholder.id = `angular-slot-${Date.now()}`; + + // Schedule component creation for after rendering + setTimeout(() => { + const element = document.getElementById(placeholder.id); + if (element) { + const componentRef = this.viewContainerRef.createComponent(MyComponent); + element.appendChild(componentRef.location.nativeElement); + } + }, 0); + + return placeholder; + } +}; +``` + +#### React - Using Hooks +```typescript +// Define menu item with slotRenderer +const menuItem = { + command: 'with-react', + title: 'With React Component', + slotRenderer: (item, args) => { + const container = document.createElement('div'); + container.id = `react-slot-${Date.now()}`; + + // Schedule component render for after menu renders + setTimeout(() => { + const element = document.getElementById(container.id); + if (element) { + ReactDOM.render(, element); + } + }, 0); + + return container; + } +}; +``` + +#### Vue - Using createApp +```typescript +// Define menu item with slotRenderer +const menuItem = { + command: 'with-vue', + title: 'With Vue Component', + slotRenderer: (item, args) => { + const container = document.createElement('div'); + container.id = `vue-slot-${Date.now()}`; + + // Schedule component mount for after menu renders + setTimeout(() => { + const element = document.getElementById(container.id); + if (element && !element._appInstance) { + const app = createApp(MyComponent, { data: args }); + app.mount(element); + element._appInstance = app; + } + }, 0); + + return container; + } +}; +``` + +### Real-World Use Cases + +#### 1. Add Keyboard Shortcuts +```typescript +{ + command: 'copy', + title: 'Copy', + iconCssClass: 'mdi mdi-content-copy', + slotRenderer: () => ` +
+ + Copy + Ctrl+C +
+ ` +} +``` + +#### 2. Add Status Indicators +```typescript +{ + command: 'filter', + title: 'Filter', + iconCssClass: 'mdi mdi-filter', + slotRenderer: () => ` +
+ + Filter + +
+ ` +} +``` + +#### 3. Add Dynamic Content Based on Context +```typescript +{ + command: 'edit-row', + title: 'Edit Row', + slotRenderer: (item, args) => ` +
+ + Edit Row #${args.dataContext?.id || 'N/A'} +
+ ` +} +``` + +#### 4. Add Interactive Elements +```typescript +{ + command: 'toggle-setting', + title: 'Auto Refresh', + slotRenderer: (item, args, event) => { + const container = document.createElement('label'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + container.style.gap = '8px'; + container.style.marginRight = 'auto'; + + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.addEventListener('change', (e) => { + // Prevent menu item click from firing when toggling checkbox + event?.stopPropagation?.(); + console.log('Auto refresh:', checkbox.checked); + }); + + const label = document.createElement('span'); + label.textContent = item.title; + + container.appendChild(label); + container.appendChild(checkbox); + return container; + } +} +``` + +#### 5. Add Badges and Status Labels +```typescript +{ + command: 'export-excel', + title: 'Export as Excel', + slotRenderer: (item, args) => ` +
+ + ${item.title} + RECOMMENDED +
+ ` +} +``` + +#### 6. Gradient and Styled Icons +```typescript +{ + command: 'advanced-export', + title: 'Advanced Export', + slotRenderer: (item, args) => { + const container = document.createElement('div'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + container.style.gap = '8px'; + + const iconDiv = document.createElement('div'); + iconDiv.style.width = '20px'; + iconDiv.style.height = '20px'; + iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; + iconDiv.style.borderRadius = '4px'; + iconDiv.style.display = 'flex'; + iconDiv.style.alignItems = 'center'; + iconDiv.style.justifyContent = 'center'; + iconDiv.style.color = 'white'; + iconDiv.style.fontSize = '12px'; + iconDiv.innerHTML = '📊'; + + const textSpan = document.createElement('span'); + textSpan.textContent = item.title; + + container.appendChild(iconDiv); + container.appendChild(textSpan); + return container; + } +} +``` + +### Notes and Best Practices + +- **HTML strings** are inserted via `innerHTML` - ensure content is sanitized if user-provided +- **HTMLElement objects** are appended directly - safer for dynamic content and allows event listeners +- **Cross-framework compatible** - works in vanilla JS, Angular, React, Vue, Aurelia using the same API +- **Priority order** - Item-level `slotRenderer` overrides menu-level `defaultItemRenderer` +- **Accessibility** - Include proper ARIA attributes when creating custom elements +- **Event handling** - Call `event.stopPropagation()` in interactive elements to prevent menu commands from firing +- **Default fallback** - If neither `slotRenderer` nor `defaultItemRenderer` is provided, the default icon + text rendering is used +- **Performance** - Avoid heavy DOM manipulation inside renderer callbacks (they may be called multiple times) +- **Event parameter** - The optional `event` parameter is passed during click handling and allows you to control menu behavior +- **All menus supported** - This API works uniformly across Header Menu, Cell Menu, Context Menu, and Grid Menu + +### Styling Custom Menu Items + +```css +/* Example CSS for styled menu items */ +.slick-menu-item { + padding: 4px 8px; +} + +.slick-menu-item div { + display: flex; + align-items: center; + gap: 8px; +} + +.slick-menu-item kbd { + background: #f0f0f0; + border: 1px solid #ddd; + border-radius: 3px; + padding: 2px 6px; + font-size: 11px; + font-family: monospace; + color: #666; +} + +.slick-menu-item .badge { + background: #ff6b6b; + color: white; + padding: 2px 6px; + border-radius: 3px; + font-size: 9px; + font-weight: bold; + white-space: nowrap; +} + +.slick-menu-item:hover { + background: #f5f5f5; +} + +.slick-menu-item.slick-menu-item-disabled { + opacity: 0.5; + cursor: not-allowed; +} +``` + +### Migration from Static Rendering + +**Before (Static HTML Title):** +```typescript +{ + command: 'action', + title: 'Action ⭐', // Emoji embedded in title + iconCssClass: 'mdi mdi-star' +} +``` + +**After (Custom Rendering):** +```typescript +{ + command: 'action', + title: 'Action', + slotRenderer: () => ` +
+ + Action + ⭐ +
+ ` +} +``` + +### Error Handling + +When creating custom renderers, handle potential errors gracefully: + +```typescript +{ + command: 'safe-render', + title: 'Safe Render', + slotRenderer: (item, args) => { + try { + if (args?.dataContext?.status === 'error') { + return `
❌ Error loading
`; + } + return `
✓ Data loaded
`; + } catch (error) { + console.error('Render error:', error); + return '
Render error
'; + } + } +} +``` diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example-header-menu-slots.html b/examples/vite-demo-vanilla-bundle/src/examples/example-header-menu-slots.html new file mode 100644 index 0000000000..8c5544182c --- /dev/null +++ b/examples/vite-demo-vanilla-bundle/src/examples/example-header-menu-slots.html @@ -0,0 +1,227 @@ + + + + + + Header Menu with Slots - Example + + + +

Header Menu with Slots - Example

+

This example demonstrates the new slot functionality in Header Menu items.

+ +
+ +
+

Slot Examples Demonstrated:

+
    +
  • Resize by Content - Badge using slotContentAfter (HTML string)
    • +
  • Sort Commands - Keyboard shortcuts using slotContentAfter
    • +
  • Clear Sort - Status indicator using slotIconAfter (HTMLElement)
    • +
  • Custom Action - Custom renderer with complete control
    • +
+
+ + + + diff --git a/packages/common/src/extensions/menuBaseClass.ts b/packages/common/src/extensions/menuBaseClass.ts index e2ed767321..c20b33cd2b 100644 --- a/packages/common/src/extensions/menuBaseClass.ts +++ b/packages/common/src/extensions/menuBaseClass.ts @@ -131,6 +131,28 @@ export class MenuBaseClass string | HTMLElement, + item: any, + args: any + ): void { + const result = slotRenderer(item, args); + if (typeof result === 'string') { + parentElm.innerHTML = this.grid.sanitizeHtmlString(result); + } else if (result instanceof HTMLElement) { + parentElm.appendChild(result); + } + } + protected addSubMenuTitleWhenExists(item: ExtractMenuType, commandOrOptionMenu: HTMLDivElement): void { if (item !== 'divider' && (item as MenuCommandItem | MenuOptionItem | GridMenuItem)?.subMenuTitle) { const subMenuTitleElm = document.createElement('div'); @@ -288,27 +310,47 @@ export class MenuBaseClass) => - itemClickCallback.call(this, e, itemType, item, level, args?.column)) as EventListener, + ((e: DOMMouseOrTouchEvent) => { + // If there's a slotRenderer, call it with the event + const slotRenderer = (item as MenuCommandItem | MenuOptionItem).slotRenderer || (this._addonOptions as any).defaultItemRenderer; + if (slotRenderer) { + slotRenderer(item as MenuCommandItem | MenuOptionItem, args, e); + } + + // If the click was stopped by an interactive element handler, don't trigger the menu action + if (e.defaultPrevented) { + return; + } + + itemClickCallback.call(this, e, itemType, item, level, args?.column); + }) as EventListener, undefined, eventGroupName ); diff --git a/packages/common/src/interfaces/cellMenuOption.interface.ts b/packages/common/src/interfaces/cellMenuOption.interface.ts index 39cfe7c1aa..04ebe5ff0a 100644 --- a/packages/common/src/interfaces/cellMenuOption.interface.ts +++ b/packages/common/src/interfaces/cellMenuOption.interface.ts @@ -79,6 +79,20 @@ export interface CellMenuOption { // -- // action/override callbacks + /** + * Default slot renderer for all menu items. + * This will be used as the default renderer for all items unless overridden by an individual item's `slotRenderer`. + * The renderer receives both the menu item and args for full context access. + * + * @param item - The menu item object (MenuCommandItem or MenuOptionItem) + * @param args - The callback args providing access to grid, column, dataContext, etc. + * @returns Either an HTML string or an HTMLElement + * + * @example + * defaultItemRenderer: (item, args) => `
${item.title}
` + */ + defaultItemRenderer?: (item: any, args: any) => string | HTMLElement; + /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ menuUsabilityOverride?: (args: MenuCallbackArgs) => boolean; } diff --git a/packages/common/src/interfaces/contextMenuOption.interface.ts b/packages/common/src/interfaces/contextMenuOption.interface.ts index 04375fb1fa..a83aaf65a9 100644 --- a/packages/common/src/interfaces/contextMenuOption.interface.ts +++ b/packages/common/src/interfaces/contextMenuOption.interface.ts @@ -134,6 +134,20 @@ export interface ContextMenuOption { // -- // action/override callbacks + /** + * Default slot renderer for all menu items. + * This will be used as the default renderer for all items unless overridden by an individual item's `slotRenderer`. + * The renderer receives both the menu item and args for full context access. + * + * @param item - The menu item object (MenuCommandItem or MenuOptionItem) + * @param args - The callback args providing access to grid, column, dataContext, etc. + * @returns Either an HTML string or an HTMLElement + * + * @example + * defaultItemRenderer: (item, args) => `
${item.title}
` + */ + defaultItemRenderer?: (item: any, args: any) => string | HTMLElement; + /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ menuUsabilityOverride?: (args: MenuCallbackArgs) => boolean; } diff --git a/packages/common/src/interfaces/gridMenuOption.interface.ts b/packages/common/src/interfaces/gridMenuOption.interface.ts index 3fe30b59d1..32f7e92f16 100644 --- a/packages/common/src/interfaces/gridMenuOption.interface.ts +++ b/packages/common/src/interfaces/gridMenuOption.interface.ts @@ -189,6 +189,20 @@ export interface GridMenuOption { // -- // action/override callbacks + /** + * Default slot renderer for all menu items. + * This will be used as the default renderer for all items unless overridden by an individual item's `slotRenderer`. + * The renderer receives both the menu item and args for full context access. + * + * @param item - The menu item object (MenuCommandItem or MenuOptionItem) + * @param args - The callback args providing access to grid, column, dataContext, etc. + * @returns Either an HTML string or an HTMLElement + * + * @example + * defaultItemRenderer: (item, args) => `
${item.title}
` + */ + defaultItemRenderer?: (item: any, args: any) => string | HTMLElement; + /** Callback method to override the column name output used by the ColumnPicker/GridMenu. */ headerColumnValueExtractor?: (column: Column, gridOptions?: GridOption) => string | HTMLElement | DocumentFragment; diff --git a/packages/common/src/interfaces/headerMenuOption.interface.ts b/packages/common/src/interfaces/headerMenuOption.interface.ts index a34af91931..3fe873e03e 100644 --- a/packages/common/src/interfaces/headerMenuOption.interface.ts +++ b/packages/common/src/interfaces/headerMenuOption.interface.ts @@ -99,6 +99,20 @@ export interface HeaderMenuOption { // -- // Methods + /** + * Default slot renderer for all menu items. + * This will be used as the default renderer for all items unless overridden by an individual item's `slotRenderer`. + * The renderer receives both the menu item and args for full context access. + * + * @param item - The menu item object (MenuCommandItem or MenuOptionItem) + * @param args - The callback args providing access to grid, column, dataContext, etc. + * @returns Either an HTML string or an HTMLElement + * + * @example + * defaultItemRenderer: (item, args) => `
${item.title}
` + */ + defaultItemRenderer?: (item: any, args: any) => string | HTMLElement; + /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ menuUsabilityOverride?: (args: { grid: SlickGrid; column: Column; menu: HTMLElement }) => boolean; } diff --git a/packages/common/src/interfaces/menuItem.interface.ts b/packages/common/src/interfaces/menuItem.interface.ts index fb541b8db0..1d4bffa31d 100644 --- a/packages/common/src/interfaces/menuItem.interface.ts +++ b/packages/common/src/interfaces/menuItem.interface.ts @@ -43,6 +43,41 @@ export interface MenuItem { /** Item tooltip to show while hovering the command. */ tooltip?: string; + // -- + // Slot support for custom content injection (cross-framework compatible) + + /** + * Slot renderer callback for the entire menu item. + * @param item - The menu item object + * @param args - The callback args providing access to grid, column, dataContext, etc. + * @param event - Optional DOM event (passed during click handling) that allows the renderer to call stopPropagation() + * @returns Either an HTML string or an HTMLElement + * + * @example + * // Return HTML string + * slotRenderer: (item, args) => `
${item.title}
` + * + * // Return HTMLElement with event listeners + * slotRenderer: (item, args) => { + * const div = document.createElement('div'); + * div.textContent = `${item.title} (Row ${args.dataContext.id})`; + * div.addEventListener('click', () => console.log('clicked')); + * return div; + * } + * + * // Interactive element that prevents menu action + * slotRenderer: (item, args, event) => { + * const checkbox = document.createElement('input'); + * checkbox.type = 'checkbox'; + * checkbox.addEventListener('change', (e) => { + * event?.stopPropagation(); // Stop the menu item click from firing + * console.log('checkbox toggled'); + * }); + * return checkbox; + * } + */ + slotRenderer?: (item: any, args: O, event?: Event) => string | HTMLElement; + // -- // action/override callbacks From 30bdb7b3bf001407b66550a71eade54e7705fccf Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Tue, 10 Feb 2026 00:09:00 -0500 Subject: [PATCH 02/24] chore: improve slot demo & code implementation --- demos/vanilla/src/examples/example12.ts | 2 +- demos/vanilla/src/examples/example40.html | 22 +- demos/vanilla/src/examples/example40.scss | 137 +++++++++++ demos/vanilla/src/examples/example40.ts | 223 ++++++++++-------- packages/common/src/extensions/index.ts | 1 + .../common/src/extensions/menuBaseClass.ts | 104 +++----- .../interfaces/cellMenuOption.interface.ts | 25 +- .../interfaces/contextMenuOption.interface.ts | 25 +- .../interfaces/gridMenuOption.interface.ts | 32 +-- .../interfaces/headerMenuOption.interface.ts | 25 +- .../src/interfaces/menuItem.interface.ts | 11 - .../src/interfaces/menuOption.interface.ts | 32 +++ 12 files changed, 347 insertions(+), 292 deletions(-) create mode 100644 demos/vanilla/src/examples/example40.scss create mode 100644 packages/common/src/interfaces/menuOption.interface.ts diff --git a/demos/vanilla/src/examples/example12.ts b/demos/vanilla/src/examples/example12.ts index d9a0bfb4dd..91374ac716 100644 --- a/demos/vanilla/src/examples/example12.ts +++ b/demos/vanilla/src/examples/example12.ts @@ -240,7 +240,7 @@ export default class Example12 { minValue: 0, maxValue: 100, }, - customTooltip: { position: 'center' }, + customTooltip: { position: 'center' }, }, // { // id: 'percentComplete2', name: '% Complete', field: 'analysis.percentComplete', minWidth: 100, diff --git a/demos/vanilla/src/examples/example40.html b/demos/vanilla/src/examples/example40.html index b4e9efd3dd..b5fa4aa2b2 100644 --- a/demos/vanilla/src/examples/example40.html +++ b/demos/vanilla/src/examples/example40.html @@ -1,6 +1,10 @@

Example 40 - Menus with Slots - (Custom Menu Item Content) + (Custom Menu Item Renderer) + +
see

-
+

- Menu Slots Demo + Menu Slots Demo with Custom Renderer

Click on the menu buttons to see the new single slot functionality working across all menu types (Header Menu, Cell Menu, Context Menu, Grid Menu):

-
    -
  • - Header Menu - Click column header buttons (⋮) to see custom HTML with keyboard shortcuts, badges, and interactive - elements -
    • -
  • - Cell Menu - Click the chevron button (⌄) in the Action column to see cell-specific commands with - slots -
    • -
  • Context Menu - Right-click on any cell to see edit/delete commands with custom rendering
    • -
  • Grid Menu - Click the grid menu button (top-right) to see filter/export commands with status indicators
    • -

Note: The demo focuses on the custom rendering capability via slotRenderer and diff --git a/demos/vanilla/src/examples/example40.scss b/demos/vanilla/src/examples/example40.scss new file mode 100644 index 0000000000..9c7e16f377 --- /dev/null +++ b/demos/vanilla/src/examples/example40.scss @@ -0,0 +1,137 @@ +body { + --slick-menu-item-height: 30px; + --slick-menu-line-height: 30px; + --slick-column-picker-item-height: 28px; + --slick-column-picker-line-height: 28px; + --slick-menu-item-border-radius: 4px; + --slick-menu-item-hover-border: 1px solid #148dff; + --slick-column-picker-item-hover-color: #fff; + --slick-column-picker-item-border-radius: 4px; + --slick-column-picker-item-hover-border: 1px solid #148dff; + --slick-menu-item-hover-color: #fff; + .slick-cell-menu, + .slick-context-menu, + .slick-grid-menu, + .slick-header-menu { + .slick-menu-item:hover { + color: #0a34b5; + } + } + .slick-menu-footer { + padding: 4px 6px; + border-top: 1px solid #c0c0c0; + } +} + +.key-hint { + background: #eee; + border: 1px solid #ccc; + border-radius: 2px; + padding: 2px 4px; + font-size: 10px; + margin-left: 10px; + white-space: nowrap; + display: inline-flex; + align-items: center; + height: 20px; + + &.beta, + &.danger, + &.warn { + color: white; + font-size: 8px; + font-weight: bold; + } + &.beta { + background: #4444ff; + border: 1px solid #5454ff; + } + + &.danger { + background: #ff4444; + border: 1px solid #fb5a5a; + } + + &.warn { + background: #ff9800; + border: 1px solid #fba321; + } +} + +.edit-cell { + background: #eee; + border: 1px solid #ccc; + border-radius: 2px; + padding: 2px 4px; + font-size: 10px; + margin-left: 10px; + display: inline-flex; + align-items: center; + height: 18px; +} + +.export-timestamp { + background-color: #4c4c4c; + color: #fff; + padding: 8px; + border-radius: 4px; + position: absolute; + z-index: 999999; +} + +.advanced-export-icon, +.edit-cell-icon, +.recalc-icon { + width: 20px; + height: 20px; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 4px; + transition: transform 0.2s; + color: white; + font-size: 10px; +} +.advanced-export-icon { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} +.edit-cell-icon { + background: linear-gradient(135deg, #00c853 0%, #64dd17 100%); +} +.recalc-icon { + background: linear-gradient(135deg, #c800a3 0%, #a31189 100%); +} + +.round-tag { + width: 6px; + height: 6px; + border-radius: 50%; + display: inline-block; + background: #44ff44; + box-shadow: 0 0 4px #44ff44; + margin-left: 10px; +} + +.menu-item { + display: flex; + align-items: center; + flex: 1; + justify-content: space-between; + + .menu-item-label.warn { + flex: 1; + color: #f09000; + } +} +.menu-item-icon { + margin-right: 4px; + font-size: 18px; + &.warn { + color: #ff9800; + } +} + +.menu-item-label { + flex: 1; +} diff --git a/demos/vanilla/src/examples/example40.ts b/demos/vanilla/src/examples/example40.ts index 4d08c486c2..bcefe8227e 100644 --- a/demos/vanilla/src/examples/example40.ts +++ b/demos/vanilla/src/examples/example40.ts @@ -1,7 +1,10 @@ +import { format as tempoFormat } from '@formkit/tempo'; import { BindingEventService } from '@slickgrid-universal/binding'; -import { Filters, Formatters, type Column, type GridOption } from '@slickgrid-universal/common'; +import { createDomElement, Filters, Formatters, getOffset, type Column, type GridOption } from '@slickgrid-universal/common'; +import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle'; import { ExampleGridOptions } from './example-grid-options.js'; +import './example40.scss'; interface ReportItem { id: number; @@ -20,6 +23,7 @@ export default class Example40 { gridOptions: GridOption; dataset: ReportItem[]; sgb: SlickVanillaGridBundle; + subTitleStyle = 'display: block'; constructor() { this._bindingEventService = new BindingEventService(); @@ -45,11 +49,7 @@ export default class Example40 { initializeGrid() { // This example demonstrates Menu Slot functionality across all menu types: - // - SlickHeaderMenu (Title, Duration, Cost, % Complete columns) - // - SlickCellMenu (Action column with chevron button) - // - SlickContextMenu (right-click context menu) - // - SlickGridMenu (grid menu button) - // All demonstrate: slotRenderer callbacks (item, args) returning strings or HTMLElements + // - SlickHeaderMenu, SlickCellMenu, SlickContextMenu, SlickGridMenu this.columnDefinitions = [ { @@ -67,12 +67,12 @@ export default class Example40 { command: 'sort-asc', title: 'Sort Ascending', positionOrder: 50, - // Slot renderer replaces entire menu item content + // Slot renderer replaces entire menu item content (can be HTML string or native DOM elements) slotRenderer: () => ` -

- - Sort Ascending - Alt+↑ +
+ + Sort Ascending + Alt+↑
`, }, @@ -80,13 +80,17 @@ export default class Example40 { command: 'sort-desc', title: 'Sort Descending', positionOrder: 51, - slotRenderer: () => ` -
- - Sort Descending - Alt+↓ -
- `, + // Slot renderer using native DOM elements + slotRenderer: () => { + const menuItemElm = createDomElement('div', { className: 'menu-item' }); + const iconElm = createDomElement('i', { className: 'mdi mdi-sort-descending menu-item-icon' }); + const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: 'Sort Descending' }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'Alt+↓' }); + menuItemElm.appendChild(iconElm); + menuItemElm.appendChild(menuItemLabelElm); + menuItemElm.appendChild(kbdElm); + return menuItemElm; + }, }, ], }, @@ -109,10 +113,10 @@ export default class Example40 { positionOrder: 47, // Slot renderer with badge slotRenderer: () => ` -
- - Resize by Content - NEW +
+ + Resize by Content + NEW
`, }, @@ -136,10 +140,10 @@ export default class Example40 { positionOrder: 58, // Slot renderer with status indicator slotRenderer: () => ` -
- - Remove Sort - +
+ + Remove Sort +
`, }, @@ -184,35 +188,31 @@ export default class Example40 { title: 'Advanced Export', // Demo: Native HTMLElement with event listeners using slotRenderer (full DOM control) slotRenderer: (item, _args) => { - const containerDiv = document.createElement('div'); - containerDiv.style.cssText = 'display: flex; align-items: center;'; - - const iconDiv = document.createElement('div'); - iconDiv.style.cssText = - 'width: 18px; height: 18px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 3px; display: flex; align-items: center; justify-content: center; margin-right: 4px; transition: transform 0.2s;'; - iconDiv.innerHTML = '📊'; - - const textSpan = document.createElement('span'); - textSpan.style.cssText = 'flex: 1;'; - textSpan.textContent = item.title; - - const kbdElm = document.createElement('kbd'); - kbdElm.style.cssText = - 'background: #eee; border: 1px solid #ccc; border-radius: 2px; padding: 2px 4px; font-size: 10px; margin-left: 10px; display: inline-flex; align-items: center; height: 18px;'; - kbdElm.textContent = 'Ctrl+E'; - + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const containerDiv = createDomElement('div', { className: 'menu-item' }); + const iconDiv = createDomElement('div', { className: 'advanced-export-icon', textContent: '📊' }); + const textSpan = createDomElement('span', { textContent: item.title, style: { flex: '1' } }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'Ctrl+E' }); containerDiv.appendChild(iconDiv); containerDiv.appendChild(textSpan); containerDiv.appendChild(kbdElm); // Add native event listeners for hover effects containerDiv.addEventListener('mouseenter', () => { - iconDiv.style.transform = 'scale(1.1)'; - containerDiv.style.backgroundColor = '#f5f5f5'; + iconDiv.style.transform = 'scale(1.15)'; + iconDiv.style.background = 'linear-gradient(135deg, #d8dcef 0%, #ffffff 100%)'; + containerDiv.parentElement!.style.backgroundColor = '#854685'; + const div = this.buildChartTooltip(getOffset(containerDiv)); + document.body.appendChild(div); + containerDiv.style.color = 'white'; + containerDiv.querySelector('.key-hint')!.style.color = 'black'; }); containerDiv.addEventListener('mouseleave', () => { + iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; iconDiv.style.transform = 'scale(1)'; - containerDiv.style.backgroundColor = ''; + containerDiv.parentElement!.style.backgroundColor = 'white'; + containerDiv.style.color = 'black'; + document.querySelector('.export-timestamp')?.remove(); }); return containerDiv; @@ -228,10 +228,10 @@ export default class Example40 { positionOrder: 55, // Slot renderer with status indicator and beta badge slotRenderer: () => ` -
- - Filter Column - BETA +
+ + Filter Column + BETA
`, }, @@ -251,10 +251,18 @@ export default class Example40 { menu: { commandItems: [ { - command: 'auto-refresh', - title: 'Auto Refresh', + command: 'recalc', + title: 'Recalculate', positionOrder: 45, iconCssClass: 'mdi mdi-refresh', + slotRenderer: () => { + return ` +
+
%
+ Recalculate +
+ `; + }, }, ], }, @@ -277,9 +285,9 @@ export default class Example40 { // Demo: Menu-level default renderer that applies to all items unless overridden defaultItemRenderer: (item, _args) => { return ` -
+
${item.iconCssClass ? `` : '◦'} - ${item.title} + ${item.title}
`; }, @@ -344,11 +352,9 @@ export default class Example40 { positionOrder: 53, // Individual slotRenderer overrides the defaultItemRenderer slotRenderer: (_item, args) => ` -
-
- ✎ -
- Edit Row #${args.dataContext.id} +
+
✎
+ Edit Row #${args.dataContext.id}
`, action: (_e, args) => { @@ -360,11 +366,11 @@ export default class Example40 { command: 'delete-row', title: 'Delete Row', positionOrder: 54, - iconCssClass: 'mdi mdi-delete', - action: (_e, args) => { - if (confirm(`Delete row #${args.dataContext.id}?`)) { - console.log('Delete row:', args.dataContext); - alert(`Deleted row #${args.dataContext.id}`); + iconCssClass: 'mdi mdi-delete text-danger', + action: (_event, args) => { + const dataContext = args.dataContext; + if (confirm(`Do you really want to delete row (${args.row! + 1}) with "${dataContext.title}"`)) { + this.sgb?.instances?.gridService.deleteItemById(dataContext.id); } }, }, @@ -389,9 +395,9 @@ export default class Example40 { // Demo: Menu-level default renderer for all header menu items defaultItemRenderer: (item, _args) => { return ` -
- ${item.iconCssClass ? `` : ''} - ${item.title} +
+ ${item.iconCssClass ? `` : ''} + ${item.title}
`; }, @@ -406,9 +412,9 @@ export default class Example40 { // Demo: Menu-level default renderer for context menu items defaultItemRenderer: (item, _args) => { return ` -
- ${item.iconCssClass ? `` : ''} - ${item.title} +
+ ${item.iconCssClass ? `` : ''} + ${item.title}
`; }, @@ -419,23 +425,11 @@ export default class Example40 { title: 'Edit Cell', // Demo: Individual slotRenderer overrides the menu's defaultItemRenderer slotRenderer: (item, _args) => { - const containerDiv = document.createElement('div'); - containerDiv.style.cssText = 'display: flex; align-items: center;'; - - const iconDiv = document.createElement('div'); - iconDiv.style.cssText = - 'width: 18px; height: 18px; background: linear-gradient(135deg, #00c853 0%, #64dd17 100%); border-radius: 3px; display: flex; align-items: center; justify-content: center; margin-right: 4px; transition: all 0.2s;'; - iconDiv.innerHTML = '✎'; - - const textSpan = document.createElement('span'); - textSpan.style.cssText = 'flex: 1;'; - textSpan.textContent = item.title; - - const kbdElm = document.createElement('kbd'); - kbdElm.style.cssText = - 'background: #eee; border: 1px solid #ccc; border-radius: 2px; padding: 2px 4px; font-size: 10px; margin-left: 10px; display: inline-flex; align-items: center; height: 18px;'; - kbdElm.textContent = 'F2'; - + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const containerDiv = createDomElement('div', { className: 'menu-item' }); + const iconDiv = createDomElement('div', { className: 'edit-cell-icon', textContent: '✎' }); + const textSpan = createDomElement('span', { textContent: item.title, style: { flex: '1' } }); + const kbdElm = createDomElement('kbd', { className: 'edit-cell', textContent: 'F2' }); containerDiv.appendChild(iconDiv); containerDiv.appendChild(textSpan); containerDiv.appendChild(kbdElm); @@ -484,7 +478,7 @@ export default class Example40 { { command: 'delete-row', title: 'Delete Row', - iconCssClass: 'mdi mdi-delete', + iconCssClass: 'mdi mdi-delete text-danger', action: () => alert('Delete row'), }, ], @@ -496,9 +490,9 @@ export default class Example40 { // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) defaultItemRenderer: (item, _args) => { return ` -
- ${item.iconCssClass ? `` : ''} - ${item.title} +
+ ${item.iconCssClass ? `` : ''} + ${item.title}
`; }, @@ -528,10 +522,10 @@ export default class Example40 { iconCssClass: 'mdi mdi-download', // Individual slotRenderer overrides the defaultItemRenderer for this item slotRenderer: (item, _args) => ` -
- - ${item.title} - CUSTOM +
+ + ${item.title} + CUSTOM
`, action: () => alert('Export to CSV'), @@ -541,20 +535,40 @@ export default class Example40 { title: 'Refresh Data', iconCssClass: 'mdi mdi-refresh', // Demo: slotRenderer with keyboard shortcut - slotRenderer: (item) => ` -
- - ${item.title} - F5 -
- `, + slotRenderer: (item) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const menuItemElm = createDomElement('div', { className: 'menu-item' }); + const iconElm = createDomElement('i', { className: `${item.iconCssClass} menu-item-icon` }); + const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: item.title }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'F5' }); + menuItemElm.appendChild(iconElm); + menuItemElm.appendChild(menuItemLabelElm); + menuItemElm.appendChild(kbdElm); + return menuItemElm; + }, action: () => alert('Refresh data'), }, ], }, + + // tooltip plugin + externalResources: [new SlickCustomTooltip()], }; } + /** create a basic chart export tooltip */ + buildChartTooltip(containerOffset) { + const div = createDomElement('div', { + className: 'export-timestamp', + textContent: `📈 Export timestamp: ${tempoFormat(new Date(), 'YYYY-MM-DD hh:mm:ss a')}`, + style: { + top: `${containerOffset.top + 35}px`, + left: `${containerOffset.left - 70}px`, + }, + }); + return div; + } + loadData(count: number): ReportItem[] { const tmpData: ReportItem[] = []; for (let i = 0; i < count; i++) { @@ -576,4 +590,9 @@ export default class Example40 { } return tmpData; } + + toggleSubTitle() { + this.subTitleStyle = this.subTitleStyle === 'display: block' ? 'display: none' : 'display: block'; + this.sgb.resizerService.resizeGrid(); + } } diff --git a/packages/common/src/extensions/index.ts b/packages/common/src/extensions/index.ts index c6f3a0aff2..107c7049ce 100644 --- a/packages/common/src/extensions/index.ts +++ b/packages/common/src/extensions/index.ts @@ -1,4 +1,5 @@ export * from './extensionUtility.js'; +export * from './menuBaseClass.js'; export * from './slickAutoTooltip.js'; export * from './slickCellExcelCopyManager.js'; export * from './slickCellExternalCopyManager.js'; diff --git a/packages/common/src/extensions/menuBaseClass.ts b/packages/common/src/extensions/menuBaseClass.ts index c20b33cd2b..12d5b0fb3e 100644 --- a/packages/common/src/extensions/menuBaseClass.ts +++ b/packages/common/src/extensions/menuBaseClass.ts @@ -29,12 +29,20 @@ import type { } from '../interfaces/index.js'; import type { SharedService } from '../services/shared.service.js'; +export type ExtractMenuType = T extends 'command' ? A : T extends 'option' ? A : A extends 'divider' ? A : never; export type MenuType = 'command' | 'option'; +export type MenuCommandOptionItem = MenuCommandItem | MenuOptionItem; export type ExtendableItemTypes = HeaderButtonItem | MenuCommandItem | MenuOptionItem | 'divider'; - -export type ExtractMenuType = T extends 'command' ? A : T extends 'option' ? A : A extends 'divider' ? A : never; - -export class MenuBaseClass { +export type MenuPlugin = CellMenu | ContextMenu | GridMenu | HeaderMenu; +export type itemEventCallback = ( + e: DOMMouseOrTouchEvent, + type: MenuType, + item: ExtractMenuType, + level: number, + columnDef?: Column +) => void; + +export class MenuBaseClass { protected _addonOptions: M = {} as unknown as M; protected _bindEventService: BindingEventService; protected _camelPluginName = ''; @@ -154,11 +162,11 @@ export class MenuBaseClass, commandOrOptionMenu: HTMLDivElement): void { - if (item !== 'divider' && (item as MenuCommandItem | MenuOptionItem | GridMenuItem)?.subMenuTitle) { + if (item !== 'divider' && (item as MenuCommandOptionItem | GridMenuItem)?.subMenuTitle) { const subMenuTitleElm = document.createElement('div'); subMenuTitleElm.className = 'slick-menu-title'; - subMenuTitleElm.textContent = (item as MenuCommandItem | MenuOptionItem | GridMenuItem).subMenuTitle as string; - const subMenuTitleClass = (item as MenuCommandItem | MenuOptionItem | GridMenuItem).subMenuTitleCssClass as string; + subMenuTitleElm.textContent = (item as MenuCommandOptionItem | GridMenuItem).subMenuTitle as string; + const subMenuTitleClass = (item as MenuCommandOptionItem | GridMenuItem).subMenuTitleCssClass as string; if (subMenuTitleClass) { subMenuTitleElm.classList.add(...classNameToList(subMenuTitleClass)); } @@ -173,20 +181,8 @@ export class MenuBaseClass>, args: unknown, - itemClickCallback: ( - e: DOMMouseOrTouchEvent, - type: MenuType, - item: ExtractMenuType, - level: number, - columnDef?: Column - ) => void, - itemMouseoverCallback?: ( - e: DOMMouseOrTouchEvent, - type: MenuType, - item: ExtractMenuType, - level: number, - columnDef?: Column - ) => void + itemClickCallback: itemEventCallback, + itemMouseoverCallback?: itemEventCallback ): void { if (args && commandOrOptionItems && menuOptions) { for (const item of commandOrOptionItems) { @@ -239,20 +235,8 @@ export class MenuBaseClass, args: any, - itemClickCallback: ( - e: DOMMouseOrTouchEvent, - type: MenuType, - item: ExtractMenuType, - level: number, - columnDef?: Column - ) => void, - itemMouseoverCallback?: ( - e: DOMMouseOrTouchEvent, - type: MenuType, - item: ExtractMenuType, - level: number, - columnDef?: Column - ) => void + itemClickCallback: itemEventCallback, + itemMouseoverCallback?: itemEventCallback ): HTMLLIElement | null { let commandLiElm: HTMLLIElement | null = null; @@ -288,7 +272,7 @@ export class MenuBaseClass) => { - // If there's a slotRenderer, call it with the event - const slotRenderer = (item as MenuCommandItem | MenuOptionItem).slotRenderer || (this._addonOptions as any).defaultItemRenderer; + // if there's a slot renderer, call it with the event + const slotRenderer = (item as MenuCommandOptionItem).slotRenderer || (this._addonOptions as MenuPlugin).defaultItemRenderer; if (slotRenderer) { - slotRenderer(item as MenuCommandItem | MenuOptionItem, args, e); + slotRenderer(item as MenuCommandOptionItem, args, e); } - // If the click was stopped by an interactive element handler, don't trigger the menu action + // if the click was stopped by an interactive element handler, don't trigger the menu action if (e.defaultPrevented) { return; } @@ -378,10 +349,7 @@ export class MenuBaseClass `
${item.title}
` - */ - defaultItemRenderer?: (item: any, args: any) => string | HTMLElement; - - /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ - menuUsabilityOverride?: (args: MenuCallbackArgs) => boolean; } diff --git a/packages/common/src/interfaces/contextMenuOption.interface.ts b/packages/common/src/interfaces/contextMenuOption.interface.ts index a83aaf65a9..ee2772ddc4 100644 --- a/packages/common/src/interfaces/contextMenuOption.interface.ts +++ b/packages/common/src/interfaces/contextMenuOption.interface.ts @@ -1,7 +1,8 @@ import type { ContextMenuLabel } from './contextMenuLabel.interface.js'; -import type { MenuCallbackArgs, MenuCommandItem, MenuOptionItem } from './index.js'; +import type { MenuCommandItem, MenuOptionItem } from './index.js'; +import type { MenuOption } from './menuOption.interface.js'; -export interface ContextMenuOption { +export interface ContextMenuOption extends MenuOption { /** Defaults to true, Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space */ autoAdjustDrop?: boolean; @@ -130,24 +131,4 @@ export interface ContextMenuOption { /** Defaults to "mouseover", what event type shoud we use to open sub-menu(s), 2 options are available: "mouseover" or "click" */ subMenuOpenByEvent?: 'mouseover' | 'click'; - - // -- - // action/override callbacks - - /** - * Default slot renderer for all menu items. - * This will be used as the default renderer for all items unless overridden by an individual item's `slotRenderer`. - * The renderer receives both the menu item and args for full context access. - * - * @param item - The menu item object (MenuCommandItem or MenuOptionItem) - * @param args - The callback args providing access to grid, column, dataContext, etc. - * @returns Either an HTML string or an HTMLElement - * - * @example - * defaultItemRenderer: (item, args) => `
${item.title}
` - */ - defaultItemRenderer?: (item: any, args: any) => string | HTMLElement; - - /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ - menuUsabilityOverride?: (args: MenuCallbackArgs) => boolean; } diff --git a/packages/common/src/interfaces/gridMenuOption.interface.ts b/packages/common/src/interfaces/gridMenuOption.interface.ts index 32f7e92f16..61bb78f6d7 100644 --- a/packages/common/src/interfaces/gridMenuOption.interface.ts +++ b/packages/common/src/interfaces/gridMenuOption.interface.ts @@ -1,14 +1,7 @@ -import type { - Column, - GridMenuCallbackArgs, - GridMenuCommandItemCallbackArgs, - GridMenuLabel, - GridOption, - MenuCallbackArgs, - MenuCommandItem, -} from './index.js'; - -export interface GridMenuOption { +import type { Column, GridMenuCallbackArgs, GridMenuCommandItemCallbackArgs, GridMenuLabel, GridOption, MenuCommandItem } from './index.js'; +import type { MenuOption } from './menuOption.interface.js'; + +export interface GridMenuOption extends MenuOption { /** Defaults to true, Auto-align drop menu to the left or right depending on grid viewport available space */ autoAlignSide?: boolean; @@ -189,23 +182,6 @@ export interface GridMenuOption { // -- // action/override callbacks - /** - * Default slot renderer for all menu items. - * This will be used as the default renderer for all items unless overridden by an individual item's `slotRenderer`. - * The renderer receives both the menu item and args for full context access. - * - * @param item - The menu item object (MenuCommandItem or MenuOptionItem) - * @param args - The callback args providing access to grid, column, dataContext, etc. - * @returns Either an HTML string or an HTMLElement - * - * @example - * defaultItemRenderer: (item, args) => `
${item.title}
` - */ - defaultItemRenderer?: (item: any, args: any) => string | HTMLElement; - /** Callback method to override the column name output used by the ColumnPicker/GridMenu. */ headerColumnValueExtractor?: (column: Column, gridOptions?: GridOption) => string | HTMLElement | DocumentFragment; - - /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ - menuUsabilityOverride?: (args: MenuCallbackArgs) => boolean; } diff --git a/packages/common/src/interfaces/headerMenuOption.interface.ts b/packages/common/src/interfaces/headerMenuOption.interface.ts index 3fe873e03e..de0eb7987d 100644 --- a/packages/common/src/interfaces/headerMenuOption.interface.ts +++ b/packages/common/src/interfaces/headerMenuOption.interface.ts @@ -1,8 +1,7 @@ -import type { SlickGrid } from '../core/index.js'; import type { HeaderMenuLabel } from './headerMenuLabel.interface.js'; -import type { Column } from './index.js'; +import type { MenuOption } from './menuOption.interface.js'; -export interface HeaderMenuOption { +export interface HeaderMenuOption extends MenuOption { /** Auto-align drop menu to the left when not enough viewport space to show on the right */ autoAlign?: boolean; @@ -95,24 +94,4 @@ export interface HeaderMenuOption { /** Item tooltip. */ tooltip?: string; - - // -- - // Methods - - /** - * Default slot renderer for all menu items. - * This will be used as the default renderer for all items unless overridden by an individual item's `slotRenderer`. - * The renderer receives both the menu item and args for full context access. - * - * @param item - The menu item object (MenuCommandItem or MenuOptionItem) - * @param args - The callback args providing access to grid, column, dataContext, etc. - * @returns Either an HTML string or an HTMLElement - * - * @example - * defaultItemRenderer: (item, args) => `
${item.title}
` - */ - defaultItemRenderer?: (item: any, args: any) => string | HTMLElement; - - /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ - menuUsabilityOverride?: (args: { grid: SlickGrid; column: Column; menu: HTMLElement }) => boolean; } diff --git a/packages/common/src/interfaces/menuItem.interface.ts b/packages/common/src/interfaces/menuItem.interface.ts index 1d4bffa31d..5259cd81b7 100644 --- a/packages/common/src/interfaces/menuItem.interface.ts +++ b/packages/common/src/interfaces/menuItem.interface.ts @@ -64,17 +64,6 @@ export interface MenuItem { * div.addEventListener('click', () => console.log('clicked')); * return div; * } - * - * // Interactive element that prevents menu action - * slotRenderer: (item, args, event) => { - * const checkbox = document.createElement('input'); - * checkbox.type = 'checkbox'; - * checkbox.addEventListener('change', (e) => { - * event?.stopPropagation(); // Stop the menu item click from firing - * console.log('checkbox toggled'); - * }); - * return checkbox; - * } */ slotRenderer?: (item: any, args: O, event?: Event) => string | HTMLElement; diff --git a/packages/common/src/interfaces/menuOption.interface.ts b/packages/common/src/interfaces/menuOption.interface.ts new file mode 100644 index 0000000000..025ffa2184 --- /dev/null +++ b/packages/common/src/interfaces/menuOption.interface.ts @@ -0,0 +1,32 @@ +import type { SlickGrid } from '../core/index.js'; +import type { Column } from './index.js'; + +export interface MenuOption { + // -- + // Methods + + /** + * Default slot renderer for all menu items. + * This will be used as the default renderer for all items unless overridden by an individual item's `slotRenderer`. + * The renderer receives both the menu item and args for full context access. + * + * @param item - The menu item object (`MenuCommandItem` or `MenuOptionItem`) + * @param args - The callback args providing access to grid, column, dataContext, etc. + * @returns Either an HTML string or an HTMLElement + * + * @example + * // Return HTML string + * defaultItemRenderer: (item, args) => `
${item.title}
` + * + * // Return HTMLElement + * defaultItemRenderer: (item, args) => { + * const div = document.createElement('div'); + * div.textContent = `${item.title} (Row ${args.dataContext.id})`; + * return div; + * } + */ + defaultItemRenderer?: (item: any, args: any) => string | HTMLElement; + + /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ + menuUsabilityOverride?: (args: { grid: SlickGrid; column: Column; menu: HTMLElement }) => boolean; +} From f7b7a15fbfa918e254e9791ff1f2f49aeb814757 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Tue, 10 Feb 2026 19:24:29 -0500 Subject: [PATCH 03/24] chore: add menu args TS Generics --- demos/vanilla/src/examples/example12.ts | 2 +- demos/vanilla/src/examples/example40.ts | 41 +++++++++---------- .../interfaces/cellMenuOption.interface.ts | 5 +-- .../interfaces/contextMenuOption.interface.ts | 5 +-- .../interfaces/gridMenuOption.interface.ts | 15 +++++-- .../interfaces/headerMenuOption.interface.ts | 5 +-- packages/common/src/interfaces/index.ts | 1 + .../src/interfaces/menuOption.interface.ts | 8 ++-- 8 files changed, 43 insertions(+), 39 deletions(-) diff --git a/demos/vanilla/src/examples/example12.ts b/demos/vanilla/src/examples/example12.ts index 91374ac716..d9a0bfb4dd 100644 --- a/demos/vanilla/src/examples/example12.ts +++ b/demos/vanilla/src/examples/example12.ts @@ -240,7 +240,7 @@ export default class Example12 { minValue: 0, maxValue: 100, }, - customTooltip: { position: 'center' }, + customTooltip: { position: 'center' }, }, // { // id: 'percentComplete2', name: '% Complete', field: 'analysis.percentComplete', minWidth: 100, diff --git a/demos/vanilla/src/examples/example40.ts b/demos/vanilla/src/examples/example40.ts index bcefe8227e..ce822557fa 100644 --- a/demos/vanilla/src/examples/example40.ts +++ b/demos/vanilla/src/examples/example40.ts @@ -23,7 +23,7 @@ export default class Example40 { gridOptions: GridOption; dataset: ReportItem[]; sgb: SlickVanillaGridBundle; - subTitleStyle = 'display: block'; + subTitleStyle = 'display: none'; constructor() { this._bindingEventService = new BindingEventService(); @@ -245,6 +245,7 @@ export default class Example40 { field: 'percentComplete', sortable: true, filterable: true, + type: 'number', filter: { model: Filters.slider, operator: '>=' }, // Demo: Header Menu with Slot - showing interactive element (checkbox) header: { @@ -255,14 +256,12 @@ export default class Example40 { title: 'Recalculate', positionOrder: 45, iconCssClass: 'mdi mdi-refresh', - slotRenderer: () => { - return ` -
-
%
- Recalculate -
- `; - }, + slotRenderer: () => ` +
+
%
+ Recalculate +
+ `, }, ], }, @@ -285,11 +284,11 @@ export default class Example40 { // Demo: Menu-level default renderer that applies to all items unless overridden defaultItemRenderer: (item, _args) => { return ` -
- ${item.iconCssClass ? `` : '◦'} - ${item.title} -
- `; +
+ ${item.iconCssClass ? `` : '◦'} + ${item.title} +
+ `; }, commandItems: [ { @@ -353,8 +352,8 @@ export default class Example40 { // Individual slotRenderer overrides the defaultItemRenderer slotRenderer: (_item, args) => `
-
✎
- Edit Row #${args.dataContext.id} +
✎
+ Edit Row #${args.dataContext.id}
`, action: (_e, args) => { @@ -490,11 +489,11 @@ export default class Example40 { // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) defaultItemRenderer: (item, _args) => { return ` -
- ${item.iconCssClass ? `` : ''} - ${item.title} -
- `; +
+ ${item.iconCssClass ? `` : ''} + ${item.title} +
+ `; }, commandItems: [ { diff --git a/packages/common/src/interfaces/cellMenuOption.interface.ts b/packages/common/src/interfaces/cellMenuOption.interface.ts index 8bb0c295fc..e037eeff28 100644 --- a/packages/common/src/interfaces/cellMenuOption.interface.ts +++ b/packages/common/src/interfaces/cellMenuOption.interface.ts @@ -1,7 +1,6 @@ -import type { MenuCommandItem, MenuOptionItem } from './index.js'; -import type { MenuOption } from './menuOption.interface.js'; +import type { MenuCommandItem, MenuFromCellCallbackArgs, MenuOption, MenuOptionItem } from './index.js'; -export interface CellMenuOption extends MenuOption { +export interface CellMenuOption extends MenuOption { /** Defaults to true, Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space */ autoAdjustDrop?: boolean; diff --git a/packages/common/src/interfaces/contextMenuOption.interface.ts b/packages/common/src/interfaces/contextMenuOption.interface.ts index ee2772ddc4..94bf2c264d 100644 --- a/packages/common/src/interfaces/contextMenuOption.interface.ts +++ b/packages/common/src/interfaces/contextMenuOption.interface.ts @@ -1,8 +1,7 @@ import type { ContextMenuLabel } from './contextMenuLabel.interface.js'; -import type { MenuCommandItem, MenuOptionItem } from './index.js'; -import type { MenuOption } from './menuOption.interface.js'; +import type { MenuCommandItem, MenuFromCellCallbackArgs, MenuOption, MenuOptionItem } from './index.js'; -export interface ContextMenuOption extends MenuOption { +export interface ContextMenuOption extends MenuOption { /** Defaults to true, Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space */ autoAdjustDrop?: boolean; diff --git a/packages/common/src/interfaces/gridMenuOption.interface.ts b/packages/common/src/interfaces/gridMenuOption.interface.ts index 61bb78f6d7..e246ab4c15 100644 --- a/packages/common/src/interfaces/gridMenuOption.interface.ts +++ b/packages/common/src/interfaces/gridMenuOption.interface.ts @@ -1,7 +1,14 @@ -import type { Column, GridMenuCallbackArgs, GridMenuCommandItemCallbackArgs, GridMenuLabel, GridOption, MenuCommandItem } from './index.js'; -import type { MenuOption } from './menuOption.interface.js'; - -export interface GridMenuOption extends MenuOption { +import type { + Column, + GridMenuCallbackArgs, + GridMenuCommandItemCallbackArgs, + GridMenuLabel, + GridOption, + MenuCommandItem, + MenuOption, +} from './index.js'; + +export interface GridMenuOption extends MenuOption { /** Defaults to true, Auto-align drop menu to the left or right depending on grid viewport available space */ autoAlignSide?: boolean; diff --git a/packages/common/src/interfaces/headerMenuOption.interface.ts b/packages/common/src/interfaces/headerMenuOption.interface.ts index de0eb7987d..e9482a3bab 100644 --- a/packages/common/src/interfaces/headerMenuOption.interface.ts +++ b/packages/common/src/interfaces/headerMenuOption.interface.ts @@ -1,7 +1,6 @@ -import type { HeaderMenuLabel } from './headerMenuLabel.interface.js'; -import type { MenuOption } from './menuOption.interface.js'; +import type { HeaderMenuCommandItemCallbackArgs, HeaderMenuLabel, MenuOption } from './index.js'; -export interface HeaderMenuOption extends MenuOption { +export interface HeaderMenuOption extends MenuOption { /** Auto-align drop menu to the left when not enough viewport space to show on the right */ autoAlign?: boolean; diff --git a/packages/common/src/interfaces/index.ts b/packages/common/src/interfaces/index.ts index 68707c59a1..cc509d1f9a 100644 --- a/packages/common/src/interfaces/index.ts +++ b/packages/common/src/interfaces/index.ts @@ -109,6 +109,7 @@ export type * from './menuCommandItem.interface.js'; export type * from './menuCommandItemCallbackArgs.interface.js'; export type * from './menuFromCellCallbackArgs.interface.js'; export type * from './menuItem.interface.js'; +export type * from './menuOption.interface.js'; export type * from './menuOptionItem.interface.js'; export type * from './menuOptionItemCallbackArgs.interface.js'; export type * from './metrics.interface.js'; diff --git a/packages/common/src/interfaces/menuOption.interface.ts b/packages/common/src/interfaces/menuOption.interface.ts index 025ffa2184..7698b0adbd 100644 --- a/packages/common/src/interfaces/menuOption.interface.ts +++ b/packages/common/src/interfaces/menuOption.interface.ts @@ -1,7 +1,7 @@ import type { SlickGrid } from '../core/index.js'; -import type { Column } from './index.js'; +import type { Column, GridMenuCommandItemCallbackArgs, HeaderMenuCommandItemCallbackArgs, MenuFromCellCallbackArgs } from './index.js'; -export interface MenuOption { +export interface MenuOption { // -- // Methods @@ -18,14 +18,14 @@ export interface MenuOption { * // Return HTML string * defaultItemRenderer: (item, args) => `
${item.title}
` * - * // Return HTMLElement + * // Return HTMLElement (e.g. Cell or Context Menu) * defaultItemRenderer: (item, args) => { * const div = document.createElement('div'); * div.textContent = `${item.title} (Row ${args.dataContext.id})`; * return div; * } */ - defaultItemRenderer?: (item: any, args: any) => string | HTMLElement; + defaultItemRenderer?: (item: any, args: T) => string | HTMLElement; /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ menuUsabilityOverride?: (args: { grid: SlickGrid; column: Column; menu: HTMLElement }) => boolean; From 5411d2cc94c8377bf0f6512c7685443631a3b58a Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 11 Feb 2026 15:55:10 -0500 Subject: [PATCH 04/24] chore: add unit tests for slot renderer & default renderer --- .../__tests__/slickCellMenu.plugin.spec.ts | 164 ++++++++++++ .../__tests__/slickContextMenu.spec.ts | 169 +++++++++++++ .../__tests__/slickGridMenu.spec.ts | 234 ++++++++++++++++-- .../__tests__/slickHeaderMenu.spec.ts | 210 ++++++++++++++++ 4 files changed, 762 insertions(+), 15 deletions(-) diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts index 79a2888321..26972eee05 100644 --- a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts @@ -70,6 +70,7 @@ const gridStub = { setColumns: vi.fn(), setOptions: vi.fn(), setSortColumns: vi.fn(), + sanitizeHtmlString: (str: string) => str, updateColumnHeader: vi.fn(), onClick: new SlickEvent(), onScroll: new SlickEvent(), @@ -788,6 +789,169 @@ describe('CellMenu Plugin', () => { }); }); + describe('with slot renderer', () => { + it('should render menu item with slotRenderer returning HTMLElement', () => { + const mockSlotRenderer = vi.fn((item: MenuCommandItem) => { + const div = document.createElement('div'); + div.className = 'custom-slot-content'; + div.textContent = `Custom: ${item.title}`; + return div; + }); + + plugin.dispose(); + plugin.init(); + columnsMock[3].cellMenu!.commandItems = [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }]; + gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); + + const cellMenuElm = document.body.querySelector('.slick-cell-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = cellMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const customSlotElm = commandListElm.querySelector('.custom-slot-content') as HTMLDivElement; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(customSlotElm).toBeTruthy(); + expect(customSlotElm.textContent).toBe('Custom: Test Command'); + }); + + it('should render menu item with slotRenderer returning string', () => { + const mockSlotRenderer = vi.fn((item: MenuCommandItem) => `String: ${item.title}`); + + plugin.dispose(); + plugin.init(); + columnsMock[3].cellMenu!.commandItems = [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }]; + gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); + + const cellMenuElm = document.body.querySelector('.slick-cell-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = cellMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const customSlotElm = commandListElm.querySelector('.custom-string') as HTMLDivElement; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(customSlotElm).toBeTruthy(); + expect(customSlotElm.textContent).toContain('String: Test Command'); + }); + + it('should render menu item with defaultItemRenderer when item has no slotRenderer', () => { + const mockDefaultRenderer = vi.fn((item: MenuCommandItem) => { + const div = document.createElement('div'); + div.className = 'default-renderer-content'; + div.textContent = `Default: ${item.title}`; + return div; + }); + + plugin.dispose(); + plugin.init({ defaultItemRenderer: mockDefaultRenderer }); + columnsMock[3].cellMenu!.commandItems = [{ command: 'test-cmd', title: 'Test Command' }]; + gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); + + const cellMenuElm = document.body.querySelector('.slick-cell-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = cellMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const defaultRendererElm = commandListElm.querySelector('.default-renderer-content') as HTMLDivElement; + + expect(mockDefaultRenderer).toHaveBeenCalled(); + expect(defaultRendererElm).toBeTruthy(); + expect(defaultRendererElm.textContent).toBe('Default: Test Command'); + }); + + it('should prioritize item slotRenderer over defaultItemRenderer', () => { + const mockSlotRenderer = vi.fn((item: MenuCommandItem) => { + const div = document.createElement('div'); + div.className = 'slot-prioritized'; + div.textContent = 'Slot renderer prioritized'; + return div; + }); + const mockDefaultRenderer = vi.fn(); + + plugin.dispose(); + plugin.init({ defaultItemRenderer: mockDefaultRenderer }); + columnsMock[3].cellMenu!.commandItems = [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }]; + gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); + + const cellMenuElm = document.body.querySelector('.slick-cell-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = cellMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const slotRendererElm = commandListElm.querySelector('.slot-prioritized') as HTMLDivElement; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(mockDefaultRenderer).not.toHaveBeenCalled(); + expect(slotRendererElm).toBeTruthy(); + }); + + it('should pass correct arguments (item and args) to slotRenderer callback', () => { + const mockSlotRenderer = vi.fn((item: MenuCommandItem, args: any) => { + const div = document.createElement('div'); + div.className = 'renderer-args-test'; + div.textContent = `Item: ${item.command}, Grid: ${args?.grid ? 'present' : 'missing'}`; + return div; + }); + + plugin.dispose(); + plugin.init(); + columnsMock[3].cellMenu!.commandItems = [{ command: 'test-cmd', title: 'Test Command with Args', slotRenderer: mockSlotRenderer }]; + gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); + + expect(mockSlotRenderer).toHaveBeenCalled(); + const callArgs = mockSlotRenderer.mock.calls[0]; + expect(callArgs[0].command).toBe('test-cmd'); + expect(callArgs[1]).toBeDefined(); + expect(callArgs[1].grid).toBe(gridStub); + }); + + it('should call slotRenderer with click event as third argument when menu item is clicked', () => { + const mockSlotRenderer = vi.fn((item: MenuCommandItem, args: any, event?: Event) => { + const div = document.createElement('div'); + div.className = 'click-test'; + return div; + }); + + plugin.dispose(); + plugin.init(); + columnsMock[3].cellMenu!.commandItems = [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }]; + gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); + + const cellMenuElm = document.body.querySelector('.slick-cell-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = cellMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const menuItemElm = commandListElm.querySelector('.slick-menu-item') as HTMLDivElement; + + // Click the menu item + menuItemElm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true })); + + // Verify slotRenderer was called with the click event as the third argument + expect(mockSlotRenderer).toHaveBeenCalledTimes(2); // once for render, once for click + const clickCallArgs = mockSlotRenderer.mock.calls[1]; // second call is from click + expect(clickCallArgs[2]).toBeDefined(); + expect(clickCallArgs[2]!.type).toBe('click'); + }); + + it('should not trigger menu action when slotRenderer calls preventDefault on click event', () => { + const mockAction = vi.fn(); + const mockSlotRenderer = vi.fn((item: MenuCommandItem, args: any, event?: Event) => { + const div = document.createElement('div'); + div.className = 'prevent-default-test'; + const button = document.createElement('button'); + button.textContent = 'Interactive'; + button.onclick = (e) => { + e.preventDefault(); // Prevent default action + }; + div.appendChild(button); + return div; + }); + + plugin.dispose(); + plugin.init(); + columnsMock[3].cellMenu!.commandItems = [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer, action: mockAction }]; + gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); + + const cellMenuElm = document.body.querySelector('.slick-cell-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = cellMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const menuItemElm = commandListElm.querySelector('.slick-menu-item') as HTMLDivElement; + const buttonElm = menuItemElm.querySelector('button') as HTMLButtonElement; + + // Click the button inside the slotRenderer, which calls preventDefault + buttonElm.click(); + + // Verify the action callback was not called because preventDefault was called + expect(mockAction).not.toHaveBeenCalled(); + }); + }); + describe('with Options Items', () => { beforeEach(() => { columnsMock[4].cellMenu!.optionItems = deepCopy(optionItemsMock); diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts index 02a071ac03..1652a5456a 100644 --- a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts @@ -132,6 +132,7 @@ const gridStub = { setColumns: vi.fn(), setOptions: vi.fn(), setSortColumns: vi.fn(), + sanitizeHtmlString: (str: string) => str, updateColumnHeader: vi.fn(), onClick: new SlickEvent(), onContextMenu: new SlickEvent(), @@ -819,6 +820,174 @@ describe('ContextMenu Plugin', () => { }); }); + describe('with slot renderer', () => { + beforeEach(() => { + // Clean up any leftover state from previous tests + delete gridOptionsMock.contextMenu!.defaultItemRenderer; + gridOptionsMock.contextMenu!.commandItems = []; + gridOptionsMock.contextMenu!.hideCopyCellValueCommand = true; + }); + + it('should render menu item with slotRenderer returning HTMLElement', () => { + const mockSlotRenderer = vi.fn((item: MenuCommandItem) => { + const div = document.createElement('div'); + div.className = 'custom-slot-content'; + div.textContent = `Custom: ${item.title}`; + return div; + }); + + plugin.dispose(); + plugin.init({ commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] }); + gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); + + const contextMenuElm = document.body.querySelector('.slick-context-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = contextMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const customSlotElm = commandListElm.querySelector('.custom-slot-content') as HTMLDivElement; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(customSlotElm).toBeTruthy(); + expect(customSlotElm.textContent).toBe('Custom: Test Command'); + }); + + it('should render menu item with slotRenderer returning string', () => { + const mockSlotRenderer = vi.fn((item: MenuCommandItem) => `String: ${item.title}`); + + plugin.dispose(); + plugin.init({ commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] }); + gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); + + const contextMenuElm = document.body.querySelector('.slick-context-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = contextMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const customSlotElm = commandListElm.querySelector('.custom-string') as HTMLDivElement; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(customSlotElm).toBeTruthy(); + expect(customSlotElm.textContent).toContain('String: Test Command'); + }); + + it('should render menu item with defaultItemRenderer when item has no slotRenderer', () => { + const mockDefaultRenderer = vi.fn((item: MenuCommandItem) => { + const div = document.createElement('div'); + div.className = 'default-renderer-content'; + div.textContent = `Default: ${item.title}`; + return div; + }); + + plugin.dispose(); + plugin.init({ commandItems: [{ command: 'test-cmd', title: 'Test Command' }], defaultItemRenderer: mockDefaultRenderer }); + gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); + + const contextMenuElm = document.body.querySelector('.slick-context-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = contextMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const defaultRendererElm = commandListElm.querySelector('.default-renderer-content') as HTMLDivElement; + + expect(mockDefaultRenderer).toHaveBeenCalled(); + expect(defaultRendererElm).toBeTruthy(); + expect(defaultRendererElm.textContent).toBe('Default: Test Command'); + }); + + it('should prioritize item slotRenderer over defaultItemRenderer', () => { + const mockSlotRenderer = vi.fn((item: MenuCommandItem) => { + const div = document.createElement('div'); + div.className = 'slot-prioritized'; + div.textContent = 'Slot renderer prioritized'; + return div; + }); + const mockDefaultRenderer = vi.fn(); + + plugin.dispose(); + plugin.init({ + commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }], + defaultItemRenderer: mockDefaultRenderer, + }); + gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); + + const contextMenuElm = document.body.querySelector('.slick-context-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = contextMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const slotRendererElm = commandListElm.querySelector('.slot-prioritized') as HTMLDivElement; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(mockDefaultRenderer).not.toHaveBeenCalled(); + expect(slotRendererElm).toBeTruthy(); + }); + + it('should pass correct arguments (item and args) to slotRenderer callback', () => { + const mockSlotRenderer = vi.fn((item: MenuCommandItem, args: any) => { + const div = document.createElement('div'); + div.className = 'renderer-args-test'; + div.textContent = `Item: ${item.command}, Grid: ${args?.grid ? 'present' : 'missing'}`; + return div; + }); + + plugin.dispose(); + plugin.init({ commandItems: [{ command: 'test-cmd', title: 'Test Command with Args', slotRenderer: mockSlotRenderer }] }); + gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); + + expect(mockSlotRenderer).toHaveBeenCalled(); + const callArgs = mockSlotRenderer.mock.calls[0]; + expect(callArgs[0].command).toBe('test-cmd'); + expect(callArgs[1]).toBeDefined(); + expect(callArgs[1].grid).toBe(gridStub); + }); + + it('should call slotRenderer with click event as third argument when menu item is clicked', () => { + const mockSlotRenderer = vi.fn((item: MenuCommandItem, args: any, event?: Event) => { + const div = document.createElement('div'); + div.className = 'click-test'; + return div; + }); + + plugin.dispose(); + plugin.init({ commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] }); + gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); + + const contextMenuElm = document.body.querySelector('.slick-context-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = contextMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const menuItemElm = commandListElm.querySelector('.slick-menu-item') as HTMLDivElement; + + // Click the menu item + menuItemElm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true })); + + // Verify slotRenderer was called with the click event as the third argument + expect(mockSlotRenderer).toHaveBeenCalledTimes(2); // once for render, once for click + const clickCallArgs = mockSlotRenderer.mock.calls[1]; // second call is from click + expect(clickCallArgs[2]).toBeDefined(); + expect(clickCallArgs[2]!.type).toBe('click'); + }); + + it('should not trigger menu action when slotRenderer calls preventDefault on click event', () => { + const mockAction = vi.fn(); + const mockSlotRenderer = vi.fn((item: MenuCommandItem, args: any, event?: Event) => { + const div = document.createElement('div'); + div.className = 'prevent-default-test'; + const button = document.createElement('button'); + button.textContent = 'Interactive'; + button.onclick = (e) => { + e.preventDefault(); // Prevent default action + }; + div.appendChild(button); + return div; + }); + + plugin.dispose(); + plugin.init({ + commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer, action: mockAction }], + }); + gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); + + const contextMenuElm = document.body.querySelector('.slick-context-menu.slickgrid12345') as HTMLDivElement; + const commandListElm = contextMenuElm.querySelector('.slick-menu-command-list') as HTMLDivElement; + const menuItemElm = commandListElm.querySelector('.slick-menu-item') as HTMLDivElement; + const buttonElm = menuItemElm.querySelector('button') as HTMLButtonElement; + + // Click the button inside the slotRenderer, which calls preventDefault + buttonElm.click(); + + // Verify the action callback was not called because preventDefault was called + expect(mockAction).not.toHaveBeenCalled(); + }); + }); + describe('with Custom Commands List', () => { beforeEach(() => { slickCellElm = document.createElement('div'); diff --git a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts index bd716d32b0..e5a715cfc9 100644 --- a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts @@ -4,7 +4,7 @@ import { TranslateServiceStub } from '../../../../../test/translateServiceStub.j import { SlickEvent, SlickEventData, type SlickDataView, type SlickGrid } from '../../core/index.js'; import * as utils from '../../core/utils.js'; import { ExtensionUtility } from '../../extensions/extensionUtility.js'; -import type { Column, DOMEvent, GridMenu, GridOption } from '../../interfaces/index.js'; +import type { Column, DOMEvent, GridMenu, GridOption, MenuCommandItem } from '../../interfaces/index.js'; import { BackendUtilityService, SharedService, @@ -70,6 +70,7 @@ const gridStub = { setSelectedRows: vi.fn(), updateColumnById: vi.fn(), updateColumns: vi.fn(), + sanitizeHtmlString: (str: string) => str, setTopPanelVisibility: vi.fn(), setPreHeaderPanelVisibility: vi.fn(), setOptions: vi.fn(), @@ -1249,6 +1250,206 @@ describe('GridMenuControl', () => { }); }); + describe('with slot renderer', () => { + beforeEach(() => { + vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); + vi.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(columnsMock); + vi.spyOn(gridStub, 'getVisibleColumns').mockReturnValue(columnsMock.slice(0, 1)); + }); + + it('should render menu item with slotRenderer returning HTMLElement', () => { + const mockSlotRenderer = vi.fn((item: any) => { + const div = document.createElement('div'); + div.className = 'custom-slot-content'; + div.textContent = `Custom: ${item.title}`; + return div; + }); + + control.columns = columnsMock; + gridOptionsMock.gridMenu = { + commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] as any, + }; + vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); + control.init(); + control.openGridMenu(); + const buttonElm = document.querySelector('.slick-grid-menu-button') as HTMLButtonElement | null; + buttonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const commandListElm = control.menuElement?.querySelector('.slick-menu-command-list') as HTMLDivElement | null; + const customSlotElm = commandListElm?.querySelector('.custom-slot-content') as HTMLDivElement | null; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(customSlotElm).toBeTruthy(); + expect(customSlotElm?.textContent).toBe('Custom: Test Command'); + }); + + it('should render menu item with slotRenderer returning string', () => { + const mockSlotRenderer = vi.fn((item: any) => `String: ${item.title}`); + + control.columns = columnsMock; + gridOptionsMock.gridMenu = { + commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] as any, + }; + vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); + control.init(); + control.openGridMenu(); + const buttonElm = document.querySelector('.slick-grid-menu-button') as HTMLButtonElement | null; + buttonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const commandListElm = control.menuElement?.querySelector('.slick-menu-command-list') as HTMLDivElement | null; + const customSlotElm = commandListElm?.querySelector('.custom-string') as HTMLDivElement | null; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(customSlotElm).toBeTruthy(); + expect(customSlotElm?.textContent).toContain('String: Test Command'); + }); + + it('should render menu item with defaultItemRenderer when item has no slotRenderer', () => { + const mockDefaultRenderer = vi.fn((item: any) => { + const div = document.createElement('div'); + div.className = 'default-renderer-content'; + div.textContent = `Default: ${item.title}`; + return div; + }); + + control.columns = columnsMock; + gridOptionsMock.gridMenu = { + commandItems: [{ command: 'test-cmd', title: 'Test Command' }] as any, + defaultItemRenderer: mockDefaultRenderer, + }; + vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); + control.init(); + control.openGridMenu(); + const buttonElm = document.querySelector('.slick-grid-menu-button') as HTMLButtonElement | null; + buttonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const commandListElm = control.menuElement?.querySelector('.slick-menu-command-list') as HTMLDivElement | null; + const defaultRendererElm = commandListElm?.querySelector('.default-renderer-content') as HTMLDivElement | null; + + expect(mockDefaultRenderer).toHaveBeenCalled(); + expect(defaultRendererElm).toBeTruthy(); + expect(defaultRendererElm?.textContent).toBe('Default: Test Command'); + }); + + it('should prioritize item slotRenderer over defaultItemRenderer', () => { + const mockSlotRenderer = vi.fn((item: any) => { + const div = document.createElement('div'); + div.className = 'slot-prioritized'; + div.textContent = 'Slot renderer prioritized'; + return div; + }); + + control.columns = columnsMock; + gridOptionsMock.gridMenu = { + commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] as any, + defaultItemRenderer: vi.fn(), + }; + vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); + control.init(); + control.openGridMenu(); + const buttonElm = document.querySelector('.slick-grid-menu-button') as HTMLButtonElement | null; + buttonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const commandListElm = control.menuElement?.querySelector('.slick-menu-command-list') as HTMLDivElement | null; + const slotRendererElm = commandListElm?.querySelector('.slot-prioritized') as HTMLDivElement | null; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(slotRendererElm).toBeTruthy(); + expect(slotRendererElm?.textContent).toBe('Slot renderer prioritized'); + }); + + it('should pass correct arguments (item and args) to slotRenderer callback', () => { + const mockSlotRenderer = vi.fn((item: any, args: any) => { + const div = document.createElement('div'); + div.className = 'renderer-args-test'; + div.textContent = `Item: ${item.command}, Grid: ${args?.grid ? 'present' : 'missing'}`; + return div; + }); + + control.columns = columnsMock; + gridOptionsMock.gridMenu = { + commandItems: [{ command: 'test-cmd', title: 'Test Command with Args', slotRenderer: mockSlotRenderer }] as any, + }; + vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); + control.init(); + control.openGridMenu(); + const buttonElm = document.querySelector('.slick-grid-menu-button') as HTMLButtonElement | null; + buttonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + expect(mockSlotRenderer).toHaveBeenCalled(); + const callArgs = mockSlotRenderer.mock.calls[0]; + expect(callArgs[0].command).toBe('test-cmd'); + expect(callArgs[1]).toBeDefined(); + expect(callArgs[1].grid).toBe(gridStub); + }); + + it('should call slotRenderer with click event as third argument when menu item is clicked', () => { + const mockSlotRenderer = vi.fn((item: any, args: any, event?: Event) => { + const div = document.createElement('div'); + div.className = 'click-test'; + return div; + }); + + control.columns = columnsMock; + gridOptionsMock.gridMenu = { + commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] as any, + }; + vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); + control.init(); + control.openGridMenu(); + const buttonElm = document.querySelector('.slick-grid-menu-button') as HTMLButtonElement | null; + buttonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const commandListElm = control.menuElement?.querySelector('.slick-menu-command-list') as HTMLDivElement | null; + const menuItemElm = commandListElm?.querySelector('.slick-menu-item') as HTMLDivElement | null; + + // Click the menu item + menuItemElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true })); + + // Verify slotRenderer was called with the click event as the third argument + // GridMenu calls slotRenderer 3 times: init, openMenu, and click + expect(mockSlotRenderer).toHaveBeenCalledTimes(3); + const clickCallArgs = mockSlotRenderer.mock.calls[2]; // third call is from click + expect(clickCallArgs[2]).toBeDefined(); + expect(clickCallArgs[2]!.type).toBe('click'); + }); + + it('should not trigger menu action when slotRenderer calls preventDefault on click event', () => { + const mockAction = vi.fn(); + const mockSlotRenderer = vi.fn((item: any, args: any, event?: Event) => { + const div = document.createElement('div'); + div.className = 'prevent-default-test'; + const button = document.createElement('button'); + button.textContent = 'Interactive'; + button.onclick = (e) => { + e.preventDefault(); // Prevent default action + }; + div.appendChild(button); + return div; + }); + + control.columns = columnsMock; + gridOptionsMock.gridMenu = { + commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer, action: mockAction }] as any, + }; + vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); + control.init(); + control.openGridMenu(); + const buttonElm = document.querySelector('.slick-grid-menu-button') as HTMLButtonElement | null; + buttonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const commandListElm = control.menuElement?.querySelector('.slick-menu-command-list') as HTMLDivElement | null; + const menuItemElm = commandListElm?.querySelector('.slick-menu-item') as HTMLDivElement | null; + const buttonInMenuElm = menuItemElm?.querySelector('button') as HTMLButtonElement | null; + + // Click the button inside the slotRenderer, which calls preventDefault + buttonInMenuElm?.click(); + + // Verify the action callback was not called because preventDefault was called + expect(mockAction).not.toHaveBeenCalled(); + }); + }); + describe('addGridMenuCustomCommands method', () => { beforeEach(() => { translateService.use('fr'); @@ -1912,8 +2113,8 @@ describe('GridMenuControl', () => { expect(copyGridOptionsMock.darkMode).toBeTruthy(); }); - it('should call the grid "setHeaderRowVisibility" method when the command triggered is "toggle-filter"', () => { - let copyGridOptionsMock = { + it('should call the grid "setHeaderRowVisibility" method when the command triggered is "toggle-filter" (off to on)', () => { + const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: false, @@ -1934,19 +2135,30 @@ describe('GridMenuControl', () => { expect(setHeaderSpy).toHaveBeenCalledWith(true); expect(scrollSpy).toHaveBeenCalledWith(0); expect(updateColumnSpy).toHaveBeenCalledTimes(1); + }); - copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, hideToggleFilterCommand: false } as unknown as GridOption; + it('should call the grid "setHeaderRowVisibility" method when the command triggered is "toggle-filter" (on to off)', () => { + const copyGridOptionsMock = { + ...gridOptionsMock, + enableFiltering: true, + showHeaderRow: true, + hideToggleFilterCommand: false, + } as unknown as GridOption; vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock); vi.spyOn(gridStub, 'getOptions').mockReturnValue(copyGridOptionsMock); + const setHeaderSpy = vi.spyOn(gridStub, 'setHeaderRowVisibility'); + + control.init(); + control.columns = columnsMock; + const clickEvent = new Event('click', { bubbles: true, cancelable: true, composed: false }); document.querySelector('.slick-grid-menu-button')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); control.menuElement!.querySelector('.slick-menu-item[data-command=toggle-filter]')!.dispatchEvent(clickEvent); expect(setHeaderSpy).toHaveBeenCalledWith(false); - expect(updateColumnSpy).toHaveBeenCalledTimes(1); // same as before, so count won't increase }); - it('should call the grid "setPreHeaderPanelVisibility" method when the command triggered is "toggle-preheader"', () => { - let copyGridOptionsMock = { ...gridOptionsMock, showPreHeaderPanel: true, hideTogglePreHeaderCommand: false } as unknown as GridOption; + it('should call the grid "setPreHeaderPanelVisibility" method when the command triggered is "toggle-preheader" (on to off)', () => { + const copyGridOptionsMock = { ...gridOptionsMock, showPreHeaderPanel: true, hideTogglePreHeaderCommand: false } as unknown as GridOption; vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock); vi.spyOn(gridStub, 'getOptions').mockReturnValue(copyGridOptionsMock); @@ -1957,14 +2169,6 @@ describe('GridMenuControl', () => { control.menuElement!.querySelector('.slick-menu-item[data-command=toggle-preheader]')!.dispatchEvent(clickEvent); expect(gridStub.setPreHeaderPanelVisibility).toHaveBeenCalledWith(false); - - copyGridOptionsMock = { ...gridOptionsMock, showPreHeaderPanel: false, hideTogglePreHeaderCommand: false } as unknown as GridOption; - vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock); - vi.spyOn(gridStub, 'getOptions').mockReturnValue(copyGridOptionsMock); - document.querySelector('.slick-grid-menu-button')!.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); - control.menuElement!.querySelector('.slick-menu-item[data-command=toggle-preheader]')!.dispatchEvent(clickEvent); - - expect(gridStub.setPreHeaderPanelVisibility).toHaveBeenCalledWith(true); }); it('should call "refreshBackendDataset" method when the command triggered is "refresh-dataset"', () => { diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts index b39d35b6e0..f074f43ea7 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts @@ -55,6 +55,7 @@ const gridStub = { getUID: () => 'slickgrid12345', getOptions: () => gridOptionsMock, registerPlugin: vi.fn(), + sanitizeHtmlString: (str: string) => str, setColumns: vi.fn(), setOptions: vi.fn(), setSortColumns: vi.fn(), @@ -856,6 +857,215 @@ describe('HeaderMenu Plugin', () => { }); }); + describe('with slot renderer', () => { + let gridContainerDiv: HTMLDivElement; + let headerDiv: HTMLDivElement; + let headersDiv: HTMLDivElement; + let parentContainer: HTMLDivElement; + let eventData: SlickEventData; + + beforeEach(() => { + headerDiv = document.createElement('div'); + headerDiv.className = 'slick-header-column'; + headersDiv = document.createElement('div'); + headersDiv.className = 'slick-header-columns'; + headersDiv.appendChild(headerDiv); + gridContainerDiv = document.createElement('div'); + gridContainerDiv.className = 'slickgrid-container'; + gridContainerDiv.appendChild(headersDiv); + parentContainer = document.createElement('div'); + parentContainer.appendChild(gridContainerDiv); + document.body.appendChild(parentContainer); + sharedService.gridContainerElement = parentContainer; + vi.spyOn(gridStub, 'getContainerNode').mockReturnValue(gridContainerDiv); + vi.spyOn(gridStub, 'getGridPosition').mockReturnValue({ top: 10, bottom: 5, left: 15, right: 22, width: 225 } as any); + eventData = { ...new SlickEventData(), preventDefault: vi.fn() } as any; + }); + + afterEach(() => { + parentContainer?.remove(); + }); + + it('should render menu item with slotRenderer returning HTMLElement', () => { + const mockSlotRenderer = vi.fn((item: any) => { + const div = document.createElement('div'); + div.className = 'custom-slot-content'; + div.textContent = `Custom: ${item.title}`; + return div; + }); + + columnsMock[1].header!.menu = { commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] as any }; + plugin.init(columnsMock as any); + gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData, gridStub); + gridStub.onHeaderCellRendered.notify({ column: columnsMock[1], node: headerDiv, grid: gridStub }, eventData, gridStub); + const headerButtonElm = headerDiv.querySelector('.slick-header-menu-button') as any; + headerButtonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const headerMenuElm = gridContainerDiv.querySelector('.slick-header-menu') as any; + const commandListElm = headerMenuElm?.querySelector('.slick-menu-command-list') as any; + const customSlotElm = commandListElm?.querySelector('.custom-slot-content') as any; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(customSlotElm).toBeTruthy(); + expect(customSlotElm?.textContent).toBe('Custom: Test Command'); + }); + + it('should render menu item with slotRenderer returning string', () => { + const mockSlotRenderer = vi.fn((item: any) => `String: ${item.title}`); + + columnsMock[1].header!.menu = { commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] as any }; + plugin.init(columnsMock as any); + gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData, gridStub); + gridStub.onHeaderCellRendered.notify({ column: columnsMock[1], node: headerDiv, grid: gridStub }, eventData, gridStub); + const headerButtonElm = headerDiv.querySelector('.slick-header-menu-button') as any; + headerButtonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const headerMenuElm = gridContainerDiv.querySelector('.slick-header-menu') as any; + const commandListElm = headerMenuElm?.querySelector('.slick-menu-command-list') as any; + const customSlotElm = commandListElm?.querySelector('.custom-string') as any; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(customSlotElm).toBeTruthy(); + expect(customSlotElm?.textContent).toContain('String: Test Command'); + }); + + it('should render menu item with defaultItemRenderer when item has no slotRenderer', () => { + const mockDefaultRenderer = vi.fn((item: any) => { + const div = document.createElement('div'); + div.className = 'default-renderer-content'; + div.textContent = `Default: ${item.title}`; + return div; + }); + + columnsMock[1].header!.menu = { commandItems: [{ command: 'test-cmd', title: 'Test Command' }] as any }; + plugin.init(columnsMock as any); + plugin.addonOptions.defaultItemRenderer = mockDefaultRenderer as any; + gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData, gridStub); + gridStub.onHeaderCellRendered.notify({ column: columnsMock[1], node: headerDiv, grid: gridStub }, eventData, gridStub); + const headerButtonElm = headerDiv.querySelector('.slick-header-menu-button') as any; + headerButtonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const headerMenuElm = gridContainerDiv.querySelector('.slick-header-menu') as any; + const commandListElm = headerMenuElm?.querySelector('.slick-menu-command-list') as any; + const defaultRendererElm = commandListElm?.querySelector('.default-renderer-content') as any; + + expect(mockDefaultRenderer).toHaveBeenCalled(); + expect(defaultRendererElm).toBeTruthy(); + expect(defaultRendererElm?.textContent).toBe('Default: Test Command'); + }); + + it('should prioritize item slotRenderer over defaultItemRenderer', () => { + const mockSlotRenderer = vi.fn((item: any) => { + const div = document.createElement('div'); + div.className = 'slot-prioritized'; + div.textContent = 'Slot renderer prioritized'; + return div; + }); + const mockDefaultRenderer = vi.fn(); + + columnsMock[1].header!.menu = { commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] as any }; + plugin.init(columnsMock as any); + plugin.addonOptions.defaultItemRenderer = mockDefaultRenderer as any; + gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData, gridStub); + gridStub.onHeaderCellRendered.notify({ column: columnsMock[1], node: headerDiv, grid: gridStub }, eventData, gridStub); + const headerButtonElm = headerDiv.querySelector('.slick-header-menu-button') as any; + headerButtonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const headerMenuElm = gridContainerDiv.querySelector('.slick-header-menu') as any; + const commandListElm = headerMenuElm?.querySelector('.slick-menu-command-list') as any; + const slotRendererElm = commandListElm?.querySelector('.slot-prioritized') as any; + + expect(mockSlotRenderer).toHaveBeenCalled(); + expect(slotRendererElm).toBeTruthy(); + expect(slotRendererElm?.textContent).toBe('Slot renderer prioritized'); + }); + + it('should pass correct arguments (item and args) to slotRenderer callback', () => { + const mockSlotRenderer = vi.fn((item: any, args: any) => { + const div = document.createElement('div'); + div.className = 'renderer-args-test'; + div.textContent = `Item: ${item.command}, Grid: ${args?.grid ? 'present' : 'missing'}`; + return div; + }); + + columnsMock[1].header!.menu = { commandItems: [{ command: 'test-cmd', title: 'Test Command with Args', slotRenderer: mockSlotRenderer }] as any }; + plugin.init(columnsMock as any); + gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData, gridStub); + gridStub.onHeaderCellRendered.notify({ column: columnsMock[1], node: headerDiv, grid: gridStub }, eventData, gridStub); + const headerButtonElm = headerDiv.querySelector('.slick-header-menu-button') as any; + headerButtonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + expect(mockSlotRenderer).toHaveBeenCalled(); + const callArgs = mockSlotRenderer.mock.calls[0]; + expect(callArgs[0].command).toBe('test-cmd'); + expect(callArgs[1]).toBeDefined(); + expect(callArgs[1].grid).toBe(gridStub); + }); + + it('should call slotRenderer with click event as third argument when menu item is clicked', () => { + const mockSlotRenderer = vi.fn((item: any, args: any, event?: Event) => { + const div = document.createElement('div'); + div.className = 'click-test'; + return div; + }); + + columnsMock[1].header!.menu = { commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] as any }; + plugin.init(columnsMock as any); + gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData, gridStub); + gridStub.onHeaderCellRendered.notify({ column: columnsMock[1], node: headerDiv, grid: gridStub }, eventData, gridStub); + const headerButtonElm = headerDiv.querySelector('.slick-header-menu-button') as any; + headerButtonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const headerMenuElm = gridContainerDiv.querySelector('.slick-header-menu') as any; + const commandListElm = headerMenuElm?.querySelector('.slick-menu-command-list') as any; + const menuItemElm = commandListElm?.querySelector('.slick-menu-item') as any; + + // Click the menu item + menuItemElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true })); + + // Verify slotRenderer was called with the click event as the third argument + expect(mockSlotRenderer).toHaveBeenCalledTimes(2); // once for render, once for click + const clickCallArgs = mockSlotRenderer.mock.calls[1]; // second call is from click + expect(clickCallArgs[2]).toBeDefined(); + expect(clickCallArgs[2]!.type).toBe('click'); + }); + + it('should not trigger menu action when slotRenderer calls preventDefault on click event', () => { + const mockAction = vi.fn(); + const mockSlotRenderer = vi.fn((item: any, args: any, event?: Event) => { + const div = document.createElement('div'); + div.className = 'prevent-default-test'; + const button = document.createElement('button'); + button.textContent = 'Interactive'; + button.onclick = (e) => { + e.preventDefault(); // Prevent default action + }; + div.appendChild(button); + return div; + }); + + columnsMock[1].header!.menu = { + commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer, action: mockAction }] as any, + }; + plugin.init(columnsMock as any); + gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData, gridStub); + gridStub.onHeaderCellRendered.notify({ column: columnsMock[1], node: headerDiv, grid: gridStub }, eventData, gridStub); + const headerButtonElm = headerDiv.querySelector('.slick-header-menu-button') as any; + headerButtonElm?.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const headerMenuElm = gridContainerDiv.querySelector('.slick-header-menu') as any; + const commandListElm = headerMenuElm?.querySelector('.slick-menu-command-list') as any; + const menuItemElm = commandListElm?.querySelector('.slick-menu-item') as any; + const buttonElm = menuItemElm?.querySelector('button') as HTMLButtonElement; + + // Click the button inside the slotRenderer, which calls preventDefault + buttonElm?.click(); + + // Verify the action callback was not called because preventDefault was called + expect(mockAction).not.toHaveBeenCalled(); + }); + }); + describe('Internal Custom Commands', () => { let eventData: SlickEventData; From 003c788818d95407f1fd6116ca75d46193770813 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 11 Feb 2026 21:13:37 -0500 Subject: [PATCH 05/24] chore: add new `commandListBuilder` callback --- demos/vanilla/src/examples/example40.html | 18 + demos/vanilla/src/examples/example40.scss | 2 +- demos/vanilla/src/examples/example40.ts | 356 +++++++++++------- docs/menu-slots.md | 80 ++-- .../__tests__/slickGridMenu.spec.ts | 14 + .../__tests__/slickHeaderMenu.spec.ts | 83 +++- .../common/src/extensions/extensionUtility.ts | 2 +- .../common/src/extensions/slickCellMenu.ts | 1 + .../common/src/extensions/slickContextMenu.ts | 30 +- .../common/src/extensions/slickGridMenu.ts | 232 ++++++------ .../common/src/extensions/slickHeaderMenu.ts | 55 +-- .../interfaces/cellMenuOption.interface.ts | 2 +- .../src/interfaces/menuItem.interface.ts | 9 +- .../src/interfaces/menuOption.interface.ts | 42 ++- 14 files changed, 580 insertions(+), 346 deletions(-) diff --git a/demos/vanilla/src/examples/example40.html b/demos/vanilla/src/examples/example40.html index b5fa4aa2b2..31b7f08d46 100644 --- a/demos/vanilla/src/examples/example40.html +++ b/demos/vanilla/src/examples/example40.html @@ -36,4 +36,22 @@

+
+
+ + + + +
+
+
diff --git a/demos/vanilla/src/examples/example40.scss b/demos/vanilla/src/examples/example40.scss index 9c7e16f377..97b79130be 100644 --- a/demos/vanilla/src/examples/example40.scss +++ b/demos/vanilla/src/examples/example40.scss @@ -13,7 +13,7 @@ body { .slick-context-menu, .slick-grid-menu, .slick-header-menu { - .slick-menu-item:hover { + .slick-menu-item:hover:not(.slick-menu-item-disabled) { color: #0a34b5; } } diff --git a/demos/vanilla/src/examples/example40.ts b/demos/vanilla/src/examples/example40.ts index ce822557fa..79a36f26d3 100644 --- a/demos/vanilla/src/examples/example40.ts +++ b/demos/vanilla/src/examples/example40.ts @@ -1,6 +1,17 @@ import { format as tempoFormat } from '@formkit/tempo'; import { BindingEventService } from '@slickgrid-universal/binding'; -import { createDomElement, Filters, Formatters, getOffset, type Column, type GridOption } from '@slickgrid-universal/common'; +import { + Aggregators, + createDomElement, + Filters, + Formatters, + getOffset, + SortComparers, + SortDirectionNumber, + type Column, + type GridOption, + type Grouping, +} from '@slickgrid-universal/common'; import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle'; import { ExampleGridOptions } from './example-grid-options.js'; @@ -187,11 +198,11 @@ export default class Example40 { command: 'custom-action', title: 'Advanced Export', // Demo: Native HTMLElement with event listeners using slotRenderer (full DOM control) - slotRenderer: (item, _args) => { + slotRenderer: (cmdItem, _args) => { // you can use `createDomElement()` from Slickgrid for easier DOM element creation const containerDiv = createDomElement('div', { className: 'menu-item' }); const iconDiv = createDomElement('div', { className: 'advanced-export-icon', textContent: '📊' }); - const textSpan = createDomElement('span', { textContent: item.title, style: { flex: '1' } }); + const textSpan = createDomElement('span', { textContent: cmdItem.title, style: { flex: '1' } }); const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'Ctrl+E' }); containerDiv.appendChild(iconDiv); containerDiv.appendChild(textSpan); @@ -208,8 +219,8 @@ export default class Example40 { containerDiv.querySelector('.key-hint')!.style.color = 'black'; }); containerDiv.addEventListener('mouseleave', () => { - iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; iconDiv.style.transform = 'scale(1)'; + iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; containerDiv.parentElement!.style.backgroundColor = 'white'; containerDiv.style.color = 'black'; document.querySelector('.export-timestamp')?.remove(); @@ -282,11 +293,11 @@ export default class Example40 { hideCloseButton: false, commandTitle: 'Cell Actions', // Demo: Menu-level default renderer that applies to all items unless overridden - defaultItemRenderer: (item, _args) => { + defaultItemRenderer: (cmdItem, _args) => { return `
- ${item.iconCssClass ? `` : '◦'} - ${item.title} + ${cmdItem.iconCssClass ? `` : '◦'} + ${cmdItem.title}
`; }, @@ -386,17 +397,18 @@ export default class Example40 { enableCellNavigation: true, enableFiltering: true, enableSorting: true, + enableGrouping: true, // Header Menu with slots (already configured in columns above) enableHeaderMenu: true, headerMenu: { hideColumnHideCommand: false, // Demo: Menu-level default renderer for all header menu items - defaultItemRenderer: (item, _args) => { + defaultItemRenderer: (cmdItem, _args) => { return `
- ${item.iconCssClass ? `` : ''} - ${item.title} + ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title}
`; }, @@ -408,146 +420,212 @@ export default class Example40 { // Context Menu with slot examples enableContextMenu: true, contextMenu: { + // build your command items list + // spread built-in commands and optionally filter/sort them however you want + commandListBuilder: (builtInItems) => { + return [ + // filter commands if you want + // ...builtInItems.filter((x) => x !== 'divider' && x.command !== 'copy' && x.command !== 'clear-grouping'), + ...builtInItems, + { divider: true, command: '' }, + { + // positionOrder: 60, + command: 'edit-cell', + title: 'Edit Cell', + // Demo: Individual slotRenderer overrides the menu's defaultItemRenderer + slotRenderer: (cmdItem, _args) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const containerDiv = createDomElement('div', { className: 'menu-item' }); + const iconDiv = createDomElement('div', { className: 'edit-cell-icon', textContent: '✎' }); + const textSpan = createDomElement('span', { textContent: cmdItem.title, style: { flex: '1' } }); + const kbdElm = createDomElement('kbd', { className: 'edit-cell', textContent: 'F2' }); + containerDiv.appendChild(iconDiv); + containerDiv.appendChild(textSpan); + containerDiv.appendChild(kbdElm); + + // Native event listeners for interactive effects + containerDiv.addEventListener('mouseenter', () => { + iconDiv.style.transform = 'rotate(15deg) scale(1.1)'; + iconDiv.style.boxShadow = '0 2px 8px rgba(0,200,83,0.4)'; + }); + containerDiv.addEventListener('mouseleave', () => { + iconDiv.style.transform = 'rotate(0deg) scale(1)'; + iconDiv.style.boxShadow = 'none'; + }); + + return containerDiv; + }, + action: () => alert('Edit cell'), + }, + { divider: true, command: '' }, + { + command: 'export', + title: 'Export', + iconCssClass: 'mdi mdi-download', + commandItems: [ + { + command: 'export-excel', + title: 'Export as Excel', + iconCssClass: 'mdi mdi-file-excel-outline text-success', + action: () => alert('Export to Excel'), + }, + { + command: 'export-csv', + title: 'Export as CSV', + iconCssClass: 'mdi mdi-file-document-outline', + action: () => alert('Export to CSV'), + }, + { + command: 'export-pdf', + title: 'Export as PDF', + iconCssClass: 'mdi mdi-file-pdf-outline text-danger', + action: () => alert('Export to PDF'), + }, + ], + }, + { divider: true, command: '' }, + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: () => alert('Delete row'), + }, + ]; + // commandItems.sort((a, b) => (a === 'divider' || b === 'divider' ? 0 : a.title! > b.title! ? -1 : 1)); + // console.log('initial command items', commandItems); + // return commandItems; + }, // Demo: Menu-level default renderer for context menu items - defaultItemRenderer: (item, _args) => { + defaultItemRenderer: (cmdItem, _args) => { return `
- ${item.iconCssClass ? `` : ''} - ${item.title} + ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title}
`; }, - commandItems: [ - { - positionOrder: 60, - command: 'edit-cell', - title: 'Edit Cell', - // Demo: Individual slotRenderer overrides the menu's defaultItemRenderer - slotRenderer: (item, _args) => { - // you can use `createDomElement()` from Slickgrid for easier DOM element creation - const containerDiv = createDomElement('div', { className: 'menu-item' }); - const iconDiv = createDomElement('div', { className: 'edit-cell-icon', textContent: '✎' }); - const textSpan = createDomElement('span', { textContent: item.title, style: { flex: '1' } }); - const kbdElm = createDomElement('kbd', { className: 'edit-cell', textContent: 'F2' }); - containerDiv.appendChild(iconDiv); - containerDiv.appendChild(textSpan); - containerDiv.appendChild(kbdElm); + // commandItems: [ + // { + // positionOrder: 60, + // command: 'edit-cell', + // title: 'Edit Cell', + // // Demo: Individual slotRenderer overrides the menu's defaultItemRenderer + // slotRenderer: (cmdItem, _args) => { + // // you can use `createDomElement()` from Slickgrid for easier DOM element creation + // const containerDiv = createDomElement('div', { className: 'menu-item' }); + // const iconDiv = createDomElement('div', { className: 'edit-cell-icon', textContent: '✎' }); + // const textSpan = createDomElement('span', { textContent: cmdItem.title, style: { flex: '1' } }); + // const kbdElm = createDomElement('kbd', { className: 'edit-cell', textContent: 'F2' }); + // containerDiv.appendChild(iconDiv); + // containerDiv.appendChild(textSpan); + // containerDiv.appendChild(kbdElm); - // Native event listeners for interactive effects - containerDiv.addEventListener('mouseenter', () => { - iconDiv.style.transform = 'rotate(15deg) scale(1.1)'; - iconDiv.style.boxShadow = '0 2px 8px rgba(0,200,83,0.4)'; - }); - containerDiv.addEventListener('mouseleave', () => { - iconDiv.style.transform = 'rotate(0deg) scale(1)'; - iconDiv.style.boxShadow = 'none'; - }); + // // Native event listeners for interactive effects + // containerDiv.addEventListener('mouseenter', () => { + // iconDiv.style.transform = 'rotate(15deg) scale(1.1)'; + // iconDiv.style.boxShadow = '0 2px 8px rgba(0,200,83,0.4)'; + // }); + // containerDiv.addEventListener('mouseleave', () => { + // iconDiv.style.transform = 'rotate(0deg) scale(1)'; + // iconDiv.style.boxShadow = 'none'; + // }); - return containerDiv; - }, - action: () => alert('Edit cell'), - }, - { divider: true, command: '' }, - { - command: 'export', - title: 'Export', - iconCssClass: 'mdi mdi-download', - commandItems: [ - { - command: 'export-excel', - title: 'Export as Excel', - iconCssClass: 'mdi mdi-file-excel-outline text-success', - action: () => alert('Export to Excel'), - }, - { - command: 'export-csv', - title: 'Export as CSV', - iconCssClass: 'mdi mdi-file-document-outline', - action: () => alert('Export to CSV'), - }, - { - command: 'export-pdf', - title: 'Export as PDF', - iconCssClass: 'mdi mdi-file-pdf-outline text-danger', - action: () => alert('Export to PDF'), - }, - ], - }, - { divider: true, command: '' }, - { - command: 'delete-row', - title: 'Delete Row', - iconCssClass: 'mdi mdi-delete text-danger', - action: () => alert('Delete row'), - }, - ], + // return containerDiv; + // }, + // action: () => alert('Edit cell'), + // }, + // { divider: true, command: '' }, + // { + // command: 'export', + // title: 'Export', + // iconCssClass: 'mdi mdi-download', + // commandItems: [ + // { + // command: 'export-excel', + // title: 'Export as Excel', + // iconCssClass: 'mdi mdi-file-excel-outline text-success', + // action: () => alert('Export to Excel'), + // }, + // { + // command: 'export-csv', + // title: 'Export as CSV', + // iconCssClass: 'mdi mdi-file-document-outline', + // action: () => alert('Export to CSV'), + // }, + // { + // command: 'export-pdf', + // title: 'Export as PDF', + // iconCssClass: 'mdi mdi-file-pdf-outline text-danger', + // action: () => alert('Export to PDF'), + // }, + // ], + // }, + // { divider: true, command: '' }, + // { + // command: 'delete-row', + // title: 'Delete Row', + // iconCssClass: 'mdi mdi-delete text-danger', + // action: () => alert('Delete row'), + // }, + // ], }, // Grid Menu with slot examples (demonstrating defaultItemRenderer at menu level) enableGridMenu: true, gridMenu: { // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) - defaultItemRenderer: (item, _args) => { + defaultItemRenderer: (cmdItem, _args) => { return `
- ${item.iconCssClass ? `` : ''} - ${item.title} + ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title}
`; }, - commandItems: [ - { - command: 'toggle-filter', - title: 'Toggle Filter Row', - iconCssClass: 'mdi mdi-filter-outline', - action: () => alert('Toggle filter row'), - }, - { - command: 'clear-filters', - title: 'Clear All Filters', - iconCssClass: 'mdi mdi-filter-remove-outline', - action: () => alert('Clear filters'), - }, - { divider: true, command: '' }, - { - command: 'export-excel', - title: 'Export to Excel', - iconCssClass: 'mdi mdi-file-excel-outline', - action: () => alert('Export to Excel'), - }, - { - command: 'export-csv', - title: 'Export to CSV', - iconCssClass: 'mdi mdi-download', - // Individual slotRenderer overrides the defaultItemRenderer for this item - slotRenderer: (item, _args) => ` + commandListBuilder: (builtInItems) => { + return [ + ...builtInItems, + { divider: true, command: '' }, + { + command: 'export-excel', + title: 'Export to Excel', + iconCssClass: 'mdi mdi-file-excel-outline', + action: () => alert('Export to Excel'), + }, + { + command: 'export-csv', + title: 'Export to CSV', + iconCssClass: 'mdi mdi-download', + // Individual slotRenderer overrides the defaultItemRenderer for this item + slotRenderer: (cmdItem, _args) => `
- - ${item.title} + + ${cmdItem.title} CUSTOM
`, - action: () => alert('Export to CSV'), - }, - { - command: 'refresh-data', - title: 'Refresh Data', - iconCssClass: 'mdi mdi-refresh', - // Demo: slotRenderer with keyboard shortcut - slotRenderer: (item) => { - // you can use `createDomElement()` from Slickgrid for easier DOM element creation - const menuItemElm = createDomElement('div', { className: 'menu-item' }); - const iconElm = createDomElement('i', { className: `${item.iconCssClass} menu-item-icon` }); - const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: item.title }); - const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'F5' }); - menuItemElm.appendChild(iconElm); - menuItemElm.appendChild(menuItemLabelElm); - menuItemElm.appendChild(kbdElm); - return menuItemElm; + action: () => alert('Export to CSV'), }, - action: () => alert('Refresh data'), - }, - ], + { + command: 'refresh-data', + title: 'Refresh Data', + iconCssClass: 'mdi mdi-refresh', + // Demo: slotRenderer with keyboard shortcut + slotRenderer: (cmdItem) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const menuItemElm = createDomElement('div', { className: 'menu-item' }); + const iconElm = createDomElement('i', { className: `${cmdItem.iconCssClass} menu-item-icon` }); + const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: cmdItem.title }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'F5' }); + menuItemElm.appendChild(iconElm); + menuItemElm.appendChild(menuItemLabelElm); + menuItemElm.appendChild(kbdElm); + return menuItemElm; + }, + action: () => alert('Refresh data'), + }, + ]; + }, }, // tooltip plugin @@ -568,6 +646,32 @@ export default class Example40 { return div; } + clearGrouping() { + this.sgb?.dataView?.setGrouping([]); + } + + collapseAllGroups() { + this.sgb?.dataView?.collapseAllGroups(); + } + + expandAllGroups() { + this.sgb?.dataView?.expandAllGroups(); + } + + groupByDuration() { + // you need to manually add the sort icon(s) in UI + this.sgb?.slickGrid?.setSortColumns([{ columnId: 'duration', sortAsc: true }]); + this.sgb?.dataView?.setGrouping({ + getter: 'duration', + formatter: (g) => `Duration: ${g.value} (${g.count} items)`, + comparer: (a, b) => SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc), + aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')], + aggregateCollapsed: false, + lazyTotalsCalculation: true, + } as Grouping); + this.sgb?.slickGrid?.invalidate(); // invalidate all rows and re-render + } + loadData(count: number): ReportItem[] { const tmpData: ReportItem[] = []; for (let i = 0; i < count; i++) { diff --git a/docs/menu-slots.md b/docs/menu-slots.md index 74d892b2c3..ab7c3367fc 100644 --- a/docs/menu-slots.md +++ b/docs/menu-slots.md @@ -9,10 +9,10 @@ Each menu item can define a `slotRenderer` callback function that receives the i ### Slot Renderer Callback ```typescript -slotRenderer?: (item: any, args: any, event?: Event) => string | HTMLElement +slotRenderer?: (cmdItem: any, args: any, event?: Event) => string | HTMLElement ``` -- **item** - The menu item object containing command, title, iconCssClass, etc. +- **cmdItem** - The menu cmdItem object containing command, title, iconCssClass, etc. - **args** - The callback args providing access to grid, column, dataContext, and other context - **event** - Optional DOM event passed during click handling (allows `stopPropagation()`) @@ -42,27 +42,27 @@ const menuItem = { command: 'notifications', title: 'Notifications', // Return HTMLElement for more control and event listeners - slotRenderer: (item, args) => { + slotRenderer: (cmdItem, args) => { const container = document.createElement('div'); container.style.display = 'flex'; container.style.alignItems = 'center'; - + const icon = document.createElement('i'); icon.className = 'mdi mdi-bell'; icon.style.marginRight = '8px'; - + const text = document.createElement('span'); - text.textContent = item.title; - + text.textContent = cmdItem.title; + const badge = document.createElement('span'); badge.className = 'badge'; badge.textContent = '5'; badge.style.marginLeft = 'auto'; - + container.appendChild(icon); container.appendChild(text); container.appendChild(badge); - + return container; } }; @@ -75,11 +75,11 @@ Set a `defaultItemRenderer` at the menu option level to apply to all items (unle ```typescript const menuOption = { // Apply this renderer to all menu items (can be overridden per item) - defaultItemRenderer: (item, args) => { + defaultItemRenderer: (cmdItem, args) => { return `
- ${item.iconCssClass ? `` : ''} - ${item.title} + ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title}
`; }, @@ -114,7 +114,7 @@ const columnDef = { id: 'name', header: { menu: { - defaultItemRenderer: (item, args) => `
${item.title}
`, + defaultItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, commandItems: [ { command: 'sort', @@ -132,12 +132,12 @@ const columnDef = { const columnDef = { id: 'action', cellMenu: { - defaultItemRenderer: (item, args) => `
${item.title}
`, + defaultItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, commandItems: [ { command: 'edit', title: 'Edit', - slotRenderer: (item, args) => `
Edit row ${args.dataContext.id}
` + slotRenderer: (cmdItem, args) => `
Edit row ${args.dataContext.id}
` } ] } @@ -149,7 +149,7 @@ const columnDef = { const gridOptions = { enableContextMenu: true, contextMenu: { - defaultItemRenderer: (item, args) => `
${item.title}
`, + defaultItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, commandItems: [ { command: 'export', @@ -166,7 +166,7 @@ const gridOptions = { const gridOptions = { enableGridMenu: true, gridMenu: { - defaultItemRenderer: (item, args) => `
${item.title}
`, + defaultItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, commandItems: [ { command: 'refresh', @@ -197,11 +197,11 @@ const menuItem = { const menuItem = { command: 'with-component', title: 'With Angular Component', - slotRenderer: (item, args) => { + slotRenderer: (cmdItem, args) => { // Create a placeholder element const placeholder = document.createElement('div'); placeholder.id = `angular-slot-${Date.now()}`; - + // Schedule component creation for after rendering setTimeout(() => { const element = document.getElementById(placeholder.id); @@ -210,7 +210,7 @@ const menuItem = { element.appendChild(componentRef.location.nativeElement); } }, 0); - + return placeholder; } }; @@ -222,10 +222,10 @@ const menuItem = { const menuItem = { command: 'with-react', title: 'With React Component', - slotRenderer: (item, args) => { + slotRenderer: (cmdItem, args) => { const container = document.createElement('div'); container.id = `react-slot-${Date.now()}`; - + // Schedule component render for after menu renders setTimeout(() => { const element = document.getElementById(container.id); @@ -233,7 +233,7 @@ const menuItem = { ReactDOM.render(, element); } }, 0); - + return container; } }; @@ -245,10 +245,10 @@ const menuItem = { const menuItem = { command: 'with-vue', title: 'With Vue Component', - slotRenderer: (item, args) => { + slotRenderer: (cmdItem, args) => { const container = document.createElement('div'); container.id = `vue-slot-${Date.now()}`; - + // Schedule component mount for after menu renders setTimeout(() => { const element = document.getElementById(container.id); @@ -258,7 +258,7 @@ const menuItem = { element._appInstance = app; } }, 0); - + return container; } }; @@ -303,7 +303,7 @@ const menuItem = { { command: 'edit-row', title: 'Edit Row', - slotRenderer: (item, args) => ` + slotRenderer: (cmdItem, args) => `
Edit Row #${args.dataContext?.id || 'N/A'} @@ -317,13 +317,13 @@ const menuItem = { { command: 'toggle-setting', title: 'Auto Refresh', - slotRenderer: (item, args, event) => { + slotRenderer: (cmdItem, args, event) => { const container = document.createElement('label'); container.style.display = 'flex'; container.style.alignItems = 'center'; container.style.gap = '8px'; container.style.marginRight = 'auto'; - + const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.addEventListener('change', (e) => { @@ -331,10 +331,10 @@ const menuItem = { event?.stopPropagation?.(); console.log('Auto refresh:', checkbox.checked); }); - + const label = document.createElement('span'); - label.textContent = item.title; - + label.textContent = cmdItem.title; + container.appendChild(label); container.appendChild(checkbox); return container; @@ -347,10 +347,10 @@ const menuItem = { { command: 'export-excel', title: 'Export as Excel', - slotRenderer: (item, args) => ` + slotRenderer: (cmdItem, args) => `
- ${item.title} + ${cmdItem.title} RECOMMENDED
` @@ -362,12 +362,12 @@ const menuItem = { { command: 'advanced-export', title: 'Advanced Export', - slotRenderer: (item, args) => { + slotRenderer: (cmdItem, args) => { const container = document.createElement('div'); container.style.display = 'flex'; container.style.alignItems = 'center'; container.style.gap = '8px'; - + const iconDiv = document.createElement('div'); iconDiv.style.width = '20px'; iconDiv.style.height = '20px'; @@ -379,10 +379,10 @@ const menuItem = { iconDiv.style.color = 'white'; iconDiv.style.fontSize = '12px'; iconDiv.innerHTML = '📊'; - + const textSpan = document.createElement('span'); - textSpan.textContent = item.title; - + textSpan.textContent = cmdItem.title; + container.appendChild(iconDiv); container.appendChild(textSpan); return container; @@ -481,7 +481,7 @@ When creating custom renderers, handle potential errors gracefully: { command: 'safe-render', title: 'Safe Render', - slotRenderer: (item, args) => { + slotRenderer: (cmdItem, args) => { try { if (args?.dataContext?.status === 'error') { return `
❌ Error loading
`; diff --git a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts index e5a715cfc9..f6beff47c2 100644 --- a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts @@ -1483,6 +1483,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'clear-pinning', positionOrder: 52, + action: expect.any(Function), }, ]); }); @@ -1503,6 +1504,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'clear-filter', positionOrder: 50, + action: expect.any(Function), }, { _orgTitle: '', @@ -1512,6 +1514,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'toggle-filter', positionOrder: 53, + action: expect.any(Function), }, { _orgTitle: '', @@ -1521,6 +1524,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'refresh-dataset', positionOrder: 58, + action: expect.any(Function), }, ]); }); @@ -1552,6 +1556,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'clear-filter', positionOrder: 50, + action: expect.any(Function), }, ]); }); @@ -1583,6 +1588,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'toggle-filter', positionOrder: 53, + action: expect.any(Function), }, ]); }); @@ -1613,6 +1619,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'toggle-dark-mode', positionOrder: 54, + action: expect.any(Function), }, ]); }); @@ -1644,6 +1651,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'refresh-dataset', positionOrder: 58, + action: expect.any(Function), }, ]); }); @@ -1664,6 +1672,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'toggle-preheader', positionOrder: 53, + action: expect.any(Function), }, ]); }); @@ -1703,6 +1712,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'clear-sorting', positionOrder: 51, + action: expect.any(Function), }, ]); }); @@ -1752,6 +1762,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'export-csv', positionOrder: 55, + action: expect.any(Function), }, ]); }); @@ -1804,6 +1815,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'export-excel', positionOrder: 56, + action: expect.any(Function), }, ]); }); @@ -1837,6 +1849,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'export-pdf', positionOrder: 57, + action: expect.any(Function), }, ]); }); @@ -1867,6 +1880,7 @@ describe('GridMenuControl', () => { disabled: false, command: 'export-text-delimited', positionOrder: 58, + action: expect.any(Function), }, ]); }); diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts index f074f43ea7..19d764191b 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts @@ -1107,6 +1107,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 45, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 48 }, ]); @@ -1123,6 +1124,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 45, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 48 }, ]); @@ -1159,6 +1161,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'UNFREEZE_COLUMNS', command: 'unfreeze-columns', positionOrder: 45, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 48 }, ]); @@ -1175,6 +1178,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'UNFREEZE_COLUMNS', command: 'unfreeze-columns', positionOrder: 45, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 48 }, ]); @@ -1209,6 +1213,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 45, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 48 }, ]); @@ -1250,6 +1255,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 45, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 48 }, ]); @@ -1281,6 +1287,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'REMOVE_FILTER', command: 'clear-filter', positionOrder: 57, + action: expect.any(Function), }, ]; const commandDivElm = gridContainerDiv.querySelector('[data-command="clear-filter"]') as HTMLDivElement; @@ -1325,9 +1332,18 @@ describe('HeaderMenu Plugin', () => { titleKey: 'COLUMN_RESIZE_BY_CONTENT', command: 'column-resize-by-content', positionOrder: 47, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 48 }, - { _orgTitle: '', iconCssClass: 'mdi mdi-close', title: 'Hide Column', titleKey: 'HIDE_COLUMN', command: 'hide-column', positionOrder: 59 }, + { + _orgTitle: '', + iconCssClass: 'mdi mdi-close', + title: 'Hide Column', + titleKey: 'HIDE_COLUMN', + command: 'hide-column', + positionOrder: 59, + action: expect.any(Function), + }, ]; const commandDivElm = gridContainerDiv.querySelector('[data-command="column-resize-by-content"]') as HTMLDivElement; const commandIconElm = commandDivElm.querySelector('.slick-menu-icon') as HTMLDivElement; @@ -1370,6 +1386,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 45, title: 'Freeze Columns', titleKey: 'FREEZE_COLUMNS', + action: expect.any(Function), }, { command: 'show-negative-numbers', cssClass: 'mdi mdi-lightbulb-on', tooltip: 'Highlight negative numbers.' }, { @@ -1379,6 +1396,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 47, title: 'Resize by Content', titleKey: 'COLUMN_RESIZE_BY_CONTENT', + action: expect.any(Function), }, { command: '', divider: true, positionOrder: 48 }, { @@ -1408,7 +1426,15 @@ describe('HeaderMenu Plugin', () => { titleKey: 'FILTER_SHORTCUTS', }, { command: '', divider: true, positionOrder: 56 }, - { _orgTitle: '', command: 'hide-column', iconCssClass: 'mdi mdi-close', positionOrder: 59, title: 'Hide Column', titleKey: 'HIDE_COLUMN' }, + { + _orgTitle: '', + command: 'hide-column', + iconCssClass: 'mdi mdi-close', + positionOrder: 59, + title: 'Hide Column', + titleKey: 'HIDE_COLUMN', + action: expect.any(Function), + }, ]; const shortcutSubMenuElm = gridContainerDiv.querySelector('[data-command="filter-shortcuts-root-menu"]') as HTMLDivElement; shortcutSubMenuElm!.dispatchEvent(new Event('mouseover')); @@ -1452,9 +1478,18 @@ describe('HeaderMenu Plugin', () => { titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 45, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 48 }, - { _orgTitle: '', iconCssClass: 'mdi mdi-close', title: 'Hide Column', titleKey: 'HIDE_COLUMN', command: 'hide-column', positionOrder: 59 }, + { + _orgTitle: '', + iconCssClass: 'mdi mdi-close', + title: 'Hide Column', + titleKey: 'HIDE_COLUMN', + command: 'hide-column', + positionOrder: 59, + action: expect.any(Function), + }, ]; const commandDivElm = gridContainerDiv.querySelector('[data-command="hide-column"]') as HTMLDivElement; const commandIconElm = commandDivElm.querySelector('.slick-menu-icon') as HTMLDivElement; @@ -1490,6 +1525,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'REMOVE_FILTER', command: 'clear-filter', positionOrder: 57, + action: expect.any(Function), }, ]; const commandDivElm = gridContainerDiv.querySelector('[data-command="clear-filter"]') as HTMLDivElement; @@ -1530,6 +1566,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50, + action: expect.any(Function), }, { _orgTitle: '', @@ -1538,9 +1575,18 @@ describe('HeaderMenu Plugin', () => { titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 52 }, - { _orgTitle: '', iconCssClass: 'mdi mdi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 58 }, + { + _orgTitle: '', + iconCssClass: 'mdi mdi-sort-variant-off', + title: 'Remove Sort', + titleKey: 'REMOVE_SORT', + command: 'clear-sort', + positionOrder: 58, + action: expect.any(Function), + }, ]); expect(commandIconElm.classList.contains('mdi-sort-variant-off')).toBeTruthy(); expect(commandLabelElm.textContent).toBe('Remove Sort'); @@ -1555,6 +1601,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50, + action: expect.any(Function), }, { _orgTitle: '', @@ -1563,6 +1610,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 52 }, { @@ -1572,6 +1620,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 58, + action: expect.any(Function), }, ]); @@ -1611,6 +1660,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 45, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 48 }, ]); @@ -1655,6 +1705,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'FREEZE_COLUMNS', command: 'freeze-columns', positionOrder: 45, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 48 }, ]); @@ -1695,6 +1746,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50, + action: expect.any(Function), }, { _orgTitle: '', @@ -1703,9 +1755,18 @@ describe('HeaderMenu Plugin', () => { titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 52 }, - { _orgTitle: '', iconCssClass: 'mdi mdi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 58 }, + { + _orgTitle: '', + iconCssClass: 'mdi mdi-sort-variant-off', + title: 'Remove Sort', + titleKey: 'REMOVE_SORT', + command: 'clear-sort', + positionOrder: 58, + action: expect.any(Function), + }, ]); const clickEvent = new Event('click'); @@ -1747,6 +1808,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'SORT_ASCENDING', command: 'sort-asc', positionOrder: 50, + action: expect.any(Function), }, { _orgTitle: '', @@ -1755,9 +1817,18 @@ describe('HeaderMenu Plugin', () => { titleKey: 'SORT_DESCENDING', command: 'sort-desc', positionOrder: 51, + action: expect.any(Function), }, { divider: true, command: '', positionOrder: 52 }, - { _orgTitle: '', iconCssClass: 'mdi mdi-sort-variant-off', title: 'Remove Sort', titleKey: 'REMOVE_SORT', command: 'clear-sort', positionOrder: 58 }, + { + _orgTitle: '', + iconCssClass: 'mdi mdi-sort-variant-off', + title: 'Remove Sort', + titleKey: 'REMOVE_SORT', + command: 'clear-sort', + positionOrder: 58, + action: expect.any(Function), + }, ]); const clickEvent = new Event('click'); diff --git a/packages/common/src/extensions/extensionUtility.ts b/packages/common/src/extensions/extensionUtility.ts index a171e3fd25..aace0fa4b9 100644 --- a/packages/common/src/extensions/extensionUtility.ts +++ b/packages/common/src/extensions/extensionUtility.ts @@ -75,7 +75,7 @@ export class ExtensionUtility { } /** - * Sort items (by pointers) in an array by a property name + * @deprecated Sort items (by pointers) in an array by a property name * @param {Array} items array * @param {String} property name to sort with */ diff --git a/packages/common/src/extensions/slickCellMenu.ts b/packages/common/src/extensions/slickCellMenu.ts index 3f8a653bfa..a4f18624cb 100644 --- a/packages/common/src/extensions/slickCellMenu.ts +++ b/packages/common/src/extensions/slickCellMenu.ts @@ -152,6 +152,7 @@ export class SlickCellMenu extends MenuFromCellBaseClass { // protected functions // ------------------ + /** @deprecated Sort items (by pointers) in an array by a property name */ protected sortMenuItems(columns: Column[]): void { // sort both items list columns.forEach((columnDef: Column) => { diff --git a/packages/common/src/extensions/slickContextMenu.ts b/packages/common/src/extensions/slickContextMenu.ts index 6020cbc86e..51f2f2a471 100644 --- a/packages/common/src/extensions/slickContextMenu.ts +++ b/packages/common/src/extensions/slickContextMenu.ts @@ -4,7 +4,6 @@ import type { SlickEventData, SlickGrid } from '../core/index.js'; import type { ExtensionUtility } from '../extensions/extensionUtility.js'; import { copyCellToClipboard } from '../formatters/formatterUtilities.js'; import type { - Column, ContextMenu, ContextMenuOption, MenuCallbackArgs, @@ -74,9 +73,10 @@ export class SlickContextMenu extends MenuFromCellBaseClass { this._addonOptions = { ...this._defaults, ...contextMenuOptions }; // merge the original commands with the built-in internal commands - const originalCommandItems = - this._addonOptions && Array.isArray(this._addonOptions.commandItems) ? this._addonOptions.commandItems : []; - this._addonOptions.commandItems = [...originalCommandItems, ...this.addMenuCustomCommands(originalCommandItems)]; + const originalCommandItems = Array.isArray(this._addonOptions?.commandItems) ? this._addonOptions.commandItems : []; + const initialCommandItems = [...originalCommandItems, ...this.addMenuCustomCommands(originalCommandItems)]; + this._addonOptions.commandItems = + (this._addonOptions.commandListBuilder?.(initialCommandItems) as Array) ?? initialCommandItems; this._addonOptions = { ...this._addonOptions }; this.sharedService.gridOptions.contextMenu = this._addonOptions; @@ -174,7 +174,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { /** Create Context Menu with Custom Commands (copy cell value, export) */ protected addMenuCustomCommands( originalCommandItems: Array - ): (MenuCommandItem> | 'divider')[] { + ): Array> | 'divider'> { const menuCommandItems: Array = []; const gridOptions = (this.sharedService && this.sharedService.gridOptions) || {}; const contextMenu = gridOptions?.contextMenu; @@ -198,8 +198,8 @@ export class SlickContextMenu extends MenuFromCellBaseClass { action: (_e, args) => copyCellToClipboard(args as MenuCommandItemCallbackArgs), itemUsabilityOverride: (args: MenuCallbackArgs) => { // make sure there's an item to copy before enabling this command - const columnDef = args?.column as Column; - const dataContext = args?.dataContext; + const columnDef = args.column; + const dataContext = args.dataContext; if (typeof columnDef.queryFieldNameGetterFn === 'function') { const cellValue = getCellValueFromQueryFieldGetter(columnDef, dataContext, ''); if (cellValue !== '' && cellValue !== undefined) { @@ -229,7 +229,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { positionOrder: 51, action: () => { const registedServices = this.sharedService?.externalRegisteredResources || []; - const excelService: TextExportService = registedServices.find((service: any) => service.className === 'TextExportService'); + const excelService: TextExportService | undefined = registedServices.find( + (service: any) => service.className === 'TextExportService' + ); if (excelService?.exportToFile) { excelService.exportToFile({ delimiter: ',', @@ -284,7 +286,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { positionOrder: 53, action: () => { const registedServices = this.sharedService?.externalRegisteredResources || []; - const pdfService: PdfExportService = registedServices.find((service: any) => service.className === 'PdfExportService'); + const pdfService: PdfExportService | undefined = registedServices.find( + (service: any) => service.className === 'PdfExportService' + ); if (pdfService?.exportToPdf) { pdfService.exportToPdf(); } else { @@ -310,7 +314,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { positionOrder: 54, action: () => { const registedServices = this.sharedService?.externalRegisteredResources || []; - const excelService: TextExportService = registedServices.find((service: any) => service.className === 'TextExportService'); + const excelService: TextExportService | undefined = registedServices.find( + (service: any) => service.className === 'TextExportService' + ); if (excelService?.exportToFile) { excelService.exportToFile({ delimiter: '\t', @@ -330,7 +336,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { if (gridOptions && (gridOptions.enableGrouping || gridOptions.enableDraggableGrouping || gridOptions.enableTreeData)) { // add a divider (separator) between the top sort commands and the other clear commands if (contextMenu && !contextMenu.hideCopyCellValueCommand) { - menuCommandItems.push({ divider: true, command: '', positionOrder: 54 }); + menuCommandItems.push({ divider: true, command: 'divider-1', positionOrder: 54 }); } // show context menu: Clear Grouping (except for Tree Data which shouldn't have this feature) @@ -424,7 +430,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { return menuCommandItems; } - /** sort all menu items by their position order when defined */ + /** @deprecated sort all menu items by their position order when defined */ protected sortMenuItems(): void { const contextMenu = this.sharedService?.gridOptions?.contextMenu; if (contextMenu) { diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts index cc0ca18af8..119510385d 100644 --- a/packages/common/src/extensions/slickGridMenu.ts +++ b/packages/common/src/extensions/slickGridMenu.ts @@ -171,7 +171,11 @@ export class SlickGridMenu extends MenuBaseClass { // then sort all Grid Menu command items (sorted by pointer, no need to use the return) const gridMenuCommandItems = this._userOriginalGridMenu.commandItems; const originalCommandItems = this._userOriginalGridMenu && Array.isArray(gridMenuCommandItems) ? gridMenuCommandItems : []; - this._addonOptions.commandItems = [...originalCommandItems, ...this.addGridMenuCustomCommands(originalCommandItems)]; + + // merge the original commands with the built-in internal commands + const initialCommandItems = [...originalCommandItems, ...this.addGridMenuCustomCommands(originalCommandItems)]; + this._addonOptions.commandItems = + (this._addonOptions.commandListBuilder?.(initialCommandItems) as Array) ?? initialCommandItems; this.extensionUtility.translateMenuItemsFromTitleKey(this._addonOptions.commandItems || [], 'commandItems'); this.extensionUtility.sortItems(this._addonOptions.commandItems, 'positionOrder'); @@ -555,6 +559,7 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 52, + action: this.clearPinning.bind(this), }); } } @@ -571,6 +576,7 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 50, + action: this.clearFilters.bind(this), }); } } @@ -586,6 +592,7 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 53, + action: this.toggleFilterBar.bind(this), }); } } @@ -601,6 +608,7 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 58, + action: () => this.extensionUtility.refreshBackendDataset(), }); } } @@ -617,6 +625,7 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 54, + action: this.toggleDarkMode.bind(this), }); } } @@ -633,6 +642,10 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 53, + action: () => { + const showPreHeaderPanel = this.gridOptions?.showPreHeaderPanel ?? false; + this.grid.setPreHeaderPanelVisibility(!showPreHeaderPanel); + }, }); } } @@ -650,6 +663,7 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 51, + action: this.clearSorting.bind(this), }); } } @@ -666,6 +680,7 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 55, + action: this.exportCsv.bind(this), }); } } @@ -681,6 +696,7 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 56, + action: this.exportExcel.bind(this), }); } } @@ -696,6 +712,7 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 57, + action: this.exportPdf.bind(this), }); } } @@ -711,6 +728,7 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: commandName, positionOrder: 58, + action: this.exportTextDelimited.bind(this), }); } } @@ -728,117 +746,110 @@ export class SlickGridMenu extends MenuBaseClass { return gridMenuCommandItems; } - /** - * Execute the Grid Menu Custom command callback that was triggered by the onCommand subscribe - * These are the default internal custom commands - * @param event - * @param GridMenuItem args - */ - protected executeGridMenuInternalCustomCommands(_e: Event, args: GridMenuItem): void { + protected clearFilters(): void { + this.filterService.clearFilters(); + this.sharedService.dataView.refresh(); + this.pubSubService.publish('onGridMenuClearAllFilters'); + } + + protected clearPinning(): void { + const newGridOptions = { frozenColumn: -1, frozenRow: -1, frozenBottom: false, enableMouseWheelScrollHandler: false }; + this.grid.setOptions(newGridOptions); + this.sharedService.gridOptions.frozenColumn = newGridOptions.frozenColumn; + this.sharedService.gridOptions.frozenRow = newGridOptions.frozenRow; + this.sharedService.gridOptions.frozenBottom = newGridOptions.frozenBottom; + this.sharedService.gridOptions.enableMouseWheelScrollHandler = newGridOptions.enableMouseWheelScrollHandler; + + // re-update columns to reflect any possible changes + this.grid.updateColumns(); + + // we also need to autosize columns if the option is enabled + const gridOptions = this.gridOptions; + if (gridOptions.enableAutoSizeColumns) { + this.grid.autosizeColumns(); + } + this.pubSubService.publish('onGridMenuClearAllPinning'); + } + + protected clearSorting(): void { + this.sortService.clearSorting(); + this.sharedService.dataView.refresh(); + this.pubSubService.publish('onGridMenuClearAllSorting'); + } + + protected exportCsv(): void { const registeredResources = this.sharedService?.externalRegisteredResources || []; + const exportCsvService: TextExportService = registeredResources.find((service: any) => service.className === 'TextExportService'); + if (exportCsvService?.exportToFile) { + exportCsvService.exportToFile({ + delimiter: ',', + format: 'csv', + }); + } else { + console.error( + `[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };` + ); + } + } - if (args?.command) { - switch (args.command) { - case 'clear-pinning': - const newGridOptions = { frozenColumn: -1, frozenRow: -1, frozenBottom: false, enableMouseWheelScrollHandler: false }; - this.grid.setOptions(newGridOptions); - this.sharedService.gridOptions.frozenColumn = newGridOptions.frozenColumn; - this.sharedService.gridOptions.frozenRow = newGridOptions.frozenRow; - this.sharedService.gridOptions.frozenBottom = newGridOptions.frozenBottom; - this.sharedService.gridOptions.enableMouseWheelScrollHandler = newGridOptions.enableMouseWheelScrollHandler; - - // re-update columns to reflect any possible changes - this.grid.updateColumns(); - - // we also need to autosize columns if the option is enabled - const gridOptions = this.gridOptions; - if (gridOptions.enableAutoSizeColumns) { - this.grid.autosizeColumns(); - } - this.pubSubService.publish('onGridMenuClearAllPinning'); - break; - case 'clear-filter': - this.filterService.clearFilters(); - this.sharedService.dataView.refresh(); - this.pubSubService.publish('onGridMenuClearAllFilters'); - break; - case 'clear-sorting': - this.sortService.clearSorting(); - this.sharedService.dataView.refresh(); - this.pubSubService.publish('onGridMenuClearAllSorting'); - break; - case 'export-csv': - const exportCsvService: TextExportService = registeredResources.find((service: any) => service.className === 'TextExportService'); - if (exportCsvService?.exportToFile) { - exportCsvService.exportToFile({ - delimiter: ',', - format: 'csv', - }); - } else { - console.error( - `[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };` - ); - } - break; - case 'export-excel': - const excelService: ExcelExportService = registeredResources.find((service: any) => service.className === 'ExcelExportService'); - if (excelService?.exportToExcel) { - excelService.exportToExcel(); - } else { - console.error( - `[Slickgrid-Universal] You must register the ExcelExportService to properly use Export to Excel in the Grid Menu. Example:: this.gridOptions = { enableExcelExport: true, externalResources: [new ExcelExportService()] };` - ); - } - break; - case 'export-pdf': - const pdfService: PdfExportService = registeredResources.find((service: any) => service.className === 'PdfExportService'); - if (pdfService?.exportToPdf) { - pdfService.exportToPdf(); - } else { - console.error( - `[Slickgrid-Universal] You must register the PdfExportService to properly use Export to PDF in the Grid Menu. Example:: this.gridOptions = { enablePdfExport: true, externalResources: [new PdfExportService()] };` - ); - } - break; - case 'export-text-delimited': - const exportTxtService: TextExportService = registeredResources.find((service: any) => service.className === 'TextExportService'); - if (exportTxtService?.exportToFile) { - exportTxtService.exportToFile({ - delimiter: '\t', - format: 'txt', - }); - } else { - console.error( - `[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };` - ); - } - break; - case 'toggle-dark-mode': - const currentDarkMode = this.sharedService.gridOptions.darkMode; - this.grid.setOptions({ darkMode: !currentDarkMode }); - this.sharedService.gridOptions.darkMode = !currentDarkMode; - break; - case 'toggle-filter': - let showHeaderRow = this.gridOptions?.showHeaderRow ?? false; - showHeaderRow = !showHeaderRow; // inverse show header flag - this.grid.setHeaderRowVisibility(showHeaderRow); - - // when displaying header row, we'll call "setColumns" which in terms will recreate the header row filters - if (showHeaderRow === true) { - this.grid.updateColumns(); - this.grid.scrollColumnIntoView(0); // quick fix to avoid filter being out of sync with horizontal scroll - } - break; - case 'toggle-preheader': - const showPreHeaderPanel = this.gridOptions?.showPreHeaderPanel ?? false; - this.grid.setPreHeaderPanelVisibility(!showPreHeaderPanel); - break; - case 'refresh-dataset': - this.extensionUtility.refreshBackendDataset(); - break; - default: - break; - } + protected exportExcel(): void { + const registeredResources = this.sharedService?.externalRegisteredResources || []; + const excelService: ExcelExportService | undefined = registeredResources.find( + (service: any) => service.className === 'ExcelExportService' + ); + if (excelService?.exportToExcel) { + excelService.exportToExcel(); + } else { + console.error( + `[Slickgrid-Universal] You must register the ExcelExportService to properly use Export to Excel in the Grid Menu. Example:: this.gridOptions = { enableExcelExport: true, externalResources: [new ExcelExportService()] };` + ); + } + } + + protected exportPdf(): void { + const registeredResources = this.sharedService?.externalRegisteredResources || []; + const pdfService: PdfExportService | undefined = registeredResources.find((service: any) => service.className === 'PdfExportService'); + if (pdfService?.exportToPdf) { + pdfService.exportToPdf(); + } else { + console.error( + `[Slickgrid-Universal] You must register the PdfExportService to properly use Export to PDF in the Grid Menu. Example:: this.gridOptions = { enablePdfExport: true, externalResources: [new PdfExportService()] };` + ); + } + } + + protected exportTextDelimited(): void { + const registeredResources = this.sharedService?.externalRegisteredResources || []; + const exportTxtService: TextExportService | undefined = registeredResources.find( + (service: any) => service.className === 'TextExportService' + ); + if (exportTxtService?.exportToFile) { + exportTxtService.exportToFile({ + delimiter: '\t', + format: 'txt', + }); + } else { + console.error( + `[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };` + ); + } + } + + protected toggleDarkMode(): void { + const currentDarkMode = this.sharedService.gridOptions.darkMode; + this.grid.setOptions({ darkMode: !currentDarkMode }); + this.sharedService.gridOptions.darkMode = !currentDarkMode; + } + + protected toggleFilterBar(): void { + let showHeaderRow = this.gridOptions?.showHeaderRow ?? false; + showHeaderRow = !showHeaderRow; // inverse show header flag + this.grid.setHeaderRowVisibility(showHeaderRow); + + // when displaying header row, we'll call "setColumns" which in terms will recreate the header row filters + if (showHeaderRow === true) { + this.grid.updateColumns(); + this.grid.scrollColumnIntoView(0); // quick fix to avoid filter being out of sync with horizontal scroll } } @@ -898,7 +909,6 @@ export class SlickGridMenu extends MenuBaseClass { // execute Grid Menu callback with command, // we'll also execute optional user defined onCommand callback when provided - this.executeGridMenuInternalCustomCommands(event, callbackArgs); this.pubSubService.publish('onGridMenuCommand', callbackArgs); if (typeof this._addonOptions?.onCommand === 'function') { this._addonOptions.onCommand(event, callbackArgs); diff --git a/packages/common/src/extensions/slickHeaderMenu.ts b/packages/common/src/extensions/slickHeaderMenu.ts index 45e61320e1..254b15f75e 100644 --- a/packages/common/src/extensions/slickHeaderMenu.ts +++ b/packages/common/src/extensions/slickHeaderMenu.ts @@ -220,7 +220,6 @@ export class SlickHeaderMenu extends MenuBaseClass { // execute Grid Menu callback with command, // we'll also execute optional user defined onCommand callback when provided - this.executeHeaderMenuInternalCommands(event, callbackArgs); this.pubSubService.publish('onHeaderMenuCommand', callbackArgs); if (typeof this.addonOptions?.onCommand === 'function') { this.addonOptions.onCommand(event, callbackArgs); @@ -312,6 +311,7 @@ export class SlickHeaderMenu extends MenuBaseClass { titleKey: `${translationPrefix}UNFREEZE_COLUMNS`, command: cmdUnfreeze, positionOrder: 45, + action: (_e, args) => this.freezeOrUnfreezeColumns(args.column, cmdUnfreeze), }); } } else { @@ -327,6 +327,7 @@ export class SlickHeaderMenu extends MenuBaseClass { titleKey: `${translationPrefix}FREEZE_COLUMNS`, command: cmdFreeze, positionOrder: 45, + action: (_e, args) => this.freezeOrUnfreezeColumns(args.column, cmdFreeze), }); } } @@ -347,6 +348,7 @@ export class SlickHeaderMenu extends MenuBaseClass { titleKey: `${translationPrefix}COLUMN_RESIZE_BY_CONTENT`, command: cmdResize, positionOrder: 47, + action: (_e, args) => this.pubSubService.publish('onHeaderMenuColumnResizeByContent', { columnId: args.column.id }), }); } } @@ -367,6 +369,7 @@ export class SlickHeaderMenu extends MenuBaseClass { titleKey: `${translationPrefix}SORT_ASCENDING`, command: cmdAscName, positionOrder: 50, + action: (e, args) => this.sortColumn(e, args, true), }); } if (!cmdExists(cmdDescName)) { @@ -376,6 +379,7 @@ export class SlickHeaderMenu extends MenuBaseClass { titleKey: `${translationPrefix}SORT_DESCENDING`, command: cmdDescName, positionOrder: 51, + action: (e, args) => this.sortColumn(e, args, false), }); } @@ -392,6 +396,7 @@ export class SlickHeaderMenu extends MenuBaseClass { titleKey: `${translationPrefix}REMOVE_SORT`, command: cmdClearSort, positionOrder: 58, + action: (e, args) => this.clearColumnSort(e, args), }); } } @@ -444,6 +449,9 @@ export class SlickHeaderMenu extends MenuBaseClass { titleKey: `${translationPrefix}REMOVE_FILTER`, command: cmdRemoveFilter, positionOrder: 57, + action: (e, args) => { + this.clearColumnFilter(e, args); + }, }); } } @@ -457,6 +465,12 @@ export class SlickHeaderMenu extends MenuBaseClass { titleKey: `${translationPrefix}HIDE_COLUMN`, command: cmdHideColumn, positionOrder: 59, + action: (_e, args) => { + this.hideColumn(args.column); + if (this.sharedService.gridOptions?.enableAutoSizeColumns) { + this.grid.autosizeColumns(); + } + }, }); } @@ -521,45 +535,6 @@ export class SlickHeaderMenu extends MenuBaseClass { } } - /** Execute the Header Menu Commands that was triggered by the onCommand subscribe */ - protected executeHeaderMenuInternalCommands( - event: DOMMouseOrTouchEvent | SlickEventData, - args: MenuCommandItemCallbackArgs - ): void { - if (args?.command) { - switch (args.command) { - case 'hide-column': - this.hideColumn(args.column); - if (this.sharedService.gridOptions?.enableAutoSizeColumns) { - this.grid.autosizeColumns(); - } - break; - case 'clear-filter': - this.clearColumnFilter(event, args); - break; - case 'clear-sort': - this.clearColumnSort(event, args); - break; - case 'column-resize-by-content': - this.pubSubService.publish('onHeaderMenuColumnResizeByContent', { columnId: args.column.id }); - break; - case 'freeze-columns': - this.freezeOrUnfreezeColumns(args.column, args.command); - break; - case 'unfreeze-columns': - this.freezeOrUnfreezeColumns(args.column, args.command); - break; - case 'sort-asc': - case 'sort-desc': - const isSortingAsc = args.command === 'sort-asc'; - this.sortColumn(event, args, isSortingAsc); - break; - default: - break; - } - } - } - protected createParentMenu(e: DOMMouseOrTouchEvent, columnDef: Column, menu: HeaderMenuItems): void { // let the user modify the menu or cancel altogether, // or provide alternative menu implementation. diff --git a/packages/common/src/interfaces/cellMenuOption.interface.ts b/packages/common/src/interfaces/cellMenuOption.interface.ts index e037eeff28..b07b433981 100644 --- a/packages/common/src/interfaces/cellMenuOption.interface.ts +++ b/packages/common/src/interfaces/cellMenuOption.interface.ts @@ -1,6 +1,6 @@ import type { MenuCommandItem, MenuFromCellCallbackArgs, MenuOption, MenuOptionItem } from './index.js'; -export interface CellMenuOption extends MenuOption { +export interface CellMenuOption extends Omit, 'commandListBuilder'> { /** Defaults to true, Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space */ autoAdjustDrop?: boolean; diff --git a/packages/common/src/interfaces/menuItem.interface.ts b/packages/common/src/interfaces/menuItem.interface.ts index 5259cd81b7..75a3ed6374 100644 --- a/packages/common/src/interfaces/menuItem.interface.ts +++ b/packages/common/src/interfaces/menuItem.interface.ts @@ -16,7 +16,10 @@ export interface MenuItem { /** CSS class to be added to the menu item icon. */ iconCssClass?: string; - /** position order in the list, a lower number will make it on top of the list. Internal commands starts at 50. */ + /** + * position order in the list, a lower number will make it on top of the list. Internal commands starts at 50. + * @deprecated @use `commandListBuilder` + */ positionOrder?: number; /** Optional sub-menu title that will shows up when sub-menu commmands/options list is opened */ @@ -48,7 +51,7 @@ export interface MenuItem { /** * Slot renderer callback for the entire menu item. - * @param item - The menu item object + * @param cmdItem - The menu item object * @param args - The callback args providing access to grid, column, dataContext, etc. * @param event - Optional DOM event (passed during click handling) that allows the renderer to call stopPropagation() * @returns Either an HTML string or an HTMLElement @@ -65,7 +68,7 @@ export interface MenuItem { * return div; * } */ - slotRenderer?: (item: any, args: O, event?: Event) => string | HTMLElement; + slotRenderer?: (cmdItem: any, args: O, event?: Event) => string | HTMLElement; // -- // action/override callbacks diff --git a/packages/common/src/interfaces/menuOption.interface.ts b/packages/common/src/interfaces/menuOption.interface.ts index 7698b0adbd..ef922a69d6 100644 --- a/packages/common/src/interfaces/menuOption.interface.ts +++ b/packages/common/src/interfaces/menuOption.interface.ts @@ -1,10 +1,42 @@ import type { SlickGrid } from '../core/index.js'; -import type { Column, GridMenuCommandItemCallbackArgs, HeaderMenuCommandItemCallbackArgs, MenuFromCellCallbackArgs } from './index.js'; +import type { + Column, + GridMenuCommandItemCallbackArgs, + GridMenuItem, + HeaderMenuCommandItemCallbackArgs, + MenuCommandItem, + MenuFromCellCallbackArgs, +} from './index.js'; export interface MenuOption { // -- // Methods + /** + * Command builder, this function is executed after `commandItems: []` and is also the last call before rendering in the DOM. + * You would typically use this **instead** of the `commandItems: []`, since you can use this callback to filter/sort the final commands. + * + * // for example, you can spread the built-in commands with your own commands + * gridOptions: { + * contextMenu: { + * commandListBuilder: (builtInItems) => { + * return [ + * ...builtInItems, + * { + * command: 'delete-row', + * title: 'Delete Row', + * iconCssClass: 'mdi mdi-delete text-danger', + * action: () => alert('Delete row'), + * } + * ]; + * } + * } + * } + */ + commandListBuilder?: ( + builtInItems: Array + ) => Array; + /** * Default slot renderer for all menu items. * This will be used as the default renderer for all items unless overridden by an individual item's `slotRenderer`. @@ -16,16 +48,16 @@ export interface MenuOption `
${item.title}
` + * defaultItemRenderer: (cmdItem, args) => `
${cmdItem.title}
` * * // Return HTMLElement (e.g. Cell or Context Menu) - * defaultItemRenderer: (item, args) => { + * defaultItemRenderer: (cmdItem, args) => { * const div = document.createElement('div'); - * div.textContent = `${item.title} (Row ${args.dataContext.id})`; + * div.textContent = `${cmdItem.title} (Row ${args.dataContext.id})`; * return div; * } */ - defaultItemRenderer?: (item: any, args: T) => string | HTMLElement; + defaultItemRenderer?: (cmdItem: any, args: T) => string | HTMLElement; /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ menuUsabilityOverride?: (args: { grid: SlickGrid; column: Column; menu: HTMLElement }) => boolean; From 871903c669599bd01d8180d38aa8d57e896976d3 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 11 Feb 2026 22:58:20 -0500 Subject: [PATCH 06/24] chore: fix some typing errors --- .../src/interfaces/menuFromCellCallbackArgs.interface.ts | 7 ++++--- packages/common/src/interfaces/menuOption.interface.ts | 4 +--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/common/src/interfaces/menuFromCellCallbackArgs.interface.ts b/packages/common/src/interfaces/menuFromCellCallbackArgs.interface.ts index 324b603e0b..6ac7ccb58b 100644 --- a/packages/common/src/interfaces/menuFromCellCallbackArgs.interface.ts +++ b/packages/common/src/interfaces/menuFromCellCallbackArgs.interface.ts @@ -10,9 +10,10 @@ export interface MenuFromCellCallbackArgs { /** Reference to the grid. */ grid: SlickGrid; -} -export interface MenuFromCellWithColumnCallbackArgs extends MenuFromCellCallbackArgs { + /** item data context object */ + dataContext: any; + /** Cell Column definition */ - column?: Column; + column?: Column; } diff --git a/packages/common/src/interfaces/menuOption.interface.ts b/packages/common/src/interfaces/menuOption.interface.ts index ef922a69d6..d122c83003 100644 --- a/packages/common/src/interfaces/menuOption.interface.ts +++ b/packages/common/src/interfaces/menuOption.interface.ts @@ -1,6 +1,4 @@ -import type { SlickGrid } from '../core/index.js'; import type { - Column, GridMenuCommandItemCallbackArgs, GridMenuItem, HeaderMenuCommandItemCallbackArgs, @@ -60,5 +58,5 @@ export interface MenuOption string | HTMLElement; /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ - menuUsabilityOverride?: (args: { grid: SlickGrid; column: Column; menu: HTMLElement }) => boolean; + menuUsabilityOverride?: (args: T) => boolean; } From b45bfeec1db7d085bd48672bb881322a8ab9aa8f Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 12 Feb 2026 20:41:12 -0500 Subject: [PATCH 07/24] chore: rename `defaultMenuItemRenderer` & add E2E tests --- .../aurelia/test/cypress/support/commands.ts | 33 ++ demos/react/test/cypress/support/commands.ts | 33 ++ demos/vanilla/src/examples/example40.html | 2 +- demos/vanilla/src/examples/example40.ts | 119 ++---- demos/vue/test/cypress/support/commands.ts | 33 ++ docs/column-functionalities/cell-menu.md | 4 +- docs/grid-functionalities/context-menu.md | 2 +- docs/grid-functionalities/grid-menu.md | 2 +- .../header-menu-header-buttons.md | 2 +- docs/menu-slots.md | 24 +- .../test/cypress/support/commands.ts | 33 ++ .../__tests__/slickCellMenu.plugin.spec.ts | 8 +- .../__tests__/slickContextMenu.spec.ts | 10 +- .../__tests__/slickGridMenu.spec.ts | 8 +- .../__tests__/slickHeaderMenu.spec.ts | 8 +- .../common/src/extensions/menuBaseClass.ts | 4 +- .../src/interfaces/menuOption.interface.ts | 6 +- test/cypress/e2e/example40.cy.ts | 360 ++++++++++++++++++ test/cypress/support/commands.ts | 33 ++ 19 files changed, 589 insertions(+), 135 deletions(-) create mode 100644 test/cypress/e2e/example40.cy.ts diff --git a/demos/aurelia/test/cypress/support/commands.ts b/demos/aurelia/test/cypress/support/commands.ts index a35be6228b..3be5a3685b 100644 --- a/demos/aurelia/test/cypress/support/commands.ts +++ b/demos/aurelia/test/cypress/support/commands.ts @@ -47,6 +47,7 @@ declare global { ): Chainable>; saveLocalStorage: () => void; restoreLocalStorage: () => void; + getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable; } } } @@ -86,3 +87,35 @@ Cypress.Commands.add('restoreLocalStorage', () => { localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]); }); }); + +Cypress.Commands.add( + 'getTransformValue', + ( + cssTransformMatrix: string, + absoluteValue: boolean, + transformType: 'rotate' | 'scale' = 'rotate' // Default to 'rotate' + ): Cypress.Chainable => { + if (!cssTransformMatrix || cssTransformMatrix === 'none') { + throw new Error('Transform matrix is undefined or none'); + } + + const cssTransformMatrixIndexes = cssTransformMatrix.split('(')[1].split(')')[0].split(','); + + if (transformType === 'rotate') { + const cssTransformScale = Math.sqrt( + +cssTransformMatrixIndexes[0] * +cssTransformMatrixIndexes[0] + +cssTransformMatrixIndexes[1] * +cssTransformMatrixIndexes[1] + ); + + const cssTransformSin = +cssTransformMatrixIndexes[1] / cssTransformScale; + const cssTransformAngle = Math.round(Math.asin(cssTransformSin) * (180 / Math.PI)); + + return cy.wrap(absoluteValue ? Math.abs(cssTransformAngle) : cssTransformAngle); + } else if (transformType === 'scale') { + // Assuming scale is based on the first value in the matrix. + const scaleValue = +cssTransformMatrixIndexes[0]; // First value typically represents scaling in x direction. + return cy.wrap(scaleValue); // Directly return the scale value. + } + + throw new Error('Unsupported transform type'); + } +); diff --git a/demos/react/test/cypress/support/commands.ts b/demos/react/test/cypress/support/commands.ts index a35be6228b..3be5a3685b 100644 --- a/demos/react/test/cypress/support/commands.ts +++ b/demos/react/test/cypress/support/commands.ts @@ -47,6 +47,7 @@ declare global { ): Chainable>; saveLocalStorage: () => void; restoreLocalStorage: () => void; + getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable; } } } @@ -86,3 +87,35 @@ Cypress.Commands.add('restoreLocalStorage', () => { localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]); }); }); + +Cypress.Commands.add( + 'getTransformValue', + ( + cssTransformMatrix: string, + absoluteValue: boolean, + transformType: 'rotate' | 'scale' = 'rotate' // Default to 'rotate' + ): Cypress.Chainable => { + if (!cssTransformMatrix || cssTransformMatrix === 'none') { + throw new Error('Transform matrix is undefined or none'); + } + + const cssTransformMatrixIndexes = cssTransformMatrix.split('(')[1].split(')')[0].split(','); + + if (transformType === 'rotate') { + const cssTransformScale = Math.sqrt( + +cssTransformMatrixIndexes[0] * +cssTransformMatrixIndexes[0] + +cssTransformMatrixIndexes[1] * +cssTransformMatrixIndexes[1] + ); + + const cssTransformSin = +cssTransformMatrixIndexes[1] / cssTransformScale; + const cssTransformAngle = Math.round(Math.asin(cssTransformSin) * (180 / Math.PI)); + + return cy.wrap(absoluteValue ? Math.abs(cssTransformAngle) : cssTransformAngle); + } else if (transformType === 'scale') { + // Assuming scale is based on the first value in the matrix. + const scaleValue = +cssTransformMatrixIndexes[0]; // First value typically represents scaling in x direction. + return cy.wrap(scaleValue); // Directly return the scale value. + } + + throw new Error('Unsupported transform type'); + } +); diff --git a/demos/vanilla/src/examples/example40.html b/demos/vanilla/src/examples/example40.html index 31b7f08d46..fa04a7f09b 100644 --- a/demos/vanilla/src/examples/example40.html +++ b/demos/vanilla/src/examples/example40.html @@ -29,7 +29,7 @@

Note: The demo focuses on the custom rendering capability via slotRenderer and - defaultItemRenderer, which work across all menu plugins (SlickHeaderMenu, SlickCellMenu, SlickContextMenu, + defaultMenuItemRenderer, which work across all menu plugins (SlickHeaderMenu, SlickCellMenu, SlickContextMenu, SlickGridMenu). Also note that the keyboard shortcuts displayed in the menus (e.g., Alt+↑, F5) are for demo purposes only and do not actually trigger any actions. diff --git a/demos/vanilla/src/examples/example40.ts b/demos/vanilla/src/examples/example40.ts index 79a36f26d3..9870d53e19 100644 --- a/demos/vanilla/src/examples/example40.ts +++ b/demos/vanilla/src/examples/example40.ts @@ -34,7 +34,7 @@ export default class Example40 { gridOptions: GridOption; dataset: ReportItem[]; sgb: SlickVanillaGridBundle; - subTitleStyle = 'display: none'; + subTitleStyle = 'block'; constructor() { this._bindingEventService = new BindingEventService(); @@ -79,10 +79,10 @@ export default class Example40 { title: 'Sort Ascending', positionOrder: 50, // Slot renderer replaces entire menu item content (can be HTML string or native DOM elements) - slotRenderer: () => ` + slotRenderer: (cmdItem) => `

- Sort Ascending + ${cmdItem.title} Alt+↑
`, @@ -209,16 +209,17 @@ export default class Example40 { containerDiv.appendChild(kbdElm); // Add native event listeners for hover effects - containerDiv.addEventListener('mouseenter', () => { + containerDiv.addEventListener('mouseover', () => { iconDiv.style.transform = 'scale(1.15)'; iconDiv.style.background = 'linear-gradient(135deg, #d8dcef 0%, #ffffff 100%)'; containerDiv.parentElement!.style.backgroundColor = '#854685'; + // containerDiv.parentElement!.title = `📈 Export timestamp: ${tempoFormat(new Date(), 'YYYY-MM-DD hh:mm:ss a')}`; const div = this.buildChartTooltip(getOffset(containerDiv)); document.body.appendChild(div); containerDiv.style.color = 'white'; containerDiv.querySelector('.key-hint')!.style.color = 'black'; }); - containerDiv.addEventListener('mouseleave', () => { + containerDiv.addEventListener('mouseout', () => { iconDiv.style.transform = 'scale(1)'; iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; containerDiv.parentElement!.style.backgroundColor = 'white'; @@ -232,11 +233,10 @@ export default class Example40 { alert('Custom export action triggered!'); }, }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: '' }, { command: 'filter-column', title: 'Filter Column', - positionOrder: 55, // Slot renderer with status indicator and beta badge slotRenderer: () => `
@@ -265,7 +265,6 @@ export default class Example40 { { command: 'recalc', title: 'Recalculate', - positionOrder: 45, iconCssClass: 'mdi mdi-refresh', slotRenderer: () => `
@@ -288,12 +287,12 @@ export default class Example40 { cssClass: 'justify-center flex', formatter: () => `
`, excludeFromExport: true, - // Demo: Cell Menu with slot examples (demonstrating defaultItemRenderer at menu level) + // Demo: Cell Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) cellMenu: { hideCloseButton: false, commandTitle: 'Cell Actions', // Demo: Menu-level default renderer that applies to all items unless overridden - defaultItemRenderer: (cmdItem, _args) => { + defaultMenuItemRenderer: (cmdItem, _args) => { return `
${cmdItem.iconCssClass ? `` : '◦'} @@ -305,7 +304,6 @@ export default class Example40 { { command: 'copy-cell', title: 'Copy Cell Value', - positionOrder: 50, iconCssClass: 'mdi mdi-content-copy', action: (_e, args) => { console.log('Copy cell value:', args.dataContext[args.column.field]); @@ -316,7 +314,6 @@ export default class Example40 { { command: 'export-row', title: 'Export Row', - positionOrder: 51, iconCssClass: 'mdi mdi-download', action: (_e, args) => { console.log('Export row:', args.dataContext); @@ -326,7 +323,6 @@ export default class Example40 { { command: 'export', title: 'Export', - positionOrder: 52, iconCssClass: 'mdi mdi-download', commandItems: [ { @@ -355,12 +351,11 @@ export default class Example40 { }, ], }, - { divider: true, command: '', positionOrder: 52 }, + { divider: true, command: '' }, { command: 'edit-row', title: 'Edit Row', - positionOrder: 53, - // Individual slotRenderer overrides the defaultItemRenderer + // Individual slotRenderer overrides the defaultMenuItemRenderer slotRenderer: (_item, args) => `
✎
@@ -375,7 +370,6 @@ export default class Example40 { { command: 'delete-row', title: 'Delete Row', - positionOrder: 54, iconCssClass: 'mdi mdi-delete text-danger', action: (_event, args) => { const dataContext = args.dataContext; @@ -404,7 +398,7 @@ export default class Example40 { headerMenu: { hideColumnHideCommand: false, // Demo: Menu-level default renderer for all header menu items - defaultItemRenderer: (cmdItem, _args) => { + defaultMenuItemRenderer: (cmdItem, _args) => { return `
${cmdItem.iconCssClass ? `` : ''} @@ -423,16 +417,14 @@ export default class Example40 { // build your command items list // spread built-in commands and optionally filter/sort them however you want commandListBuilder: (builtInItems) => { + // commandItems.sort((a, b) => (a === 'divider' || b === 'divider' ? 0 : a.title! > b.title! ? -1 : 1)); return [ // filter commands if you want // ...builtInItems.filter((x) => x !== 'divider' && x.command !== 'copy' && x.command !== 'clear-grouping'), - ...builtInItems, - { divider: true, command: '' }, { - // positionOrder: 60, command: 'edit-cell', title: 'Edit Cell', - // Demo: Individual slotRenderer overrides the menu's defaultItemRenderer + // Demo: Individual slotRenderer overrides the menu's defaultMenuItemRenderer slotRenderer: (cmdItem, _args) => { // you can use `createDomElement()` from Slickgrid for easier DOM element creation const containerDiv = createDomElement('div', { className: 'menu-item' }); @@ -444,11 +436,11 @@ export default class Example40 { containerDiv.appendChild(kbdElm); // Native event listeners for interactive effects - containerDiv.addEventListener('mouseenter', () => { + containerDiv.addEventListener('mouseover', () => { iconDiv.style.transform = 'rotate(15deg) scale(1.1)'; iconDiv.style.boxShadow = '0 2px 8px rgba(0,200,83,0.4)'; }); - containerDiv.addEventListener('mouseleave', () => { + containerDiv.addEventListener('mouseout', () => { iconDiv.style.transform = 'rotate(0deg) scale(1)'; iconDiv.style.boxShadow = 'none'; }); @@ -457,6 +449,7 @@ export default class Example40 { }, action: () => alert('Edit cell'), }, + ...builtInItems, { divider: true, command: '' }, { command: 'export', @@ -491,12 +484,9 @@ export default class Example40 { action: () => alert('Delete row'), }, ]; - // commandItems.sort((a, b) => (a === 'divider' || b === 'divider' ? 0 : a.title! > b.title! ? -1 : 1)); - // console.log('initial command items', commandItems); - // return commandItems; }, // Demo: Menu-level default renderer for context menu items - defaultItemRenderer: (cmdItem, _args) => { + defaultMenuItemRenderer: (cmdItem, _args) => { return `
${cmdItem.iconCssClass ? `` : ''} @@ -504,77 +494,13 @@ export default class Example40 {
`; }, - // commandItems: [ - // { - // positionOrder: 60, - // command: 'edit-cell', - // title: 'Edit Cell', - // // Demo: Individual slotRenderer overrides the menu's defaultItemRenderer - // slotRenderer: (cmdItem, _args) => { - // // you can use `createDomElement()` from Slickgrid for easier DOM element creation - // const containerDiv = createDomElement('div', { className: 'menu-item' }); - // const iconDiv = createDomElement('div', { className: 'edit-cell-icon', textContent: '✎' }); - // const textSpan = createDomElement('span', { textContent: cmdItem.title, style: { flex: '1' } }); - // const kbdElm = createDomElement('kbd', { className: 'edit-cell', textContent: 'F2' }); - // containerDiv.appendChild(iconDiv); - // containerDiv.appendChild(textSpan); - // containerDiv.appendChild(kbdElm); - - // // Native event listeners for interactive effects - // containerDiv.addEventListener('mouseenter', () => { - // iconDiv.style.transform = 'rotate(15deg) scale(1.1)'; - // iconDiv.style.boxShadow = '0 2px 8px rgba(0,200,83,0.4)'; - // }); - // containerDiv.addEventListener('mouseleave', () => { - // iconDiv.style.transform = 'rotate(0deg) scale(1)'; - // iconDiv.style.boxShadow = 'none'; - // }); - - // return containerDiv; - // }, - // action: () => alert('Edit cell'), - // }, - // { divider: true, command: '' }, - // { - // command: 'export', - // title: 'Export', - // iconCssClass: 'mdi mdi-download', - // commandItems: [ - // { - // command: 'export-excel', - // title: 'Export as Excel', - // iconCssClass: 'mdi mdi-file-excel-outline text-success', - // action: () => alert('Export to Excel'), - // }, - // { - // command: 'export-csv', - // title: 'Export as CSV', - // iconCssClass: 'mdi mdi-file-document-outline', - // action: () => alert('Export to CSV'), - // }, - // { - // command: 'export-pdf', - // title: 'Export as PDF', - // iconCssClass: 'mdi mdi-file-pdf-outline text-danger', - // action: () => alert('Export to PDF'), - // }, - // ], - // }, - // { divider: true, command: '' }, - // { - // command: 'delete-row', - // title: 'Delete Row', - // iconCssClass: 'mdi mdi-delete text-danger', - // action: () => alert('Delete row'), - // }, - // ], }, - // Grid Menu with slot examples (demonstrating defaultItemRenderer at menu level) + // Grid Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) enableGridMenu: true, gridMenu: { // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) - defaultItemRenderer: (cmdItem, _args) => { + defaultMenuItemRenderer: (cmdItem, _args) => { return `
${cmdItem.iconCssClass ? `` : ''} @@ -596,7 +522,7 @@ export default class Example40 { command: 'export-csv', title: 'Export to CSV', iconCssClass: 'mdi mdi-download', - // Individual slotRenderer overrides the defaultItemRenderer for this item + // Individual slotRenderer overrides the defaultMenuItemRenderer for this item slotRenderer: (cmdItem, _args) => `
@@ -630,6 +556,9 @@ export default class Example40 { // tooltip plugin externalResources: [new SlickCustomTooltip()], + // customTooltip: { + // observeAllTooltips: true + // } }; } diff --git a/demos/vue/test/cypress/support/commands.ts b/demos/vue/test/cypress/support/commands.ts index a35be6228b..3be5a3685b 100644 --- a/demos/vue/test/cypress/support/commands.ts +++ b/demos/vue/test/cypress/support/commands.ts @@ -47,6 +47,7 @@ declare global { ): Chainable>; saveLocalStorage: () => void; restoreLocalStorage: () => void; + getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable; } } } @@ -86,3 +87,35 @@ Cypress.Commands.add('restoreLocalStorage', () => { localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]); }); }); + +Cypress.Commands.add( + 'getTransformValue', + ( + cssTransformMatrix: string, + absoluteValue: boolean, + transformType: 'rotate' | 'scale' = 'rotate' // Default to 'rotate' + ): Cypress.Chainable => { + if (!cssTransformMatrix || cssTransformMatrix === 'none') { + throw new Error('Transform matrix is undefined or none'); + } + + const cssTransformMatrixIndexes = cssTransformMatrix.split('(')[1].split(')')[0].split(','); + + if (transformType === 'rotate') { + const cssTransformScale = Math.sqrt( + +cssTransformMatrixIndexes[0] * +cssTransformMatrixIndexes[0] + +cssTransformMatrixIndexes[1] * +cssTransformMatrixIndexes[1] + ); + + const cssTransformSin = +cssTransformMatrixIndexes[1] / cssTransformScale; + const cssTransformAngle = Math.round(Math.asin(cssTransformSin) * (180 / Math.PI)); + + return cy.wrap(absoluteValue ? Math.abs(cssTransformAngle) : cssTransformAngle); + } else if (transformType === 'scale') { + // Assuming scale is based on the first value in the matrix. + const scaleValue = +cssTransformMatrixIndexes[0]; // First value typically represents scaling in x direction. + return cy.wrap(scaleValue); // Directly return the scale value. + } + + throw new Error('Unsupported transform type'); + } +); diff --git a/docs/column-functionalities/cell-menu.md b/docs/column-functionalities/cell-menu.md index 32a869b81f..5caf07bad4 100644 --- a/docs/column-functionalities/cell-menu.md +++ b/docs/column-functionalities/cell-menu.md @@ -141,7 +141,7 @@ this.gridOptions = { ``` ### Custom Menu Item Rendering -For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. See [Custom Menu Slots](../../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. @@ -168,7 +168,7 @@ this.columnDefinitions = [ To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way ```ts -this.columnDefinitions = [{ +this.columnDefinitions = [{ id: 'action', field: 'action', name: 'Action', cellMenu: { optionItems: [{ diff --git a/docs/grid-functionalities/context-menu.md b/docs/grid-functionalities/context-menu.md index e7f883b257..8a17222096 100644 --- a/docs/grid-functionalities/context-menu.md +++ b/docs/grid-functionalities/context-menu.md @@ -123,7 +123,7 @@ contextMenu: { ``` ### Custom Menu Item Rendering -For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. diff --git a/docs/grid-functionalities/grid-menu.md b/docs/grid-functionalities/grid-menu.md index 1fc525998f..0c8cf96651 100644 --- a/docs/grid-functionalities/grid-menu.md +++ b/docs/grid-functionalities/grid-menu.md @@ -106,7 +106,7 @@ gridMenu: { For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/extensions/slickGridMenu.ts) itself. ### Custom Menu Item Rendering -To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultItemRenderer` callbacks. +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks. See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. diff --git a/docs/grid-functionalities/header-menu-header-buttons.md b/docs/grid-functionalities/header-menu-header-buttons.md index 4f785f43fb..0168519fd5 100644 --- a/docs/grid-functionalities/header-menu-header-buttons.md +++ b/docs/grid-functionalities/header-menu-header-buttons.md @@ -59,7 +59,7 @@ There are 2 callback hooks which are accessible in the Grid Options For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/extensions/slickHeaderButtons.ts) itself. ### Custom Menu Item Rendering -To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultItemRenderer` callbacks. +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks. See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. diff --git a/docs/menu-slots.md b/docs/menu-slots.md index ab7c3367fc..0b9ada7a7e 100644 --- a/docs/menu-slots.md +++ b/docs/menu-slots.md @@ -1,6 +1,6 @@ ## Custom Menu Slots - Rendering -All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cross-framework compatible slot rendering** for custom content injection in menu items. This is achieved through the `slotRenderer` callback at the item level combined with an optional `defaultItemRenderer` at the menu level. +All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cross-framework compatible slot rendering** for custom content injection in menu items. This is achieved through the `slotRenderer` callback at the item level combined with an optional `defaultMenuItemRenderer` at the menu level. ### Core Concept @@ -70,12 +70,12 @@ const menuItem = { ### Default Menu-Level Renderer -Set a `defaultItemRenderer` at the menu option level to apply to all items (unless overridden by individual `slotRenderer`): +Set a `defaultMenuItemRenderer` at the menu option level to apply to all items (unless overridden by individual `slotRenderer`): ```typescript const menuOption = { // Apply this renderer to all menu items (can be overridden per item) - defaultItemRenderer: (cmdItem, args) => { + defaultMenuItemRenderer: (cmdItem, args) => { return `
${cmdItem.iconCssClass ? `` : ''} @@ -88,12 +88,12 @@ const menuOption = { command: 'action-1', title: 'Action One', iconCssClass: 'mdi mdi-check', - // This item uses defaultItemRenderer + // This item uses defaultMenuItemRenderer }, { command: 'custom', title: 'Custom Item', - // This item overrides defaultItemRenderer with its own slotRenderer + // This item overrides defaultMenuItemRenderer with its own slotRenderer slotRenderer: () => `
Custom rendering overrides default @@ -106,7 +106,7 @@ const menuOption = { ### Menu Types & Configuration -The `slotRenderer` and `defaultItemRenderer` work identically across all menu plugins: +The `slotRenderer` and `defaultMenuItemRenderer` work identically across all menu plugins: #### Header Menu ```typescript @@ -114,7 +114,7 @@ const columnDef = { id: 'name', header: { menu: { - defaultItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, commandItems: [ { command: 'sort', @@ -132,7 +132,7 @@ const columnDef = { const columnDef = { id: 'action', cellMenu: { - defaultItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, commandItems: [ { command: 'edit', @@ -149,7 +149,7 @@ const columnDef = { const gridOptions = { enableContextMenu: true, contextMenu: { - defaultItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, commandItems: [ { command: 'export', @@ -166,7 +166,7 @@ const gridOptions = { const gridOptions = { enableGridMenu: true, gridMenu: { - defaultItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, commandItems: [ { command: 'refresh', @@ -395,10 +395,10 @@ const menuItem = { - **HTML strings** are inserted via `innerHTML` - ensure content is sanitized if user-provided - **HTMLElement objects** are appended directly - safer for dynamic content and allows event listeners - **Cross-framework compatible** - works in vanilla JS, Angular, React, Vue, Aurelia using the same API -- **Priority order** - Item-level `slotRenderer` overrides menu-level `defaultItemRenderer` +- **Priority order** - Item-level `slotRenderer` overrides menu-level `defaultMenuItemRenderer` - **Accessibility** - Include proper ARIA attributes when creating custom elements - **Event handling** - Call `event.stopPropagation()` in interactive elements to prevent menu commands from firing -- **Default fallback** - If neither `slotRenderer` nor `defaultItemRenderer` is provided, the default icon + text rendering is used +- **Default fallback** - If neither `slotRenderer` nor `defaultMenuItemRenderer` is provided, the default icon + text rendering is used - **Performance** - Avoid heavy DOM manipulation inside renderer callbacks (they may be called multiple times) - **Event parameter** - The optional `event` parameter is passed during click handling and allows you to control menu behavior - **All menus supported** - This API works uniformly across Header Menu, Cell Menu, Context Menu, and Grid Menu diff --git a/frameworks/angular-slickgrid/test/cypress/support/commands.ts b/frameworks/angular-slickgrid/test/cypress/support/commands.ts index 353157c927..5b395aa95c 100644 --- a/frameworks/angular-slickgrid/test/cypress/support/commands.ts +++ b/frameworks/angular-slickgrid/test/cypress/support/commands.ts @@ -46,6 +46,7 @@ declare global { ): Chainable>; saveLocalStorage: () => void; restoreLocalStorage: () => void; + getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable; } } } @@ -86,3 +87,35 @@ Cypress.Commands.add('getNthCell', (row, nthCol, viewport = 'topLeft', { parentS `${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="transform: translateY(${row * rowHeight}px);"] > .slick-cell:nth(${nthCol})` ); }); + +Cypress.Commands.add( + 'getTransformValue', + ( + cssTransformMatrix: string, + absoluteValue: boolean, + transformType: 'rotate' | 'scale' = 'rotate' // Default to 'rotate' + ): Cypress.Chainable => { + if (!cssTransformMatrix || cssTransformMatrix === 'none') { + throw new Error('Transform matrix is undefined or none'); + } + + const cssTransformMatrixIndexes = cssTransformMatrix.split('(')[1].split(')')[0].split(','); + + if (transformType === 'rotate') { + const cssTransformScale = Math.sqrt( + +cssTransformMatrixIndexes[0] * +cssTransformMatrixIndexes[0] + +cssTransformMatrixIndexes[1] * +cssTransformMatrixIndexes[1] + ); + + const cssTransformSin = +cssTransformMatrixIndexes[1] / cssTransformScale; + const cssTransformAngle = Math.round(Math.asin(cssTransformSin) * (180 / Math.PI)); + + return cy.wrap(absoluteValue ? Math.abs(cssTransformAngle) : cssTransformAngle); + } else if (transformType === 'scale') { + // Assuming scale is based on the first value in the matrix. + const scaleValue = +cssTransformMatrixIndexes[0]; // First value typically represents scaling in x direction. + return cy.wrap(scaleValue); // Directly return the scale value. + } + + throw new Error('Unsupported transform type'); + } +); diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts index 26972eee05..d79002ab4c 100644 --- a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts @@ -829,7 +829,7 @@ describe('CellMenu Plugin', () => { expect(customSlotElm.textContent).toContain('String: Test Command'); }); - it('should render menu item with defaultItemRenderer when item has no slotRenderer', () => { + it('should render menu item with defaultMenuItemRenderer when item has no slotRenderer', () => { const mockDefaultRenderer = vi.fn((item: MenuCommandItem) => { const div = document.createElement('div'); div.className = 'default-renderer-content'; @@ -838,7 +838,7 @@ describe('CellMenu Plugin', () => { }); plugin.dispose(); - plugin.init({ defaultItemRenderer: mockDefaultRenderer }); + plugin.init({ defaultMenuItemRenderer: mockDefaultRenderer }); columnsMock[3].cellMenu!.commandItems = [{ command: 'test-cmd', title: 'Test Command' }]; gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); @@ -851,7 +851,7 @@ describe('CellMenu Plugin', () => { expect(defaultRendererElm.textContent).toBe('Default: Test Command'); }); - it('should prioritize item slotRenderer over defaultItemRenderer', () => { + it('should prioritize item slotRenderer over defaultMenuItemRenderer', () => { const mockSlotRenderer = vi.fn((item: MenuCommandItem) => { const div = document.createElement('div'); div.className = 'slot-prioritized'; @@ -861,7 +861,7 @@ describe('CellMenu Plugin', () => { const mockDefaultRenderer = vi.fn(); plugin.dispose(); - plugin.init({ defaultItemRenderer: mockDefaultRenderer }); + plugin.init({ defaultMenuItemRenderer: mockDefaultRenderer }); columnsMock[3].cellMenu!.commandItems = [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }]; gridStub.onClick.notify({ cell: 3, row: 1, grid: gridStub }, eventData, gridStub); diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts index 1652a5456a..a3b29ae990 100644 --- a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts @@ -823,7 +823,7 @@ describe('ContextMenu Plugin', () => { describe('with slot renderer', () => { beforeEach(() => { // Clean up any leftover state from previous tests - delete gridOptionsMock.contextMenu!.defaultItemRenderer; + delete gridOptionsMock.contextMenu!.defaultMenuItemRenderer; gridOptionsMock.contextMenu!.commandItems = []; gridOptionsMock.contextMenu!.hideCopyCellValueCommand = true; }); @@ -865,7 +865,7 @@ describe('ContextMenu Plugin', () => { expect(customSlotElm.textContent).toContain('String: Test Command'); }); - it('should render menu item with defaultItemRenderer when item has no slotRenderer', () => { + it('should render menu item with defaultMenuItemRenderer when item has no slotRenderer', () => { const mockDefaultRenderer = vi.fn((item: MenuCommandItem) => { const div = document.createElement('div'); div.className = 'default-renderer-content'; @@ -874,7 +874,7 @@ describe('ContextMenu Plugin', () => { }); plugin.dispose(); - plugin.init({ commandItems: [{ command: 'test-cmd', title: 'Test Command' }], defaultItemRenderer: mockDefaultRenderer }); + plugin.init({ commandItems: [{ command: 'test-cmd', title: 'Test Command' }], defaultMenuItemRenderer: mockDefaultRenderer }); gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); const contextMenuElm = document.body.querySelector('.slick-context-menu.slickgrid12345') as HTMLDivElement; @@ -886,7 +886,7 @@ describe('ContextMenu Plugin', () => { expect(defaultRendererElm.textContent).toBe('Default: Test Command'); }); - it('should prioritize item slotRenderer over defaultItemRenderer', () => { + it('should prioritize item slotRenderer over defaultMenuItemRenderer', () => { const mockSlotRenderer = vi.fn((item: MenuCommandItem) => { const div = document.createElement('div'); div.className = 'slot-prioritized'; @@ -898,7 +898,7 @@ describe('ContextMenu Plugin', () => { plugin.dispose(); plugin.init({ commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }], - defaultItemRenderer: mockDefaultRenderer, + defaultMenuItemRenderer: mockDefaultRenderer, }); gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub); diff --git a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts index f6beff47c2..23242374ef 100644 --- a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts @@ -1304,7 +1304,7 @@ describe('GridMenuControl', () => { expect(customSlotElm?.textContent).toContain('String: Test Command'); }); - it('should render menu item with defaultItemRenderer when item has no slotRenderer', () => { + it('should render menu item with defaultMenuItemRenderer when item has no slotRenderer', () => { const mockDefaultRenderer = vi.fn((item: any) => { const div = document.createElement('div'); div.className = 'default-renderer-content'; @@ -1315,7 +1315,7 @@ describe('GridMenuControl', () => { control.columns = columnsMock; gridOptionsMock.gridMenu = { commandItems: [{ command: 'test-cmd', title: 'Test Command' }] as any, - defaultItemRenderer: mockDefaultRenderer, + defaultMenuItemRenderer: mockDefaultRenderer, }; vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); control.init(); @@ -1331,7 +1331,7 @@ describe('GridMenuControl', () => { expect(defaultRendererElm?.textContent).toBe('Default: Test Command'); }); - it('should prioritize item slotRenderer over defaultItemRenderer', () => { + it('should prioritize item slotRenderer over defaultMenuItemRenderer', () => { const mockSlotRenderer = vi.fn((item: any) => { const div = document.createElement('div'); div.className = 'slot-prioritized'; @@ -1342,7 +1342,7 @@ describe('GridMenuControl', () => { control.columns = columnsMock; gridOptionsMock.gridMenu = { commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] as any, - defaultItemRenderer: vi.fn(), + defaultMenuItemRenderer: vi.fn(), }; vi.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); control.init(); diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts index 19d764191b..bcad77d7a8 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts @@ -929,7 +929,7 @@ describe('HeaderMenu Plugin', () => { expect(customSlotElm?.textContent).toContain('String: Test Command'); }); - it('should render menu item with defaultItemRenderer when item has no slotRenderer', () => { + it('should render menu item with defaultMenuItemRenderer when item has no slotRenderer', () => { const mockDefaultRenderer = vi.fn((item: any) => { const div = document.createElement('div'); div.className = 'default-renderer-content'; @@ -939,7 +939,7 @@ describe('HeaderMenu Plugin', () => { columnsMock[1].header!.menu = { commandItems: [{ command: 'test-cmd', title: 'Test Command' }] as any }; plugin.init(columnsMock as any); - plugin.addonOptions.defaultItemRenderer = mockDefaultRenderer as any; + plugin.addonOptions.defaultMenuItemRenderer = mockDefaultRenderer as any; gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData, gridStub); gridStub.onHeaderCellRendered.notify({ column: columnsMock[1], node: headerDiv, grid: gridStub }, eventData, gridStub); const headerButtonElm = headerDiv.querySelector('.slick-header-menu-button') as any; @@ -954,7 +954,7 @@ describe('HeaderMenu Plugin', () => { expect(defaultRendererElm?.textContent).toBe('Default: Test Command'); }); - it('should prioritize item slotRenderer over defaultItemRenderer', () => { + it('should prioritize item slotRenderer over defaultMenuItemRenderer', () => { const mockSlotRenderer = vi.fn((item: any) => { const div = document.createElement('div'); div.className = 'slot-prioritized'; @@ -965,7 +965,7 @@ describe('HeaderMenu Plugin', () => { columnsMock[1].header!.menu = { commandItems: [{ command: 'test-cmd', title: 'Test Command', slotRenderer: mockSlotRenderer }] as any }; plugin.init(columnsMock as any); - plugin.addonOptions.defaultItemRenderer = mockDefaultRenderer as any; + plugin.addonOptions.defaultMenuItemRenderer = mockDefaultRenderer as any; gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData, gridStub); gridStub.onHeaderCellRendered.notify({ column: columnsMock[1], node: headerDiv, grid: gridStub }, eventData, gridStub); const headerButtonElm = headerDiv.querySelector('.slick-header-menu-button') as any; diff --git a/packages/common/src/extensions/menuBaseClass.ts b/packages/common/src/extensions/menuBaseClass.ts index 12d5b0fb3e..224e6c099e 100644 --- a/packages/common/src/extensions/menuBaseClass.ts +++ b/packages/common/src/extensions/menuBaseClass.ts @@ -295,7 +295,7 @@ export class MenuBaseClass { if (this._camelPluginName !== 'headerButtons') { // Check if we have slot renderer on the menu item or a default item renderer - const slotRenderer = (item as MenuCommandOptionItem).slotRenderer || (this._addonOptions as MenuPlugin).defaultItemRenderer; + const slotRenderer = (item as MenuCommandOptionItem).slotRenderer || (this._addonOptions as MenuPlugin).defaultMenuItemRenderer; if (slotRenderer) { this.renderSlotRenderer(commandLiElm, slotRenderer, item as MenuCommandOptionItem, args); } @@ -332,7 +332,7 @@ export class MenuBaseClass { 'click', ((e: DOMMouseOrTouchEvent) => { // if there's a slot renderer, call it with the event - const slotRenderer = (item as MenuCommandOptionItem).slotRenderer || (this._addonOptions as MenuPlugin).defaultItemRenderer; + const slotRenderer = (item as MenuCommandOptionItem).slotRenderer || (this._addonOptions as MenuPlugin).defaultMenuItemRenderer; if (slotRenderer) { slotRenderer(item as MenuCommandOptionItem, args, e); } diff --git a/packages/common/src/interfaces/menuOption.interface.ts b/packages/common/src/interfaces/menuOption.interface.ts index d122c83003..092641520d 100644 --- a/packages/common/src/interfaces/menuOption.interface.ts +++ b/packages/common/src/interfaces/menuOption.interface.ts @@ -46,16 +46,16 @@ export interface MenuOption `
${cmdItem.title}
` + * defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
` * * // Return HTMLElement (e.g. Cell or Context Menu) - * defaultItemRenderer: (cmdItem, args) => { + * defaultMenuItemRenderer: (cmdItem, args) => { * const div = document.createElement('div'); * div.textContent = `${cmdItem.title} (Row ${args.dataContext.id})`; * return div; * } */ - defaultItemRenderer?: (cmdItem: any, args: T) => string | HTMLElement; + defaultMenuItemRenderer?: (cmdItem: any, args: T) => string | HTMLElement; /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ menuUsabilityOverride?: (args: T) => boolean; diff --git a/test/cypress/e2e/example40.cy.ts b/test/cypress/e2e/example40.cy.ts new file mode 100644 index 0000000000..548c994f87 --- /dev/null +++ b/test/cypress/e2e/example40.cy.ts @@ -0,0 +1,360 @@ +import { format } from '@formkit/tempo'; + +describe('Example 40 - Menus with Slots', () => { + const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Action']; + + it('should display Example title', () => { + cy.visit(`${Cypress.config('baseUrl')}/example40`); + cy.get('h3').should('contain', 'Example 40 - Menus with Slots'); + }); + + it('should have exact column titles in the grid', () => { + cy.get('.grid40') + .find('.slick-header-columns') + .children() + .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); + }); + + it('should open Context Menu hover "Duration" column and expect built-in and custom items listed in specific order', () => { + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick(); + + // 1st item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.edit-cell-icon').contains('✎'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Edit Cell'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('kbd.edit-cell').contains('F2'); + + // icon should rotate while hovering + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseover'); + cy.wait(175); // wait for rotation + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item .edit-cell-icon') + .invoke('css', 'transform') // Get the transform property + .then((cssTransform) => { + const transformValue = cssTransform as unknown as string; // Cast to string + cy.getTransformValue(transformValue, true, 'rotate').then((rotationAngle) => { + expect(rotationAngle).to.eq(15); // 15 degrees rotation + }); + }); + + // 2nd item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item').find('i.mdi-content-copy').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item').find('span.menu-item-label').contains('Copy'); + + // 3rd item - divider + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(2)').should('have.class', 'slick-menu-item-divider'); + + // 4th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Clear all Grouping'); + + // 5th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item').find('i.mdi-arrow-collapse').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item') + .find('span.menu-item-label') + .contains('Collapse all Groups'); + + // 6th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('i.mdi-arrow-expand').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Expand all Groups'); + + // 7th item - divider + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(6)').should('have.class', 'slick-menu-item-divider'); + + // 8th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-download').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Export'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7)').find('.sub-item-chevron').should('exist'); + + // 9th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(8)').should('have.class', 'slick-menu-item-divider'); + + // 10th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(9) .menu-item') + .find('i.mdi-delete.text-danger') + .should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(9) .menu-item') + .find('span.menu-item-label') + .contains('Delete Row'); + }); + + it('should open Export->Excel context sub-menu', () => { + const subCommands1 = ['Export as Excel', 'Export as CSV', 'Export as PDF']; + + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('[data-row="0"] > .slick-cell:nth(2)').should('contain', '0'); + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick({ force: true }); + + cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains(/^Export$/) + .trigger('mouseover'); + + cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-command-list') + .should('exist') + .find('.slick-menu-item .menu-item') + .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); + + // click different sub-menu + cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains('Export as Excel') + .should('exist') + .click() + .then(() => expect(stub.getCall(0)).to.be.calledWith('Export to Excel')); + + cy.get('.slick-submenu').should('have.length', 0); + }); + + it('should open Header Menu from the "Title" column and expect some commands to have keyboard hints on the right side', () => { + cy.get('.grid40').find('.slick-header-column:nth(0)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('i.mdi-arrow-expand-horizontal') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('span.menu-item-label') + .contains('Resize by Content'); + + // 2nd item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('i.mdi-sort-ascending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('span.menu-item-label') + .contains('Sort Ascending'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('kbd.key-hint').contains('Alt+↑'); + + // 4th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-sort-descending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Sort Descending'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('kbd.key-hint').contains('Alt+↓'); + + // 5th item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('i.mdi-filter-remove-outline') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Remove Filter'); + + // 7th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('i.mdi-sort-variant-off').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('span.menu-item-label') + .contains('Remove Sort'); + + // 8th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Hide Column'); + }); + + it('should open Header Menu from the "Duration" column and expect some commands to have tags on the right side', () => { + cy.get('.grid40').find('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('i.mdi-arrow-expand-horizontal') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('span.menu-item-label') + .contains('Resize by Content'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('span.key-hint.danger').contains('NEW'); + + // 2nd item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('i.mdi-sort-ascending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('span.menu-item-label') + .contains('Sort Ascending'); + + // 4th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-sort-descending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Sort Descending'); + + // 5th item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('i.mdi-filter-remove-outline') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Remove Filter'); + + // 7th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('i.mdi-sort-variant-off').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('span.menu-item-label') + .contains('Remove Sort'); + + // 8th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Hide Column'); + }); + + it('should open Header Menu from the "Cost" column and expect first item to have a dynamic tooltip timestamp when hovering', () => { + cy.get('.grid40').find('.slick-header-column:nth(4)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.advanced-export-icon').contains('📊'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').contains('Advanced Export'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('kbd.key-hint').contains('Ctrl+E'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').should( + 'have.css', + 'background-color', + 'rgba(0, 0, 0, 0)' + ); + + // icon should scale up + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseover'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item .advanced-export-icon') + .invoke('css', 'transform') + .then((cssTransform) => { + const transformValue = cssTransform as unknown as string; // Cast to string + cy.getTransformValue(transformValue, true, 'scale').then((scaleValue) => { + expect(scaleValue).to.be.approximately(1.1, 1.15); // Check the scale value if applied + }); + }); + + const today = format(new Date(), 'YYYY-MM-DD'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').should( + 'have.css', + 'background-color', + 'rgb(133, 70, 133)' + ); + cy.get('.export-timestamp').contains(`📈 Export timestamp: ${today}`); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseout'); + cy.get('.export-timestamp').should('not.exist'); + cy.get('body').click(); + }); + + it('should open Action Menu from last column "Action" column and expect custom items listed in specific order', () => { + cy.get('[data-row="1"] > .slick-cell:nth(6)').click(); + cy.get('.slick-command-header.with-title.with-close').contains('Cell Actions'); + + // 1st item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.mdi-content-copy').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Copy Cell Value'); + + // 2nd item - divider + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('.mdi-download').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item span').contains('Export Row'); + + // 4th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-download').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('span.menu-item-label').contains('Export'); + + // 5th item - divider + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('.edit-cell-icon').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item .edit-cell-icon').contains('✎'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5)').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)'); + + // 7th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('.mdi-delete.text-danger').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Delete Row'); + }); + + it('should open Export->Excel cell sub-menu', () => { + const subCommands1 = ['Export as Excel', 'Export as CSV', 'Export as PDF']; + + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('.slick-cell-menu.slick-menu-level-0 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains(/^Export$/) + .trigger('mouseover'); + + cy.get('.slick-cell-menu.slick-menu-level-1 .slick-menu-command-list') + .should('exist') + .find('.slick-menu-item .menu-item') + .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); + + // click different sub-menu + cy.get('.slick-cell-menu.slick-menu-level-1 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains('Export as Excel') + .should('exist') + .click() + .then(() => expect(stub.getCall(0)).to.be.calledWith('Export row #1 to Excel')); + + cy.get('.slick-submenu').should('have.length', 0); + }); + + it('should open Grid Menu and expect built-in commands first then custom items listed in specific order', () => { + cy.get('.slick-grid-menu-button.mdi-menu').click(); + + // 1st item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('.mdi-filter-remove-outline.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Clear all Filters'); + + // 2nd item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item') + .find('.mdi-sort-variant-off.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item span').contains('Clear all Sorting'); + + // 3rd item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('.mdi-flip-vertical.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item span').contains('Toggle Filter Row'); + + // 4th item - divider + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(3)').should('have.class', 'slick-menu-item-divider'); + + // 5th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item') + .find('.mdi-file-excel-outline.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item span').contains('Export to Excel'); + + // 6th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('.mdi-download.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item span').contains('Export to CSV'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('span.key-hint.warn').contains('CUSTOM'); + + // 7th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('.mdi-refresh.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Refresh Data'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('kbd.key-hint').contains('F5'); + }); +}); diff --git a/test/cypress/support/commands.ts b/test/cypress/support/commands.ts index e3166da4de..714733c727 100644 --- a/test/cypress/support/commands.ts +++ b/test/cypress/support/commands.ts @@ -46,6 +46,7 @@ declare global { viewport?: string, options?: { parentSelector?: string; rowHeight?: number } ): Chainable>; + getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable; } } } @@ -72,3 +73,35 @@ Cypress.Commands.add('getNthCell', (row, nthCol, viewport = 'topLeft', { parentS `${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="transform: translateY(${row * rowHeight}px);"] > .slick-cell:nth(${nthCol})` ); }); + +Cypress.Commands.add( + 'getTransformValue', + ( + cssTransformMatrix: string, + absoluteValue: boolean, + transformType: 'rotate' | 'scale' = 'rotate' // Default to 'rotate' + ): Cypress.Chainable => { + if (!cssTransformMatrix || cssTransformMatrix === 'none') { + throw new Error('Transform matrix is undefined or none'); + } + + const cssTransformMatrixIndexes = cssTransformMatrix.split('(')[1].split(')')[0].split(','); + + if (transformType === 'rotate') { + const cssTransformScale = Math.sqrt( + +cssTransformMatrixIndexes[0] * +cssTransformMatrixIndexes[0] + +cssTransformMatrixIndexes[1] * +cssTransformMatrixIndexes[1] + ); + + const cssTransformSin = +cssTransformMatrixIndexes[1] / cssTransformScale; + const cssTransformAngle = Math.round(Math.asin(cssTransformSin) * (180 / Math.PI)); + + return cy.wrap(absoluteValue ? Math.abs(cssTransformAngle) : cssTransformAngle); + } else if (transformType === 'scale') { + // Assuming scale is based on the first value in the matrix. + const scaleValue = +cssTransformMatrixIndexes[0]; // First value typically represents scaling in x direction. + return cy.wrap(scaleValue); // Directly return the scale value. + } + + throw new Error('Unsupported transform type'); + } +); From c27b9596a41811c6a2988acb8bdc72e833cba828 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 00:09:57 -0500 Subject: [PATCH 08/24] chore: add menu item action when missing in override --- demos/vanilla/src/examples/example40.ts | 4 +- .../common/src/extensions/menuBaseClass.ts | 25 +++ .../common/src/extensions/slickContextMenu.ts | 106 +++++++------ .../common/src/extensions/slickGridMenu.ts | 145 ++++++++++-------- .../common/src/extensions/slickHeaderMenu.ts | 143 +++++++++-------- test/cypress/e2e/example40.cy.ts | 20 +++ 6 files changed, 258 insertions(+), 185 deletions(-) diff --git a/demos/vanilla/src/examples/example40.ts b/demos/vanilla/src/examples/example40.ts index 9870d53e19..15f60bf9f5 100644 --- a/demos/vanilla/src/examples/example40.ts +++ b/demos/vanilla/src/examples/example40.ts @@ -34,7 +34,7 @@ export default class Example40 { gridOptions: GridOption; dataset: ReportItem[]; sgb: SlickVanillaGridBundle; - subTitleStyle = 'block'; + subTitleStyle = 'display: block'; constructor() { this._bindingEventService = new BindingEventService(); @@ -42,7 +42,7 @@ export default class Example40 { attached() { this.initializeGrid(); - this.dataset = this.loadData(1000); + this.dataset = this.loadData(2000); const gridContainerElm = document.querySelector(`.grid40`) as HTMLDivElement; this.sgb = new Slicker.GridBundle( diff --git a/packages/common/src/extensions/menuBaseClass.ts b/packages/common/src/extensions/menuBaseClass.ts index 224e6c099e..c3feeb0b5b 100644 --- a/packages/common/src/extensions/menuBaseClass.ts +++ b/packages/common/src/extensions/menuBaseClass.ts @@ -139,6 +139,31 @@ export class MenuBaseClass { // protected functions // ------------------ + /** + * add Menu Item Command when not found and also make sure that we have an `action` callback + * (could be missing when provided by user) if not use built-in `action` callback when missing + * @param originalMenuItems + * @param builtInMenuItem + * @param showCommand - is command hidden from menu option (deprecated) + */ + protected addMissingCommandOrAction( + builtInMenuItem: T | 'divider', + targetMenuItems: Array, + originalMenuItems?: Array + ): void { + if (builtInMenuItem !== 'divider') { + const cmdName = builtInMenuItem.command; + const cmd = (originalMenuItems ?? targetMenuItems).find((item) => item !== 'divider' && item.command === cmdName); + + if (!cmd) { + targetMenuItems.push(builtInMenuItem); + } else if (!(cmd as T).action) { + // action might be missing (custom menu items), if so copy over from built-in + (cmd as T).action = builtInMenuItem.action; + } + } + } + /** * Render slot content using a renderer callback. * The renderer receives the menu item and args for full context access. diff --git a/packages/common/src/extensions/slickContextMenu.ts b/packages/common/src/extensions/slickContextMenu.ts index d0dbb4d7af..9f436f0bc8 100644 --- a/packages/common/src/extensions/slickContextMenu.ts +++ b/packages/common/src/extensions/slickContextMenu.ts @@ -181,19 +181,16 @@ export class SlickContextMenu extends MenuFromCellBaseClass { const commandLabels = this._addonOptions?.commandLabels; const dataView = this.sharedService?.dataView; const translationPrefix = getTranslationPrefix(gridOptions); - const cmdExists = (commandName: string) => - originalCommandItems.some((item) => item !== 'divider' && 'command' in item && item.command === commandName); // show context menu: Copy (cell value) if (contextMenu && !contextMenu.hideCopyCellValueCommand) { - const commandName = 'copy'; - if (!cmdExists(commandName)) { - menuCommandItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.copyCellValueCommand || '', iconCssClass: contextMenu.iconCopyCellValueCommand || 'mdi mdi-content-copy', titleKey: `${translationPrefix}COPY`, disabled: false, - command: commandName, + command: 'copy', positionOrder: 50, action: (_e, args) => copyCellToClipboard(args as MenuCommandItemCallbackArgs), itemUsabilityOverride: (args: MenuCallbackArgs) => { @@ -212,20 +209,21 @@ export class SlickContextMenu extends MenuFromCellBaseClass { } return false; }, - }); - } + }, + menuCommandItems, + originalCommandItems + ); } // show context menu: Export to file if (gridOptions?.enableTextExport && contextMenu && !contextMenu.hideExportCsvCommand) { - const commandName = 'export-csv'; - if (!cmdExists(commandName)) { - menuCommandItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.exportCsvCommand || '', iconCssClass: contextMenu.iconExportCsvCommand || 'mdi mdi-download', titleKey: `${translationPrefix}EXPORT_TO_CSV`, disabled: false, - command: commandName, + command: 'export-csv', positionOrder: 51, action: () => { const registedServices = this.sharedService?.externalRegisteredResources || []; @@ -243,20 +241,21 @@ export class SlickContextMenu extends MenuFromCellBaseClass { ); } }, - }); - } + }, + menuCommandItems, + originalCommandItems + ); } // show context menu: Export to Excel if (gridOptions && gridOptions.enableExcelExport && contextMenu && !contextMenu.hideExportExcelCommand) { - const commandName = 'export-excel'; - if (!cmdExists(commandName)) { - menuCommandItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.exportExcelCommand || '', iconCssClass: contextMenu.iconExportExcelCommand || 'mdi mdi-file-excel-outline text-success', titleKey: `${translationPrefix}EXPORT_TO_EXCEL`, disabled: false, - command: commandName, + command: 'export-excel', positionOrder: 52, action: () => { const registedServices = this.sharedService?.externalRegisteredResources || []; @@ -269,20 +268,21 @@ export class SlickContextMenu extends MenuFromCellBaseClass { ); } }, - }); - } + }, + menuCommandItems, + originalCommandItems + ); } // show context menu: Export to PDF if (gridOptions && gridOptions.enablePdfExport && contextMenu && !contextMenu.hideExportPdfCommand) { - const commandName = 'export-pdf'; - if (!cmdExists(commandName)) { - menuCommandItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.exportPdfCommand || '', iconCssClass: contextMenu.iconExportPdfCommand || 'mdi mdi-file-pdf-outline text-danger', titleKey: `${translationPrefix}EXPORT_TO_PDF`, disabled: false, - command: commandName, + command: 'export-pdf', positionOrder: 53, action: () => { const registedServices = this.sharedService?.externalRegisteredResources || []; @@ -297,20 +297,21 @@ export class SlickContextMenu extends MenuFromCellBaseClass { ); } }, - }); - } + }, + menuCommandItems, + originalCommandItems + ); } // show context menu: export to text file as tab delimited if (gridOptions?.enableTextExport && contextMenu && !contextMenu.hideExportTextDelimitedCommand) { - const commandName = 'export-text-delimited'; - if (!cmdExists(commandName)) { - menuCommandItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.exportTextDelimitedCommand || '', iconCssClass: contextMenu.iconExportTextDelimitedCommand || 'mdi mdi-download', titleKey: `${translationPrefix}EXPORT_TO_TAB_DELIMITED`, disabled: false, - command: commandName, + command: 'export-text-delimited', positionOrder: 54, action: () => { const registedServices = this.sharedService?.externalRegisteredResources || []; @@ -328,8 +329,10 @@ export class SlickContextMenu extends MenuFromCellBaseClass { ); } }, - }); - } + }, + menuCommandItems, + originalCommandItems + ); } // -- Grouping Commands @@ -341,14 +344,13 @@ export class SlickContextMenu extends MenuFromCellBaseClass { // show context menu: Clear Grouping (except for Tree Data which shouldn't have this feature) if (gridOptions && !gridOptions.enableTreeData && contextMenu && !contextMenu.hideClearAllGrouping) { - const commandName = 'clear-grouping'; - if (!cmdExists(commandName)) { - menuCommandItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.clearGroupingCommand || '', iconCssClass: contextMenu.iconClearGroupingCommand || 'mdi mdi-close', titleKey: `${translationPrefix}CLEAR_ALL_GROUPING`, disabled: false, - command: commandName, + command: 'clear-grouping', positionOrder: 56, action: () => { dataView.setGrouping([]); @@ -359,20 +361,21 @@ export class SlickContextMenu extends MenuFromCellBaseClass { const groupingArray = dataView && dataView.getGrouping && dataView.getGrouping(); return Array.isArray(groupingArray) && groupingArray.length > 0; }, - }); - } + }, + menuCommandItems, + originalCommandItems + ); } // show context menu: Collapse all Groups if (gridOptions && contextMenu && !contextMenu.hideCollapseAllGroups) { - const commandName = 'collapse-all-groups'; - if (!cmdExists(commandName)) { - menuCommandItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.collapseAllGroupsCommand || '', iconCssClass: contextMenu.iconCollapseAllGroupsCommand || 'mdi mdi-arrow-collapse', titleKey: `${translationPrefix}COLLAPSE_ALL_GROUPS`, disabled: false, - command: commandName, + command: 'collapse-all-groups', positionOrder: 57, action: () => { if (gridOptions.enableTreeData) { @@ -390,20 +393,21 @@ export class SlickContextMenu extends MenuFromCellBaseClass { const groupingArray = dataView && dataView.getGrouping && dataView.getGrouping(); return Array.isArray(groupingArray) && groupingArray.length > 0; }, - }); - } + }, + menuCommandItems, + originalCommandItems + ); } // show context menu: Expand all Groups if (gridOptions && contextMenu && !contextMenu.hideExpandAllGroups) { - const commandName = 'expand-all-groups'; - if (!cmdExists(commandName)) { - menuCommandItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.expandAllGroupsCommand || '', iconCssClass: contextMenu.iconExpandAllGroupsCommand || 'mdi mdi-arrow-expand', titleKey: `${translationPrefix}EXPAND_ALL_GROUPS`, disabled: false, - command: commandName, + command: 'expand-all-groups', positionOrder: 58, action: () => { if (gridOptions.enableTreeData) { @@ -421,8 +425,10 @@ export class SlickContextMenu extends MenuFromCellBaseClass { const groupingArray = dataView && dataView.getGrouping && dataView.getGrouping(); return Array.isArray(groupingArray) && groupingArray.length > 0; }, - }); - } + }, + menuCommandItems, + originalCommandItems + ); } } diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts index 7b0a70a800..d81a9a04d9 100644 --- a/packages/common/src/extensions/slickGridMenu.ts +++ b/packages/common/src/extensions/slickGridMenu.ts @@ -544,193 +544,202 @@ export class SlickGridMenu extends MenuBaseClass { const gridOptions = this.gridOptions; const translationPrefix = getTranslationPrefix(gridOptions); const commandLabels = this._addonOptions?.commandLabels; - const cmdExists = (commandName: string) => - originalCommandItems.some((item) => item !== 'divider' && 'command' in item && item.command === commandName); if (this._addonOptions && this.gridOptions) { // show grid menu: Unfreeze Columns/Rows if (!this._addonOptions.hideClearFrozenColumnsCommand) { - const commandName = 'clear-pinning'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconClearFrozenColumnsCommand || 'mdi mdi-pin-off-outline', _orgTitle: commandLabels?.clearFrozenColumnsCommand || '', titleKey: `${translationPrefix}${commandLabels?.clearFrozenColumnsCommandKey ?? 'CLEAR_PINNING'}`, disabled: false, - command: commandName, + command: 'clear-pinning', positionOrder: 52, action: this.clearPinning.bind(this), - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } if (this.gridOptions.enableFiltering && !this.sharedService.hideHeaderRowAfterPageLoad) { // show grid menu: Clear all Filters if (!this._addonOptions.hideClearAllFiltersCommand) { - const commandName = 'clear-filter'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconClearAllFiltersCommand || 'mdi mdi-filter-remove-outline', _orgTitle: commandLabels?.clearAllFiltersCommand || '', titleKey: `${translationPrefix}${commandLabels?.clearAllFiltersCommandKey ?? 'CLEAR_ALL_FILTERS'}`, disabled: false, - command: commandName, + command: 'clear-filter', positionOrder: 50, action: this.clearFilters.bind(this), - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } // show grid menu: toggle filter row if (!this._addonOptions.hideToggleFilterCommand) { - const commandName = 'toggle-filter'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconToggleFilterCommand || 'mdi mdi-flip-vertical', _orgTitle: commandLabels?.toggleFilterCommand || '', titleKey: `${translationPrefix}${commandLabels?.toggleFilterCommandKey ?? 'TOGGLE_FILTER_ROW'}`, disabled: false, - command: commandName, + command: 'toggle-filter', positionOrder: 53, action: this.toggleFilterBar.bind(this), - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } // show grid menu: refresh dataset if (backendApi && !this._addonOptions.hideRefreshDatasetCommand) { - const commandName = 'refresh-dataset'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconRefreshDatasetCommand || 'mdi mdi-sync', _orgTitle: commandLabels?.refreshDatasetCommand || '', titleKey: `${translationPrefix}${commandLabels?.refreshDatasetCommandKey ?? 'REFRESH_DATASET'}`, disabled: false, - command: commandName, + command: 'refresh-dataset', positionOrder: 58, action: () => this.extensionUtility.refreshBackendDataset(), - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } } // show grid menu: toggle dark mode if (!this._addonOptions.hideToggleDarkModeCommand) { - const commandName = 'toggle-dark-mode'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconToggleDarkModeCommand || 'mdi mdi-brightness-4', _orgTitle: commandLabels?.toggleDarkModeCommand || '', titleKey: `${translationPrefix}${commandLabels?.toggleDarkModeCommandKey ?? 'TOGGLE_DARK_MODE'}`, disabled: false, - command: commandName, + command: 'toggle-dark-mode', positionOrder: 54, action: this.toggleDarkMode.bind(this), - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } if (this.gridOptions.showPreHeaderPanel) { // show grid menu: toggle pre-header row if (!this._addonOptions.hideTogglePreHeaderCommand) { - const commandName = 'toggle-preheader'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconTogglePreHeaderCommand || 'mdi mdi-flip-vertical', _orgTitle: commandLabels?.togglePreHeaderCommand || '', titleKey: `${translationPrefix}${commandLabels?.togglePreHeaderCommandKey ?? 'TOGGLE_PRE_HEADER_ROW'}`, disabled: false, - command: commandName, + command: 'toggle-preheader', positionOrder: 53, action: () => { const showPreHeaderPanel = this.gridOptions?.showPreHeaderPanel ?? false; this.grid.setPreHeaderPanelVisibility(!showPreHeaderPanel); }, - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } } if (this.gridOptions.enableSorting) { // show grid menu: Clear all Sorting if (!this._addonOptions.hideClearAllSortingCommand) { - const commandName = 'clear-sorting'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconClearAllSortingCommand || 'mdi mdi-sort-variant-off', _orgTitle: commandLabels?.clearAllSortingCommand || '', titleKey: `${translationPrefix}${commandLabels?.clearAllSortingCommandKey ?? 'CLEAR_ALL_SORTING'}`, disabled: false, - command: commandName, + command: 'clear-sorting', positionOrder: 51, action: this.clearSorting.bind(this), - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } } // show grid menu: Export to file if (this.gridOptions.enableTextExport && !this._addonOptions.hideExportCsvCommand) { - const commandName = 'export-csv'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconExportCsvCommand || 'mdi mdi-download', _orgTitle: commandLabels?.exportCsvCommand || '', titleKey: `${translationPrefix}${commandLabels?.exportCsvCommandKey ?? 'EXPORT_TO_CSV'}`, disabled: false, - command: commandName, + command: 'export-csv', positionOrder: 55, action: this.exportCsv.bind(this), - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } // show grid menu: Export to Excel if (this.gridOptions.enableExcelExport && !this._addonOptions.hideExportExcelCommand) { - const commandName = 'export-excel'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconExportExcelCommand || 'mdi mdi-file-excel-outline text-success', _orgTitle: commandLabels?.exportExcelCommand || '', titleKey: `${translationPrefix}${commandLabels?.exportExcelCommandKey ?? 'EXPORT_TO_EXCEL'}`, disabled: false, - command: commandName, + command: 'export-excel', positionOrder: 56, action: this.exportExcel.bind(this), - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } // show grid menu: Export to PDF if (this.gridOptions.enablePdfExport && !this._addonOptions.hideExportPdfCommand) { - const commandName = 'export-pdf'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconExportPdfCommand || 'mdi mdi-file-pdf-outline text-danger', _orgTitle: commandLabels?.exportPdfCommand || '', titleKey: `${translationPrefix}${commandLabels?.exportPdfCommandKey ?? 'EXPORT_TO_PDF'}`, disabled: false, - command: commandName, + command: 'export-pdf', positionOrder: 57, action: this.exportPdf.bind(this), - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } // show grid menu: export to text file as tab delimited if (this.gridOptions.enableTextExport && !this._addonOptions.hideExportTextDelimitedCommand) { - const commandName = 'export-text-delimited'; - if (!cmdExists(commandName)) { - gridMenuCommandItems.push({ + this.addMissingCommandOrAction( + { iconCssClass: this._addonOptions.iconExportTextDelimitedCommand || 'mdi mdi-download', _orgTitle: commandLabels?.exportTextDelimitedCommand || '', titleKey: `${translationPrefix}${commandLabels?.exportTextDelimitedCommandKey ?? 'EXPORT_TO_TAB_DELIMITED'}`, disabled: false, - command: commandName, + command: 'export-text-delimited', positionOrder: 58, action: this.exportTextDelimited.bind(this), - }); - } + }, + gridMenuCommandItems, + originalCommandItems + ); } // add the custom "Commands" title if there are any commands diff --git a/packages/common/src/extensions/slickHeaderMenu.ts b/packages/common/src/extensions/slickHeaderMenu.ts index a5ce0db252..bc74e1228e 100644 --- a/packages/common/src/extensions/slickHeaderMenu.ts +++ b/packages/common/src/extensions/slickHeaderMenu.ts @@ -290,9 +290,8 @@ export class SlickHeaderMenu extends MenuBaseClass { // so only initialize the header menu without overwrite header buttons columnDef.header.menu = { commandItems: [] }; } + const columnHeaderMenuItems: Array = columnDef?.header?.menu?.commandItems ?? []; - const cmdExists = (commandName: string) => - columnHeaderMenuItems.some((item) => item !== 'divider' && 'command' in item && item.command === commandName); // Freeze Column (pinning) let hasFrozenOrResizeCommand = false; @@ -304,32 +303,34 @@ export class SlickHeaderMenu extends MenuBaseClass { // add unfreeze command const cmdUnfreeze = 'unfreeze-columns'; - if (!cmdExists(cmdUnfreeze)) { - columnHeaderMenuItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.unfreezeColumnsCommand || '', iconCssClass: headerMenuOptions.iconUnfreezeColumns || 'mdi mdi-pin-off-outline', titleKey: `${translationPrefix}UNFREEZE_COLUMNS`, command: cmdUnfreeze, positionOrder: 45, action: (_e, args) => this.freezeOrUnfreezeColumns(args.column, cmdUnfreeze), - }); - } + }, + columnHeaderMenuItems + ); } else { // make sure the "unfreeze-columns" doesn't exist before adding the "freeze-columns" this.removeCommandWhenFound(columnHeaderMenuItems, 'unfreeze-columns'); // add freeze command const cmdFreeze = 'freeze-columns'; - if (!cmdExists(cmdFreeze)) { - columnHeaderMenuItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.freezeColumnsCommand || '', iconCssClass: headerMenuOptions.iconFreezeColumns || 'mdi mdi-pin-outline', titleKey: `${translationPrefix}FREEZE_COLUMNS`, - command: cmdFreeze, + command: 'freeze-columns', positionOrder: 45, action: (_e, args) => this.freezeOrUnfreezeColumns(args.column, cmdFreeze), - }); - } + }, + columnHeaderMenuItems + ); } } @@ -340,17 +341,17 @@ export class SlickHeaderMenu extends MenuBaseClass { this.sharedService.gridOptions.enableColumnResizeOnDoubleClick ) { hasFrozenOrResizeCommand = true; - const cmdResize = 'column-resize-by-content'; - if (!cmdExists(cmdResize)) { - columnHeaderMenuItems.push({ + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.columnResizeByContentCommand || '', iconCssClass: headerMenuOptions.iconColumnResizeByContentCommand || 'mdi mdi-arrow-expand-horizontal', titleKey: `${translationPrefix}COLUMN_RESIZE_BY_CONTENT`, - command: cmdResize, + command: 'column-resize-by-content', positionOrder: 47, action: (_e, args) => this.pubSubService.publish('onHeaderMenuColumnResizeByContent', { columnId: args.column.id }), - }); - } + }, + columnHeaderMenuItems + ); } // add a divider (separator) between the top freeze columns commands and the rest of the commands @@ -360,50 +361,58 @@ export class SlickHeaderMenu extends MenuBaseClass { // Sorting Commands if (gridOptions.enableSorting && columnDef.sortable && headerMenuOptions && !headerMenuOptions.hideSortCommands) { - const cmdAscName = 'sort-asc'; - const cmdDescName = 'sort-desc'; - if (!cmdExists(cmdAscName)) { - columnHeaderMenuItems.push({ + // sort ascending command + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.sortAscCommand || '', iconCssClass: headerMenuOptions.iconSortAscCommand || 'mdi mdi-sort-ascending', titleKey: `${translationPrefix}SORT_ASCENDING`, - command: cmdAscName, + command: 'sort-asc', positionOrder: 50, action: (e, args) => this.sortColumn(e, args, true), - }); - } - if (!cmdExists(cmdDescName)) { - columnHeaderMenuItems.push({ + }, + columnHeaderMenuItems + ); + + // sort descending command + this.addMissingCommandOrAction( + { _orgTitle: commandLabels?.sortDescCommand || '', iconCssClass: headerMenuOptions.iconSortDescCommand || 'mdi mdi-sort-descending', titleKey: `${translationPrefix}SORT_DESCENDING`, - command: cmdDescName, + command: 'sort-desc', positionOrder: 51, action: (e, args) => this.sortColumn(e, args, false), - }); - } + }, + columnHeaderMenuItems + ); // add a divider (separator) between the top sort commands and the other clear commands if (!columnHeaderMenuItems.some((item) => item !== 'divider' && item.positionOrder === 52)) { columnHeaderMenuItems.push({ divider: true, command: '', positionOrder: 52 }); } - const cmdClearSort = 'clear-sort'; - if (!headerMenuOptions.hideClearSortCommand && !cmdExists(cmdClearSort)) { - columnHeaderMenuItems.push({ - _orgTitle: commandLabels?.clearSortCommand || '', - iconCssClass: headerMenuOptions.iconClearSortCommand || 'mdi mdi-sort-variant-off', - titleKey: `${translationPrefix}REMOVE_SORT`, - command: cmdClearSort, - positionOrder: 58, - action: (e, args) => this.clearColumnSort(e, args), - }); + if (!headerMenuOptions.hideClearSortCommand) { + this.addMissingCommandOrAction( + { + _orgTitle: commandLabels?.clearSortCommand || '', + iconCssClass: headerMenuOptions.iconClearSortCommand || 'mdi mdi-sort-variant-off', + titleKey: `${translationPrefix}REMOVE_SORT`, + command: 'clear-sort', + positionOrder: 58, + action: (e, args) => this.clearColumnSort(e, args), + }, + columnHeaderMenuItems + ); } } // Filter Shortcuts via sub-menus const cmdShortcutName = 'filter-shortcuts-root-menu'; - if (columnDef.filter?.filterShortcuts && !cmdExists(cmdShortcutName)) { + if ( + columnDef.filter?.filterShortcuts && + !columnHeaderMenuItems.some((item) => item !== 'divider' && 'command' in item && item.command === cmdShortcutName) + ) { const shortcutSubItems: MenuCommandItem[] = []; columnDef.filter.filterShortcuts.forEach((fs) => { // use the Title name as the command key in kebab cas @@ -440,38 +449,42 @@ export class SlickHeaderMenu extends MenuBaseClass { } // Filtering Commands - const cmdRemoveFilter = 'clear-filter'; if (gridOptions.enableFiltering && columnDef.filterable && headerMenuOptions && !headerMenuOptions.hideFilterCommand) { - if (!headerMenuOptions.hideClearFilterCommand && !cmdExists(cmdRemoveFilter)) { - columnHeaderMenuItems.push({ - _orgTitle: commandLabels?.clearFilterCommand || '', - iconCssClass: headerMenuOptions.iconClearFilterCommand || 'mdi mdi-filter-remove-outline', - titleKey: `${translationPrefix}REMOVE_FILTER`, - command: cmdRemoveFilter, - positionOrder: 57, - action: (e, args) => { - this.clearColumnFilter(e, args); + if (!headerMenuOptions.hideClearFilterCommand) { + this.addMissingCommandOrAction( + { + _orgTitle: commandLabels?.clearFilterCommand || '', + iconCssClass: headerMenuOptions.iconClearFilterCommand || 'mdi mdi-filter-remove-outline', + titleKey: `${translationPrefix}REMOVE_FILTER`, + command: 'clear-filter', + positionOrder: 57, + action: (e, args) => { + this.clearColumnFilter(e, args); + }, }, - }); + columnHeaderMenuItems + ); } } // Hide Column Command - const cmdHideColumn = 'hide-column'; - if (headerMenuOptions && !headerMenuOptions.hideColumnHideCommand && !cmdExists(cmdHideColumn)) { - columnHeaderMenuItems.push({ - _orgTitle: commandLabels?.hideColumnCommand || '', - iconCssClass: headerMenuOptions.iconColumnHideCommand || 'mdi mdi-close', - titleKey: `${translationPrefix}HIDE_COLUMN`, - command: cmdHideColumn, - positionOrder: 59, - action: (_e, args) => { - this.hideColumn(args.column); - if (this.sharedService.gridOptions?.enableAutoSizeColumns) { - this.grid.autosizeColumns(); - } + if (headerMenuOptions && !headerMenuOptions.hideColumnHideCommand) { + this.addMissingCommandOrAction( + { + _orgTitle: commandLabels?.hideColumnCommand || '', + iconCssClass: headerMenuOptions.iconColumnHideCommand || 'mdi mdi-close', + titleKey: `${translationPrefix}HIDE_COLUMN`, + command: 'hide-column', + positionOrder: 59, + action: (_e, args) => { + this.hideColumn(args.column); + if (this.sharedService.gridOptions?.enableAutoSizeColumns) { + this.grid.autosizeColumns(); + } + }, }, - }); + columnHeaderMenuItems + ); } this.extensionUtility.translateMenuItemsFromTitleKey(columnHeaderMenuItems); diff --git a/test/cypress/e2e/example40.cy.ts b/test/cypress/e2e/example40.cy.ts index 548c994f87..9e3d53f750 100644 --- a/test/cypress/e2e/example40.cy.ts +++ b/test/cypress/e2e/example40.cy.ts @@ -357,4 +357,24 @@ describe('Example 40 - Menus with Slots', () => { cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Refresh Data'); cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('kbd.key-hint').contains('F5'); }); + + it('should sort ascending "Duration" even though the header menu item was override without an action callback', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').should('contain', 'Sort Ascending').click(); + + cy.get('[data-row=0]').children('.slick-cell:nth(1)').should('contain', '0'); + cy.get('[data-row=1]').children('.slick-cell:nth(1)').should('contain', '0'); + cy.get('[data-row=2]').children('.slick-cell:nth(1)').should('contain', '0'); + }); + + it('should sort descending "Duration" even though the header menu item was override without an action callback', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').should('contain', 'Sort Descending').click(); + + cy.get('[data-row=0]').children('.slick-cell:nth(1)').should('contain', '100'); + cy.get('[data-row=1]').children('.slick-cell:nth(1)').should('contain', '100'); + cy.get('[data-row=2]').children('.slick-cell:nth(1)').should('contain', '100'); + }); }); From a9419a0c0f36c57cf136ff7b35dbfb7486872b2c Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 10:10:09 -0500 Subject: [PATCH 09/24] chore: fix failing cypress test --- test/cypress/e2e/example40.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/cypress/e2e/example40.cy.ts b/test/cypress/e2e/example40.cy.ts index 9e3d53f750..c4d2557e8a 100644 --- a/test/cypress/e2e/example40.cy.ts +++ b/test/cypress/e2e/example40.cy.ts @@ -16,7 +16,7 @@ describe('Example 40 - Menus with Slots', () => { }); it('should open Context Menu hover "Duration" column and expect built-in and custom items listed in specific order', () => { - cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick(); + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick({ force: true }); // 1st item cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.edit-cell-icon').contains('✎'); From aea4e8bffe1742034250373a2702d5ab61e54a75 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 10:23:01 -0500 Subject: [PATCH 10/24] chore: use buit-in tooltip plugin instead of div --- demos/vanilla/src/examples/example40.scss | 3 +++ demos/vanilla/src/examples/example40.ts | 24 ++++--------------- packages/common/src/styles/_variables.scss | 1 + packages/common/src/styles/slick-plugins.scss | 2 +- test/cypress/e2e/example40.cy.ts | 4 ++-- 5 files changed, 11 insertions(+), 23 deletions(-) diff --git a/demos/vanilla/src/examples/example40.scss b/demos/vanilla/src/examples/example40.scss index 97b79130be..54a81b8298 100644 --- a/demos/vanilla/src/examples/example40.scss +++ b/demos/vanilla/src/examples/example40.scss @@ -9,6 +9,9 @@ body { --slick-column-picker-item-border-radius: 4px; --slick-column-picker-item-hover-border: 1px solid #148dff; --slick-menu-item-hover-color: #fff; + --slick-tooltip-background-color: #4c4c4c; + --slick-tooltip-color: #fff; + --slick-tooltip-font-size: 14px; .slick-cell-menu, .slick-context-menu, .slick-grid-menu, diff --git a/demos/vanilla/src/examples/example40.ts b/demos/vanilla/src/examples/example40.ts index 15f60bf9f5..5fd7644823 100644 --- a/demos/vanilla/src/examples/example40.ts +++ b/demos/vanilla/src/examples/example40.ts @@ -5,7 +5,6 @@ import { createDomElement, Filters, Formatters, - getOffset, SortComparers, SortDirectionNumber, type Column, @@ -213,9 +212,7 @@ export default class Example40 { iconDiv.style.transform = 'scale(1.15)'; iconDiv.style.background = 'linear-gradient(135deg, #d8dcef 0%, #ffffff 100%)'; containerDiv.parentElement!.style.backgroundColor = '#854685'; - // containerDiv.parentElement!.title = `📈 Export timestamp: ${tempoFormat(new Date(), 'YYYY-MM-DD hh:mm:ss a')}`; - const div = this.buildChartTooltip(getOffset(containerDiv)); - document.body.appendChild(div); + containerDiv.parentElement!.title = `📈 Export timestamp: ${tempoFormat(new Date(), 'YYYY-MM-DD hh:mm:ss a')}`; containerDiv.style.color = 'white'; containerDiv.querySelector('.key-hint')!.style.color = 'black'; }); @@ -556,23 +553,10 @@ export default class Example40 { // tooltip plugin externalResources: [new SlickCustomTooltip()], - // customTooltip: { - // observeAllTooltips: true - // } - }; - } - - /** create a basic chart export tooltip */ - buildChartTooltip(containerOffset) { - const div = createDomElement('div', { - className: 'export-timestamp', - textContent: `📈 Export timestamp: ${tempoFormat(new Date(), 'YYYY-MM-DD hh:mm:ss a')}`, - style: { - top: `${containerOffset.top + 35}px`, - left: `${containerOffset.left - 70}px`, + customTooltip: { + observeAllTooltips: true, }, - }); - return div; + }; } clearGrouping() { diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index db93a41a3b..be3a5b6b50 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -455,6 +455,7 @@ $slick-header-menu-button-icon-size: 22px !default; $slick-header-menu-button-padding: 0px !default; $slick-header-menu-button-margin-right: 3px !default; $slick-header-menu-display: none !default; /* can be none or inline-block */ +$slick-header-menu-z-index: 8888 !default; /* can be none or inline-block */ /* Checkbox Selector / Row Selection */ $slick-checkbox-icon-color: $slick-primary-color !default; diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index c4b26531eb..6db29f3740 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -414,12 +414,12 @@ li.hidden { border-radius: var(--slick-menu-border-radius, v.$slick-menu-border-radius); min-width: var(--slick-menu-min-width, v.$slick-menu-min-width); padding: var(--slick-menu-padding, v.$slick-menu-padding); + z-index: var(--slick-header-menu-z-index, v.$slick-header-menu-z-index); cursor: default; display: inline-block; overflow-x: hidden; overflow-y: auto; resize: both; - z-index: 100000; @-moz-document url-prefix() { /* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */ padding: var(--slick-menu-padding-firefox, v.$slick-menu-padding-firefox); diff --git a/test/cypress/e2e/example40.cy.ts b/test/cypress/e2e/example40.cy.ts index c4d2557e8a..767a27da5d 100644 --- a/test/cypress/e2e/example40.cy.ts +++ b/test/cypress/e2e/example40.cy.ts @@ -248,9 +248,9 @@ describe('Example 40 - Menus with Slots', () => { 'background-color', 'rgb(133, 70, 133)' ); - cy.get('.export-timestamp').contains(`📈 Export timestamp: ${today}`); + cy.get('.slick-custom-tooltip').contains(`📈 Export timestamp: ${today}`); cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseout'); - cy.get('.export-timestamp').should('not.exist'); + cy.get('.slick-custom-tooltip').should('not.exist'); cy.get('body').click(); }); From 015e9f1f72b82b40c931062847d2533017cbfcbf Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 10:50:45 -0500 Subject: [PATCH 11/24] chore: loosen cypress rotate test --- test/cypress/e2e/example40.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/cypress/e2e/example40.cy.ts b/test/cypress/e2e/example40.cy.ts index 767a27da5d..3e9259b90e 100644 --- a/test/cypress/e2e/example40.cy.ts +++ b/test/cypress/e2e/example40.cy.ts @@ -31,7 +31,7 @@ describe('Example 40 - Menus with Slots', () => { .then((cssTransform) => { const transformValue = cssTransform as unknown as string; // Cast to string cy.getTransformValue(transformValue, true, 'rotate').then((rotationAngle) => { - expect(rotationAngle).to.eq(15); // 15 degrees rotation + expect(rotationAngle).to.approximately(13, 15); // 15 degrees rotation }); }); From ae72869ff4ae0663d9664a709390fcc688e1ed34 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 12:04:46 -0500 Subject: [PATCH 12/24] chore: add docs and cleanup code accross the project --- .../custom-aureliaViewModelEditor.ts | 2 +- .../src/examples/slickgrid/example10.ts | 2 +- .../src/examples/slickgrid/example2.ts | 2 +- .../src/examples/slickgrid/example23.ts | 4 +- .../src/examples/slickgrid/example24.ts | 10 +- .../src/examples/slickgrid/example3.ts | 2 +- .../src/examples/slickgrid/example33.ts | 2 +- .../src/examples/slickgrid/example4.ts | 4 +- .../src/examples/slickgrid/Example10.tsx | 2 +- .../src/examples/slickgrid/Example24.tsx | 12 +- .../react/src/examples/slickgrid/Example3.tsx | 2 +- .../src/examples/slickgrid/Example33.tsx | 2 +- demos/vanilla/src/examples/example03.ts | 2 +- demos/vanilla/src/examples/example16.ts | 2 +- demos/vue/src/components/Example03.vue | 2 +- demos/vue/src/components/Example04.vue | 4 +- demos/vue/src/components/Example24.vue | 10 +- demos/vue/src/components/Example33.vue | 2 +- docs/TOC.md | 1 + docs/column-functionalities/cell-menu.md | 53 +- docs/column-functionalities/editors.md | 2 +- docs/grid-functionalities/context-menu.md | 152 +++++- docs/grid-functionalities/grid-menu.md | 85 +++ .../header-menu-header-buttons.md | 98 +++- docs/menu-slots.md | 3 + docs/migrations/migration-to-10.x.md | 25 +- frameworks/angular-slickgrid/docs/TOC.md | 4 +- .../docs/column-functionalities/cell-menu.md | 38 +- .../docs/column-functionalities/editors.md | 4 +- .../Header-Menu-&-Header-Buttons.md | 104 +++- .../{Context-Menu.md => context-menu.md} | 105 +++- .../{Custom-Footer.md => custom-footer.md} | 0 .../docs/grid-functionalities/grid-menu.md | 10 + .../angular-slickgrid/docs/menu-slots.md | 499 ++++++++++++++++++ .../docs/migrations/migration-to-10.x.md | 25 +- .../examples/custom-angularComponentEditor.ts | 2 +- .../src/demos/examples/example02.component.ts | 2 +- .../src/demos/examples/example03.component.ts | 2 +- .../src/demos/examples/example04.component.ts | 4 +- .../src/demos/examples/example23.component.ts | 4 +- .../src/demos/examples/example24.component.ts | 12 +- .../src/demos/examples/example33.component.ts | 2 +- .../docs/column-functionalities/cell-menu.md | 23 +- .../docs/column-functionalities/editors.md | 4 +- .../docs/grid-functionalities/context-menu.md | 105 +++- .../docs/grid-functionalities/grid-menu.md | 10 + .../header-menu-header-buttons.md | 104 +++- .../aurelia-slickgrid/docs/menu-slots.md | 499 ++++++++++++++++++ .../docs/migrations/migration-to-10.x.md | 25 +- .../docs/column-functionalities/cell-menu.md | 23 +- .../docs/column-functionalities/editors.md | 4 +- .../docs/grid-functionalities/context-menu.md | 105 +++- .../docs/grid-functionalities/grid-menu.md | 10 + .../header-menu-header-buttons.md | 104 +++- frameworks/slickgrid-react/docs/menu-slots.md | 499 ++++++++++++++++++ .../docs/migrations/migration-to-10.x.md | 25 +- .../docs/column-functionalities/cell-menu.md | 27 +- .../docs/column-functionalities/editors.md | 4 +- .../docs/grid-functionalities/context-menu.md | 105 +++- .../docs/grid-functionalities/grid-menu.md | 10 + .../header-menu-header-buttons.md | 102 +++- frameworks/slickgrid-vue/docs/menu-slots.md | 499 ++++++++++++++++++ .../docs/migrations/migration-to-10.x.md | 25 +- 63 files changed, 3423 insertions(+), 193 deletions(-) rename frameworks/angular-slickgrid/docs/grid-functionalities/{Context-Menu.md => context-menu.md} (77%) rename frameworks/angular-slickgrid/docs/grid-functionalities/{Custom-Footer.md => custom-footer.md} (100%) create mode 100644 frameworks/angular-slickgrid/docs/menu-slots.md create mode 100644 frameworks/aurelia-slickgrid/docs/menu-slots.md create mode 100644 frameworks/slickgrid-react/docs/menu-slots.md create mode 100644 frameworks/slickgrid-vue/docs/menu-slots.md diff --git a/demos/aurelia/src/examples/slickgrid/custom-aureliaViewModelEditor.ts b/demos/aurelia/src/examples/slickgrid/custom-aureliaViewModelEditor.ts index 008e259c40..1e291b379b 100644 --- a/demos/aurelia/src/examples/slickgrid/custom-aureliaViewModelEditor.ts +++ b/demos/aurelia/src/examples/slickgrid/custom-aureliaViewModelEditor.ts @@ -33,7 +33,7 @@ export class CustomAureliaViewModelEditor implements Editor { elmBindingContext?: IBindingContext; constructor(private args: any) { - this.grid = args && args.grid; + this.grid = args?.grid; this.init(); } diff --git a/demos/aurelia/src/examples/slickgrid/example10.ts b/demos/aurelia/src/examples/slickgrid/example10.ts index 719d787265..8788d246e7 100644 --- a/demos/aurelia/src/examples/slickgrid/example10.ts +++ b/demos/aurelia/src/examples/slickgrid/example10.ts @@ -293,7 +293,7 @@ export class Example10 { } onGrid1SelectedRowsChanged(_e: Event, args: any) { - const grid = args && args.grid; + const grid = args?.grid; if (Array.isArray(args.rows)) { this.selectedTitle = args.rows.map((idx: number) => { const item = grid.getDataItem(idx); diff --git a/demos/aurelia/src/examples/slickgrid/example2.ts b/demos/aurelia/src/examples/slickgrid/example2.ts index 913fc8a181..6030b3f685 100644 --- a/demos/aurelia/src/examples/slickgrid/example2.ts +++ b/demos/aurelia/src/examples/slickgrid/example2.ts @@ -129,7 +129,7 @@ export class Example2 { minWidth: 100, formatter: customEnableButtonFormatter, onCellClick: (_e, args) => { - this.toggleCompletedProperty(args && args.dataContext); + this.toggleCompletedProperty(args?.dataContext); }, }, ]; diff --git a/demos/aurelia/src/examples/slickgrid/example23.ts b/demos/aurelia/src/examples/slickgrid/example23.ts index 399643c719..989b13e618 100644 --- a/demos/aurelia/src/examples/slickgrid/example23.ts +++ b/demos/aurelia/src/examples/slickgrid/example23.ts @@ -259,11 +259,11 @@ export class Example23 { } refreshMetrics(_e: Event, args: any) { - if (args && args.current >= 0) { + if (args?.current >= 0) { setTimeout(() => { this.metrics = { startTime: new Date(), - itemCount: (args && args.current) || 0, + itemCount: args?.current || 0, totalItemCount: this.dataset.length || 0, }; }); diff --git a/demos/aurelia/src/examples/slickgrid/example24.ts b/demos/aurelia/src/examples/slickgrid/example24.ts index 4267b8b91c..a24fd42b0d 100644 --- a/demos/aurelia/src/examples/slickgrid/example24.ts +++ b/demos/aurelia/src/examples/slickgrid/example24.ts @@ -428,7 +428,7 @@ export class Example24 { // optionally and conditionally define when the the menu is usable, // this should be used with a custom formatter to show/hide/disable the menu menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return dataContext.id < 21; // say we want to display the menu only from Task 0 to 20 }, // which column to show the command list? when not defined it will be shown over all columns @@ -459,7 +459,7 @@ export class Example24 { }, // only show command to 'Help' when the task is Not Completed itemVisibilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -525,7 +525,7 @@ export class Example24 { textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, // you can use the 'action' callback and/or subscribe to the 'onCallback' event, they both have the same arguments @@ -547,7 +547,7 @@ export class Example24 { disabled: true, // only shown when the task is Not Completed itemVisibilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -578,7 +578,7 @@ export class Example24 { // subscribe to Context Menu onOptionSelected event (or use the action callback on each option) onOptionSelected: (_e: any, args: any) => { // change Priority - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext?.hasOwnProperty('priority')) { dataContext.priority = args.item.option; this.aureliaGrid.gridService.updateItem(dataContext); diff --git a/demos/aurelia/src/examples/slickgrid/example3.ts b/demos/aurelia/src/examples/slickgrid/example3.ts index 87aae58839..cb556556d1 100644 --- a/demos/aurelia/src/examples/slickgrid/example3.ts +++ b/demos/aurelia/src/examples/slickgrid/example3.ts @@ -28,7 +28,7 @@ const NB_ITEMS = 100; // you can create custom validator to pass to an inline editor const myCustomTitleValidator: EditorValidator = (value: any) => { // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it - // const grid = args && args.grid; + // const grid = args?.grid; // const gridOptions = grid.getOptions() as GridOption; // const i18n = gridOptions.i18n; diff --git a/demos/aurelia/src/examples/slickgrid/example33.ts b/demos/aurelia/src/examples/slickgrid/example33.ts index d54398ca5e..0371f6f92c 100644 --- a/demos/aurelia/src/examples/slickgrid/example33.ts +++ b/demos/aurelia/src/examples/slickgrid/example33.ts @@ -459,7 +459,7 @@ export class Example33 { onCommand: (e, args) => this.executeCommand(e, args), onOptionSelected: (_e, args) => { // change "Completed" property with new option selected from the Cell Menu - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('completed')) { dataContext.completed = args.item.option; this.aureliaGrid.gridService.updateItem(dataContext); diff --git a/demos/aurelia/src/examples/slickgrid/example4.ts b/demos/aurelia/src/examples/slickgrid/example4.ts index 8613c2fbf5..947053c703 100644 --- a/demos/aurelia/src/examples/slickgrid/example4.ts +++ b/demos/aurelia/src/examples/slickgrid/example4.ts @@ -312,12 +312,12 @@ export class Example4 { } refreshMetrics(_e: Event, args: any) { - if (args && args.current >= 0) { + if (args?.current >= 0) { setTimeout(() => { this.metrics = { startTime: new Date(), endTime: new Date(), - itemCount: (args && args.current) || 0, + itemCount: args?.current || 0, totalItemCount: this.dataset.length || 0, }; }); diff --git a/demos/react/src/examples/slickgrid/Example10.tsx b/demos/react/src/examples/slickgrid/Example10.tsx index 46a2788e01..4a0f23deaf 100644 --- a/demos/react/src/examples/slickgrid/Example10.tsx +++ b/demos/react/src/examples/slickgrid/Example10.tsx @@ -303,7 +303,7 @@ const Example10: React.FC = () => { } function onGrid1SelectedRowsChanged(_e: Event, args: any) { - const grid = args && args.grid; + const grid = args?.grid; if (Array.isArray(args.rows)) { const selectedTitles = args.rows.map((idx: number) => { const item = grid.getDataItem(idx); diff --git a/demos/react/src/examples/slickgrid/Example24.tsx b/demos/react/src/examples/slickgrid/Example24.tsx index 57a520c5ed..839f631e9f 100644 --- a/demos/react/src/examples/slickgrid/Example24.tsx +++ b/demos/react/src/examples/slickgrid/Example24.tsx @@ -347,7 +347,7 @@ const Example24: React.FC = () => { onCommand: (_e, args) => executeCommand(_e, args), onOptionSelected: (_e, args) => { // change "Completed" property with new option selected from the Cell Menu - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('completed')) { dataContext.completed = args.item.option; reactGridRef.current?.gridService.updateItem(dataContext); @@ -428,7 +428,7 @@ const Example24: React.FC = () => { // optionally and conditionally define when the the menu is usable, // this should be used with a custom formatter to show/hide/disable the menu menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return dataContext.id < 21; // say we want to display the menu only from Task 0 to 20 }, // which column to show the command list? when not defined it will be shown over all columns @@ -459,7 +459,7 @@ const Example24: React.FC = () => { }, // only show command to 'Help' when the task is Not Completed itemVisibilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -525,7 +525,7 @@ const Example24: React.FC = () => { textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, // you can use the 'action' callback and/or subscribe to the 'onCallback' event, they both have the same arguments @@ -547,7 +547,7 @@ const Example24: React.FC = () => { disabled: true, // only shown when the task is Not Completed itemVisibilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -578,7 +578,7 @@ const Example24: React.FC = () => { // subscribe to Context Menu onOptionSelected event (or use the action callback on each option) onOptionSelected: (_e, args) => { // change Priority - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('priority')) { dataContext.priority = args.item.option; reactGridRef.current?.gridService.updateItem(dataContext); diff --git a/demos/react/src/examples/slickgrid/Example3.tsx b/demos/react/src/examples/slickgrid/Example3.tsx index 5f833fbc82..9be182fa8e 100644 --- a/demos/react/src/examples/slickgrid/Example3.tsx +++ b/demos/react/src/examples/slickgrid/Example3.tsx @@ -30,7 +30,7 @@ const NB_ITEMS = 100; // you can create custom validator to pass to an inline editor const myCustomTitleValidator: EditorValidator = (value: any) => { // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it - // const grid = args && args.grid; + // const grid = args?.grid; // const gridOptions = grid.getOptions() as GridOption; // const i18n = gridOptions.i18n; diff --git a/demos/react/src/examples/slickgrid/Example33.tsx b/demos/react/src/examples/slickgrid/Example33.tsx index 4486e9f4d3..fd4523d19e 100644 --- a/demos/react/src/examples/slickgrid/Example33.tsx +++ b/demos/react/src/examples/slickgrid/Example33.tsx @@ -457,7 +457,7 @@ const Example33: React.FC = () => { onCommand: (e, args) => executeCommand(e, args), onOptionSelected: (_e, args) => { // change "Completed" property with new option selected from the Cell Menu - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('completed')) { dataContext.completed = args.item.option; reactGridRef.current?.gridService.updateItem(dataContext); diff --git a/demos/vanilla/src/examples/example03.ts b/demos/vanilla/src/examples/example03.ts index 75d125ae60..c2a023b836 100644 --- a/demos/vanilla/src/examples/example03.ts +++ b/demos/vanilla/src/examples/example03.ts @@ -424,7 +424,7 @@ export default class Example03 { onCommand: (e, args) => this.executeCommand(e, args), onOptionSelected: (_e, args) => { // change "Effort-Driven" property with new option selected from the Cell Menu - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('effortDriven')) { dataContext.effortDriven = args.item.option; this.sgb.gridService.updateItem(dataContext); diff --git a/demos/vanilla/src/examples/example16.ts b/demos/vanilla/src/examples/example16.ts index dd404b25d9..7141123731 100644 --- a/demos/vanilla/src/examples/example16.ts +++ b/demos/vanilla/src/examples/example16.ts @@ -503,7 +503,7 @@ export default class Example16 { onCommand: (e, args) => this.executeCommand(e, args), onOptionSelected: (_e, args) => { // change "Completed" property with new option selected from the Cell Menu - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('completed')) { dataContext.completed = args.item.option; this.sgb.gridService.updateItem(dataContext); diff --git a/demos/vue/src/components/Example03.vue b/demos/vue/src/components/Example03.vue index 7873927bbe..1b6472f73c 100644 --- a/demos/vue/src/components/Example03.vue +++ b/demos/vue/src/components/Example03.vue @@ -41,7 +41,7 @@ let vueGrid!: SlickgridVueInstance; // you can create custom validator to pass to an inline editor const myCustomTitleValidator: EditorValidator = (value: any) => { // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it - // const grid = args && args.grid; + // const grid = args?.grid; // const gridOptions = grid.getOptions() as GridOption; // const i18n = gridOptions.i18n; diff --git a/demos/vue/src/components/Example04.vue b/demos/vue/src/components/Example04.vue index ed74630b1a..7cd39768d3 100644 --- a/demos/vue/src/components/Example04.vue +++ b/demos/vue/src/components/Example04.vue @@ -308,12 +308,12 @@ function setSortingDynamically() { } function refreshMetrics(_e: Event, args: any) { - if (args && args.current >= 0) { + if (args?.current >= 0) { setTimeout(() => { metrics.value = { startTime: new Date(), endTime: new Date(), - itemCount: (args && args.current) || 0, + itemCount: args?.current || 0, totalItemCount: dataset.value.length || 0, }; }); diff --git a/demos/vue/src/components/Example24.vue b/demos/vue/src/components/Example24.vue index f383cdeafa..05ff6fc8e1 100644 --- a/demos/vue/src/components/Example24.vue +++ b/demos/vue/src/components/Example24.vue @@ -424,7 +424,7 @@ function getContextMenuOptions(): ContextMenu { // optionally and conditionally define when the the menu is usable, // this should be used with a custom formatter to show/hide/disable the menu menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return dataContext.id < 21; // say we want to display the menu only from Task 0 to 20 }, // which column to show the command list? when not defined it will be shown over all columns @@ -455,7 +455,7 @@ function getContextMenuOptions(): ContextMenu { }, // only show command to 'Help' when the task is Not Completed itemVisibilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -521,7 +521,7 @@ function getContextMenuOptions(): ContextMenu { textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, // you can use the 'action' callback and/or subscribe to the 'onCallback' event, they both have the same arguments @@ -543,7 +543,7 @@ function getContextMenuOptions(): ContextMenu { disabled: true, // only shown when the task is Not Completed itemVisibilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -574,7 +574,7 @@ function getContextMenuOptions(): ContextMenu { // subscribe to Context Menu onOptionSelected event (or use the action callback on each option) onOptionSelected: (_e: any, args: any) => { // change Priority - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && 'priority' in dataContext) { dataContext.priority = args.item.option; vueGrid.gridService.updateItem(dataContext); diff --git a/demos/vue/src/components/Example33.vue b/demos/vue/src/components/Example33.vue index 89b8f0d5c5..0eae92d27a 100644 --- a/demos/vue/src/components/Example33.vue +++ b/demos/vue/src/components/Example33.vue @@ -497,7 +497,7 @@ function defineGrid() { onCommand: (e, args) => executeCommand(e, args), onOptionSelected: (_e, args) => { // change "Completed" property with new option selected from the Cell Menu - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && 'completed' in dataContext) { dataContext.completed = args.item.option; vueGrid.gridService.updateItem(dataContext); diff --git a/docs/TOC.md b/docs/TOC.md index 492f4797d4..4322fd7f46 100644 --- a/docs/TOC.md +++ b/docs/TOC.md @@ -46,6 +46,7 @@ * [Resize by Cell Content](grid-functionalities/resize-by-cell-content.md) * [Column Picker](grid-functionalities/column-picker.md) * [Composite Editor Modal](grid-functionalities/composite-editor-modal.md) +* [Custom Menu Slots](menu-slots.md) * [Custom Tooltip](grid-functionalities/custom-tooltip.md) * [Column & Row Spanning](grid-functionalities/column-row-spanning.md) * [Context Menu](grid-functionalities/context-menu.md) diff --git a/docs/column-functionalities/cell-menu.md b/docs/column-functionalities/cell-menu.md index 5caf07bad4..533230cb14 100644 --- a/docs/column-functionalities/cell-menu.md +++ b/docs/column-functionalities/cell-menu.md @@ -94,7 +94,8 @@ So if you decide to use the `action` callback, then your code would look like th ##### with `action` callback ```ts this.columnDefinitions = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { commandItems: [ { command: 'command1', title: 'Command 1', action: (e, args) => console.log(args) }, @@ -111,7 +112,8 @@ The `onCommand` (or `onOptionSelected`) **must** be defined in the Grid Options ```ts this.columnDefinitions = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { commandItems: [ { command: 'command1', title: 'Command 1' }, @@ -155,12 +157,10 @@ What if you want to dynamically disable or hide a Command/Option or even disable For example, say we want the Cell Menu to only be available on the first 20 rows of the grid, we could use the override this way ```ts this.columnDefinitions = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { - menuUsabilityOverride: (args) => { - const dataContext = args?.dataContext; - return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 - }, + menuUsabilityOverride: (args) => args?.dataContext.id < 21, // say we want to display the menu only from Task 0 to 20 } } ]; @@ -168,29 +168,34 @@ this.columnDefinitions = [ To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way ```ts -this.columnDefinitions = [{ - id: 'action', field: 'action', name: 'Action', - cellMenu: { - optionItems: [{ - option: 0, title: 'n/a', textCssClass: 'italic', - // only enable this option when the task is Not Completed - itemUsabilityOverride: (args) => { - const dataContext = args?.dataContext; - return !dataContext.completed; - }, - { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' }, - { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' }, - { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' }, - }] - } -}]; +this.columnDefinitions = [ + { + id: 'action', field: 'action', name: 'Action', + cellMenu: { + optionItems: [ + { + option: 0, title: 'n/a', textCssClass: 'italic', + // only enable this option when the task is Not Completed + itemUsabilityOverride: (args) => { + const dataContext = args?.dataContext; + return !dataContext.completed; + }, + }, + { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' }, + { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' }, + { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' }, + ] + } + }, +]; ``` ### How to add Translations? It works exactly like the rest of the library when `enableTranslate` is set, all we have to do is to provide translations with the `Key` suffix, so for example without translations, we would use `title` and that would become `titleKey` with translations, that;'s easy enough. So for example, a list of Options could be defined as follow: ```ts this.columnDefinitions = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { optionTitleKey: 'OPTIONS', // optionally pass a title to show over the Options optionItems: [ diff --git a/docs/column-functionalities/editors.md b/docs/column-functionalities/editors.md index 27d9c8db27..21f176002b 100644 --- a/docs/column-functionalities/editors.md +++ b/docs/column-functionalities/editors.md @@ -270,7 +270,7 @@ So if we take all of these informations and we want to create our own Custom Edi const myCustomTitleValidator: EditorValidator = (value: any, args: EditorArgs) => { // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it const grid = args?.grid; - const gridOptions = (grid && grid.getOptions) ? grid.getOptions() : {}; + const gridOptions = grid.getOptions() : {}; const i18n = gridOptions.i18n; if (value == null || value === undefined || !value.length) { diff --git a/docs/grid-functionalities/context-menu.md b/docs/grid-functionalities/context-menu.md index 8a17222096..fc797f97de 100644 --- a/docs/grid-functionalities/context-menu.md +++ b/docs/grid-functionalities/context-menu.md @@ -21,7 +21,7 @@ This extensions is wrapped around the new SlickGrid Plugin **SlickContextMenu** ### Default Usage Technically, the Context Menu is enabled by default (copy, export) and so you don't have anything to do to enjoy it (you could disable it at any time). However, if you want to customize the content of the Context Menu, then continue reading. You can customize the menu with 2 different lists, Commands and/or Options, they can be used separately or at the same time. Also note that even though the code shown below makes a separation between the Commands and Options, you can mix them in the same Context Menu. -#### with Commands +#### with Commands (Static) ```ts this.gridOptions = { enableFiltering: true, @@ -60,6 +60,98 @@ this.gridOptions = { }; ``` +#### with Commands (Dynamic Builder) +For advanced scenarios where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. + +```ts +this.gridOptions = { + enableContextMenu: true, + contextMenu: { + commandListBuilder: (builtInItems) => { + // Example: Add custom commands after built-in ones + return [ + ...builtInItems, + 'divider', + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: (e, args) => { + if (confirm(`Delete row ${args.dataContext.id}?`)) { + this.gridService.deleteItem(args.dataContext); + } + } + }, + { + command: 'duplicate-row', + title: 'Duplicate Row', + iconCssClass: 'mdi mdi-content-duplicate', + action: (e, args) => { + const newItem = { ...args.dataContext, id: this.generateNewId() }; + this.gridService.addItem(newItem); + } + } + ]; + }, + onCommand: (e, args) => { + // Handle commands here if not using action callbacks + console.log('Command:', args.command); + } + } +}; +``` + +**Example: Filter commands based on row data** +```ts +contextMenu: { + commandListBuilder: (builtInItems) => { + // You can't access row data here, but you can filter/modify built-in items + // Use itemUsabilityOverride or itemVisibilityOverride for row-specific logic + + // Only show export commands + return builtInItems.filter(item => + item === 'divider' || item.command?.includes('export') + ); + } +} +``` + +**Example: Sort and reorganize commands** +```ts +contextMenu: { + commandListBuilder: (builtInItems) => { + const customFirst = [ + { + command: 'edit', + title: 'Edit Row', + iconCssClass: 'mdi mdi-pencil', + positionOrder: 0 + } + ]; + + // Sort built-in commands by positionOrder + const sorted = [...builtInItems].sort((a, b) => { + if (a === 'divider' || b === 'divider') return 0; + return (a.positionOrder || 50) - (b.positionOrder || 50); + }); + + return [...customFirst, 'divider', ...sorted]; + } +} +``` + +**When to use `commandListBuilder` vs `commandItems`:** +- Use `commandItems` for static command lists +- Use `commandListBuilder` when you need to: + - Append/prepend to built-in commands + - Filter or modify commands dynamically + - Sort or reorder the final command list + - Have full control over what gets rendered + +**Note:** Typically use `commandListBuilder` **instead of** `commandItems`, not both together. + +See the main [Custom Menu Slots](../menu-slots.md) documentation for detailed `commandListBuilder` examples. + #### with Options That is when you want to define a list of Options (only 1 list) that the user can choose from and once is selected we would do something (for example change the value of a cell in the grid). ```ts @@ -146,17 +238,19 @@ contextMenu: { To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way ```ts contextMenu: { - optionItems: [{ - option: 0, title: 'n/a', textCssClass: 'italic', - // only enable this option when the task is Not Completed - itemUsabilityOverride: (args) => { - const dataContext = args?.dataContext; - return !dataContext.completed; + optionItems: [ + { + option: 0, title: 'n/a', textCssClass: 'italic', + // only enable this option when the task is Not Completed + itemUsabilityOverride: (args) => { + const dataContext = args?.dataContext; + return !dataContext.completed; + }, }, { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' }, { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' }, { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' }, - }] + ] } ``` @@ -165,11 +259,11 @@ It works exactly like the rest of the library when `enableTranslate` is set, all ```ts contextMenu: { optionTitleKey: 'OPTIONS', // optionally pass a title to show over the Options - optionItems: [{ + optionItems: [ { option: 1, titleKey: 'LOW', iconCssClass: 'mdi mdi-star-outline yellow' }, { option: 2, titleKey: 'MEDIUM', iconCssClass: 'mdi mdi-star orange' }, { option: 3, titleKey: 'HIGH', iconCssClass: 'mdi mdi-star red' }, - }] + ] } ``` @@ -189,25 +283,25 @@ Another set of possible Commands would be related to Grouping, so if you are usi All of these internal commands, you can choose to hide them and/or change their icons, the default global options are the following and you can change any of them. ```ts contextMenu: { - autoAdjustDrop: true, - autoAlignSide: true, - hideCloseButton: true, - hideClearAllGrouping: false, - hideCollapseAllGroups: false, - hideCommandSection: false, - hideCopyCellValueCommand: false, - hideExpandAllGroups: false, - hideExportCsvCommand: false, - hideExportExcelCommand: false, - hideExportTextDelimitedCommand: true, - hideMenuOnScroll: true, - hideOptionSection: false, - iconCopyCellValueCommand: 'mdi mdi-content-copy', - iconExportCsvCommand: 'mdi mdi-download', - iconExportExcelCommand: 'mdi mdi-file-excel-outline text-success', - iconExportTextDelimitedCommand: 'mdi mdi-download', - width: 200, - }, + autoAdjustDrop: true, + autoAlignSide: true, + hideCloseButton: true, + hideClearAllGrouping: false, + hideCollapseAllGroups: false, + hideCommandSection: false, + hideCopyCellValueCommand: false, + hideExpandAllGroups: false, + hideExportCsvCommand: false, + hideExportExcelCommand: false, + hideExportTextDelimitedCommand: true, + hideMenuOnScroll: true, + hideOptionSection: false, + iconCopyCellValueCommand: 'mdi mdi-content-copy', + iconExportCsvCommand: 'mdi mdi-download', + iconExportExcelCommand: 'mdi mdi-file-excel-outline text-success', + iconExportTextDelimitedCommand: 'mdi mdi-download', + width: 200, +}, ``` ### How to Disable the Context Menu? diff --git a/docs/grid-functionalities/grid-menu.md b/docs/grid-functionalities/grid-menu.md index 0c8cf96651..2e1befef10 100644 --- a/docs/grid-functionalities/grid-menu.md +++ b/docs/grid-functionalities/grid-menu.md @@ -21,6 +21,8 @@ The Grid Menu also comes, by default, with a list of built-in custom commands (a - _Refresh Dataset_, only shown when using Backend Service API (you can hide it with `hideRefreshDatasetCommand: true`) This section is called Custom Commands because you can also customize this section with your own commands. To do that, you need to fill in 2 properties (an array of `commandItems` and define `onGridMenuCommand` callback) in your Grid Options. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): + +#### Using Static Command Items ```ts this.gridOptions = { enableAutoResize: true, @@ -73,6 +75,89 @@ this.gridOptions = { }; ``` +#### Advanced: Dynamic Command List Builder +For more advanced use cases where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. This function is executed **after** `commandItems` is processed and is the **last call before rendering** the menu in the DOM. + +**When to use `commandListBuilder`:** +- You want to append/prepend items to the built-in commands +- You need to filter commands based on runtime conditions +- You want to sort or reorder commands dynamically +- You need access to both built-in and custom commands to manipulate the final list + +**Note:** You would typically use `commandListBuilder` **instead of** `commandItems` (not both), since the builder gives you full control over the final command list. + +```ts +gridOptions: { + gridMenu: { + // Build the command list dynamically + commandListBuilder: (builtInItems) => { + // Example 1: Append custom commands to built-in ones + return [ + ...builtInItems, + 'divider', + { + command: 'help', + title: 'Help', + iconCssClass: 'mdi mdi-help-circle', + positionOrder: 99, + action: () => window.open('https://example.com/help', '_blank') + }, + ]; + }, + onCommand: (e, args) => { + if (args.command === 'help') { + // command handled via action callback above + } + } + } +} +``` + +**Example: Filter commands based on user permissions** +```ts +gridOptions: { + gridMenu: { + commandListBuilder: (builtInItems) => { + // Remove export commands if user doesn't have export permission + if (!this.userHasExportPermission) { + return builtInItems.filter(item => + item !== 'divider' && + !item.command?.includes('export') + ); + } + return builtInItems; + } + } +} +``` + +**Example: Reorder and customize the command list** +```ts +gridOptions: { + gridMenu: { + commandListBuilder: (builtInItems) => { + // Add custom commands at the beginning + const customCommands = [ + { + command: 'refresh-cache', + title: 'Refresh Cache', + iconCssClass: 'mdi mdi-cached', + action: () => this.refreshCache() + }, + 'divider' + ]; + + // Sort built-in items by title + const sortedBuiltIn = builtInItems + .filter(item => item !== 'divider') + .sort((a, b) => (a.title || '').localeCompare(b.title || '')); + + return [...customCommands, ...sortedBuiltIn]; + } + } +} +``` + #### Events There are multiple events/callback hooks which are accessible from the Grid Options - `onBeforeMenuShow` diff --git a/docs/grid-functionalities/header-menu-header-buttons.md b/docs/grid-functionalities/header-menu-header-buttons.md index 0168519fd5..861f69b24e 100644 --- a/docs/grid-functionalities/header-menu-header-buttons.md +++ b/docs/grid-functionalities/header-menu-header-buttons.md @@ -20,7 +20,10 @@ The Header Menu also comes, by default, with a list of built-in custom commands - Sort Descending (you can hide it with `hideSortCommands: true`) - Hide Column (you can hide it with `hideColumnHideCommand: true`) -This section is called Custom Commands because you can also customize this section with your own commands. To do that, you need to fill in 2 properties (an array of `headerMenuItems` that will go under each column definition and define `onCommand` callbacks) in your Grid Options. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): +This section is called Custom Commands because you can also customize this section with your own commands. You can do this in two ways: using static command items or using a dynamic command list builder. + +#### Static Command Items +To add static commands, fill in an array of items in your column definition's `header.menu.commandItems`. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): ```ts this.gridOptions = { enableAutoResize: true, @@ -51,6 +54,99 @@ this.gridOptions = { } }; ``` +#### Dynamic Command List Builder +For advanced use cases where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. This is executed **after** `commandItems` and is the **last call before rendering**. + +```ts +this.columnDefinitions = [ + { + id: 'title', + name: 'Title', + field: 'title', + header: { + menu: { + commandListBuilder: (builtInItems) => { + // Append custom commands to the built-in sort/hide commands + return [ + ...builtInItems, + 'divider', + { + command: 'freeze-column', + title: 'Freeze Column', + iconCssClass: 'mdi mdi-pin', + action: (e, args) => { + // Implement column freezing + console.log('Freeze column:', args.column.name); + } + } + ]; + } + } + } + } +]; +``` + +**Example: Conditional commands based on column type** +```ts +header: { + menu: { + commandListBuilder: (builtInItems) => { + const column = this; // column context + + // Add filtering option only for filterable columns + const extraCommands = []; + if (column.filterable !== false) { + extraCommands.push({ + command: 'clear-filter', + title: 'Clear Filter', + iconCssClass: 'mdi mdi-filter-remove', + action: (e, args) => { + this.filterService.clearFilterByColumnId(args.column.id); + } + }); + } + + return [...builtInItems, ...extraCommands]; + } + } +} +``` + +**Example: Remove sort commands, keep only custom ones** +```ts +header: { + menu: { + commandListBuilder: (builtInItems) => { + // Filter out sort commands + const filtered = builtInItems.filter(item => + item !== 'divider' && + !item.command?.includes('sort') + ); + + // Add custom commands + return [ + ...filtered, + { + command: 'custom-action', + title: 'Custom Action', + iconCssClass: 'mdi mdi-star', + action: (e, args) => alert('Custom: ' + args.column.name) + } + ]; + } + } +} +``` + +**When to use `commandListBuilder`:** +- You want to append/prepend items to built-in commands +- You need to filter or modify commands based on column properties +- You want to customize the command list per column dynamically +- You need full control over the final command list + +**Note:** Use `commandListBuilder` **instead of** `commandItems`, not both together. + #### Callback Hooks There are 2 callback hooks which are accessible in the Grid Options - `onBeforeMenuShow` diff --git a/docs/menu-slots.md b/docs/menu-slots.md index 0b9ada7a7e..61f036b738 100644 --- a/docs/menu-slots.md +++ b/docs/menu-slots.md @@ -2,6 +2,8 @@ All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cross-framework compatible slot rendering** for custom content injection in menu items. This is achieved through the `slotRenderer` callback at the item level combined with an optional `defaultMenuItemRenderer` at the menu level. +> **Note:** This documentation covers **how menu items are rendered** (visual presentation). If you need to **dynamically modify which commands appear** in the menu (filtering, sorting, adding/removing items), see the `commandListBuilder` callback documented in [Grid Menu](grid-functionalities/grid-menu.md), [Context Menu](grid-functionalities/context-menu.md), or [Header Menu](grid-functionalities/header-menu-header-buttons.md). + ### Core Concept Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. @@ -396,6 +398,7 @@ const menuItem = { - **HTMLElement objects** are appended directly - safer for dynamic content and allows event listeners - **Cross-framework compatible** - works in vanilla JS, Angular, React, Vue, Aurelia using the same API - **Priority order** - Item-level `slotRenderer` overrides menu-level `defaultMenuItemRenderer` +- **Built-in command preservation** - When overriding a built-in command (e.g., `sort-asc`, `sort-desc`, `hide`, etc.) with custom properties like `slotRenderer` or `iconCssClass`, if you don't provide an `action` callback, the library will automatically preserve and use the built-in action for that command. This means you can safely customize the appearance of built-in commands without losing their functionality. - **Accessibility** - Include proper ARIA attributes when creating custom elements - **Event handling** - Call `event.stopPropagation()` in interactive elements to prevent menu commands from firing - **Default fallback** - If neither `slotRenderer` nor `defaultMenuItemRenderer` is provided, the default icon + text rendering is used diff --git a/docs/migrations/migration-to-10.x.md b/docs/migrations/migration-to-10.x.md index 91b8aa2655..e826765d87 100644 --- a/docs/migrations/migration-to-10.x.md +++ b/docs/migrations/migration-to-10.x.md @@ -1,4 +1,4 @@ -## Cleaner Code / Smaller Code ⚡ +## Simplication and Modernization ⚡ One of the biggest change of this release is to hide columns by using the `hidden` column property (now used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()` in v10+, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... @@ -64,11 +64,30 @@ gridOptions = { }; ``` -### External Resources are now auto-enabled - This change does not require any code update from the end user, but it is a change that you should probably be aware of nonetheless. The reason I decided to implement this is because I often forget myself to enable the associated flag and typically if you wanted to load the resource, then it's most probably because you also want it enabled. So for example, if your register `ExcelExportService` then the library will now auto-enable the resource with its associated flag (which in this case is `enableExcelExport:true`)... unless you already disabled the flag (or enabled) yourself, if so then the internal assignment will simply be skipped and yours will prevail. Also just to be clear, the list of auto-enabled external resources is rather small, it will auto-enable the following resources: (ExcelExportService, PdfExportService, TextExportService, CompositeEditorComponent and RowDetailView). +### Menu with Commands + +All menu plugins (Cell Menu, Context Menu, Header Menu and Grid Menu) now have a new `commandListBuilder: (items) => items` which now allow you to filter/sort and maybe override built-in commands. With this new feature in place, I'm deprecating all `hide...` properties and also `positionOrder` since you can now do that with the builder. You could also use the `hideCommands` which accepts an array of built-in command names. This well remove huge amount of `hide...` properties (over 30) that keeps increasing anytime a new built-in command gets added (in other words, this will simplify maintenance for both you and me).This well remove huge amount of `hide...` properties (over 30) that keeps increasing anytime a new built-in command gets added (in other words, this will simplify maintenance for both you and me). + +These are currently just deprecations in v10.x but it's strongly recommended to start using the `commandListBuilder` and/or `hideCommands` and move away from the deprecated properties which will be removed in v11.x. For example if we want to hide some built-in commands: + +```diff +gridOptions = { + gridMenu: { +- hideExportCsvCommand: true, +- hideTogglePreHeaderCommand: true, + +// via command name(s) ++ hideCommands: ['export-csv', 'toggle-preheader'], + +// or via builder ++ commandListBuilder: (cmdItems) => [...cmdItems.filter(x => x !== 'divider' && x.command !== 'export-csv' && x.command !== 'toggle-preheader')] + } +} +``` + --- {% hint style="note" %} diff --git a/frameworks/angular-slickgrid/docs/TOC.md b/frameworks/angular-slickgrid/docs/TOC.md index f92a407057..b89496d92c 100644 --- a/frameworks/angular-slickgrid/docs/TOC.md +++ b/frameworks/angular-slickgrid/docs/TOC.md @@ -53,8 +53,8 @@ * [Add, Update or Highlight a Datagrid Item](grid-functionalities/add-update-highlight.md) * [Dynamically Add CSS Classes to Item Rows](grid-functionalities/dynamic-item-metadata.md) * [Column & Row Spanning](grid-functionalities/column-row-spanning.md) -* [Context Menu](grid-functionalities/Context-Menu.md) -* [Custom Footer](grid-functionalities/Custom-Footer.md) +* [Context Menu](grid-functionalities/context-menu.md) +* [Custom Footer](grid-functionalities/custom-footer.md) * [Excel Copy Buffer Plugin](grid-functionalities/excel-copy-buffer.md) * [Export to Excel](grid-functionalities/Export-to-Excel.md) * [Export to PDF](grid-functionalities/Export-to-PDF.md) diff --git a/frameworks/angular-slickgrid/docs/column-functionalities/cell-menu.md b/frameworks/angular-slickgrid/docs/column-functionalities/cell-menu.md index ded4c4aada..cd8417ff8e 100644 --- a/frameworks/angular-slickgrid/docs/column-functionalities/cell-menu.md +++ b/frameworks/angular-slickgrid/docs/column-functionalities/cell-menu.md @@ -94,7 +94,8 @@ So if you decide to use the `action` callback, then your code would look like th ##### with `action` callback ```ts this.columnDefinitions = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { commandItems: [ { command: 'command1', title: 'Command 1', action: (e, args) => console.log(args) }, @@ -111,7 +112,8 @@ The `onCommand` (or `onOptionSelected`) **must** be defined in the Grid Options ```ts this.columnDefinitions = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { commandItems: [ { command: 'command1', title: 'Command 1' }, @@ -140,6 +142,11 @@ this.gridOptions = { }; ``` +### Custom Menu Item Rendering +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. + +See [Custom Menu Slots](../../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. + ### Override Callback Methods What if you want to dynamically disable or hide a Command/Option or even disable the entire menu in certain circumstances? For these cases, you would use the override callback methods, the method must return a `boolean`. The list of override available are the following - `menuUsabilityOverride` returning false would make the Cell Menu unavailable to the user @@ -150,12 +157,10 @@ What if you want to dynamically disable or hide a Command/Option or even disable For example, say we want the Cell Menu to only be available on the first 20 rows of the grid, we could use the override this way ```ts this.columnDefinitions = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { - menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; - return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 - }, + menuUsabilityOverride: (args) => args?.dataContext.id < 21, // say we want to display the menu only from Task 0 to 20 } } ]; @@ -164,15 +169,17 @@ this.columnDefinitions = [ To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way ```ts this.columnDefinitions = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { optionItems: [ - { - option: 0, title: 'n/a', textCssClass: 'italic', - // only enable this option when the task is Not Completed - itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; - return !dataContext.completed; + { + option: 0, title: 'n/a', textCssClass: 'italic', + // only enable this option when the task is Not Completed + itemUsabilityOverride: (args) => { + const dataContext = args?.dataContext; + return !dataContext.completed; + }, }, { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' }, { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' }, @@ -187,7 +194,8 @@ this.columnDefinitions = [ It works exactly like the rest of the library when `enableTranslate` is set, all we have to do is to provide translations with the `Key` suffix, so for example without translations, we would use `title` and that would become `titleKey` with translations, that;'s easy enough. So for example, a list of Options could be defined as follow: ```ts this.columnDefinitions = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { optionTitleKey: 'OPTIONS', // optionally pass a title to show over the Options optionItems: [ diff --git a/frameworks/angular-slickgrid/docs/column-functionalities/editors.md b/frameworks/angular-slickgrid/docs/column-functionalities/editors.md index 5ab1f98c16..449a27af35 100644 --- a/frameworks/angular-slickgrid/docs/column-functionalities/editors.md +++ b/frameworks/angular-slickgrid/docs/column-functionalities/editors.md @@ -501,10 +501,10 @@ So if we take all of these informations and we want to create our own Custom Edi ```ts const myCustomTitleValidator: EditorValidator = (value: any, args: EditorArgs) => { // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it - const grid = args && args.grid; + const grid = args.grid; const columnDef = args.column; const dataContext = args.item; - const gridOptions = (grid && grid.getOptions) ? grid.getOptions() : {}; + const gridOptions = grid.getOptions() : {}; const i18n = gridOptions.i18n; if (value == null || value === undefined || !value.length) { diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/Header-Menu-&-Header-Buttons.md b/frameworks/angular-slickgrid/docs/grid-functionalities/Header-Menu-&-Header-Buttons.md index 7742b7653e..9129356b5f 100644 --- a/frameworks/angular-slickgrid/docs/grid-functionalities/Header-Menu-&-Header-Buttons.md +++ b/frameworks/angular-slickgrid/docs/grid-functionalities/Header-Menu-&-Header-Buttons.md @@ -20,7 +20,10 @@ The Header Menu also comes, by default, with a list of built-in custom commands - Sort Descending (you can hide it with `hideSortCommands: true`) - Hide Column (you can hide it with `hideColumnHideCommand: true`) -This section is called Custom Commands because you can also customize this section with your own commands. To do that, you need to fill in 2 properties (an array of `headerMenuItems` that will go under each column definition and define `onCommand` callbacks) in your Grid Options. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): +This section is called Custom Commands because you can also customize this section with your own commands. You can do this in two ways: using static command items or using a dynamic command list builder. + +#### Static Command Items +To add static commands, fill in an array of items in your column definition's `header.menu.commandItems`. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): ```ts this.gridOptions = { enableAutoResize: true, @@ -51,6 +54,100 @@ this.gridOptions = { } }; ``` + +#### Dynamic Command List Builder +For advanced use cases where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. This is executed **after** `commandItems` and is the **last call before rendering**. + +```ts +this.columnDefinitions = [ + { + id: 'title', + name: 'Title', + field: 'title', + header: { + menu: { + commandListBuilder: (builtInItems) => { + // Append custom commands to the built-in sort/hide commands + return [ + ...builtInItems, + 'divider', + { + command: 'freeze-column', + title: 'Freeze Column', + iconCssClass: 'mdi mdi-pin', + action: (e, args) => { + // Implement column freezing + console.log('Freeze column:', args.column.name); + } + } + ]; + } + } + } + } +]; +``` + +**Example: Conditional commands based on column type** +```ts +header: { + menu: { + commandListBuilder: (builtInItems) => { + const column = this; // column context + + // Add filtering option only for filterable columns + const extraCommands = []; + if (column.filterable !== false) { + extraCommands.push({ + command: 'clear-filter', + title: 'Clear Filter', + iconCssClass: 'mdi mdi-filter-remove', + action: (e, args) => { + this.filterService.clearFilterByColumnId(args.column.id); + } + }); + } + + return [...builtInItems, ...extraCommands]; + } + } +} +``` + +**Example: Remove sort commands, keep only custom ones** +```ts +header: { + menu: { + commandListBuilder: (builtInItems) => { + // Filter out sort commands + const filtered = builtInItems.filter(item => + item !== 'divider' && + !item.command?.includes('sort') + ); + + // Add custom commands + return [ + ...filtered, + { + command: 'custom-action', + title: 'Custom Action', + iconCssClass: 'mdi mdi-star', + action: (e, args) => alert('Custom: ' + args.column.name) + } + ]; + } + } +} +``` + +**When to use `commandListBuilder`:** +- You want to append/prepend items to built-in commands +- You need to filter or modify commands based on column properties +- You want to customize the command list per column dynamically +- You need full control over the final command list + +**Note:** Use `commandListBuilder` **instead of** `commandItems`, not both together. + #### Callback Hooks There are 2 callback hooks which are accessible in the Grid Options - `onBeforeMenuShow` @@ -58,6 +155,11 @@ There are 2 callback hooks which are accessible in the Grid Options For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/extensions/slickHeaderButtons.ts) itself. +### Custom Menu Item Rendering +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. + ### How to change icon(s) of the default commands? You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults. ```ts diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/Context-Menu.md b/frameworks/angular-slickgrid/docs/grid-functionalities/context-menu.md similarity index 77% rename from frameworks/angular-slickgrid/docs/grid-functionalities/Context-Menu.md rename to frameworks/angular-slickgrid/docs/grid-functionalities/context-menu.md index 4396e689ff..0a4c6cd168 100644 --- a/frameworks/angular-slickgrid/docs/grid-functionalities/Context-Menu.md +++ b/frameworks/angular-slickgrid/docs/grid-functionalities/context-menu.md @@ -23,7 +23,7 @@ This extensions is wrapped around the new SlickGrid Plugin **SlickContextMenu** ### Default Usage Technically, the Context Menu is enabled by default (copy, export) and so you don't have anything to do to enjoy it (you could disable it at any time). However, if you want to customize the content of the Context Menu, then continue reading. You can customize the menu with 2 different lists, Commands and/or Options, they can be used separately or at the same time. Also note that even though the code shown below makes a separation between the Commands and Options, you can mix them in the same Context Menu. -#### with Commands +#### with Commands (Static) ```ts this.gridOptions = { @@ -63,6 +63,98 @@ this.gridOptions = { }; ``` +#### with Commands (Dynamic Builder) +For advanced scenarios where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. + +```ts +this.gridOptions = { + enableContextMenu: true, + contextMenu: { + commandListBuilder: (builtInItems) => { + // Example: Add custom commands after built-in ones + return [ + ...builtInItems, + 'divider', + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: (e, args) => { + if (confirm(`Delete row ${args.dataContext.id}?`)) { + this.gridService.deleteItem(args.dataContext); + } + } + }, + { + command: 'duplicate-row', + title: 'Duplicate Row', + iconCssClass: 'mdi mdi-content-duplicate', + action: (e, args) => { + const newItem = { ...args.dataContext, id: this.generateNewId() }; + this.gridService.addItem(newItem); + } + } + ]; + }, + onCommand: (e, args) => { + // Handle commands here if not using action callbacks + console.log('Command:', args.command); + } + } +}; +``` + +**Example: Filter commands based on row data** +```ts +contextMenu: { + commandListBuilder: (builtInItems) => { + // You can't access row data here, but you can filter/modify built-in items + // Use itemUsabilityOverride or itemVisibilityOverride for row-specific logic + + // Only show export commands + return builtInItems.filter(item => + item === 'divider' || item.command?.includes('export') + ); + } +} +``` + +**Example: Sort and reorganize commands** +```ts +contextMenu: { + commandListBuilder: (builtInItems) => { + const customFirst = [ + { + command: 'edit', + title: 'Edit Row', + iconCssClass: 'mdi mdi-pencil', + positionOrder: 0 + } + ]; + + // Sort built-in commands by positionOrder + const sorted = [...builtInItems].sort((a, b) => { + if (a === 'divider' || b === 'divider') return 0; + return (a.positionOrder || 50) - (b.positionOrder || 50); + }); + + return [...customFirst, 'divider', ...sorted]; + } +} +``` + +**When to use `commandListBuilder` vs `commandItems`:** +- Use `commandItems` for static command lists +- Use `commandListBuilder` when you need to: + - Append/prepend to built-in commands + - Filter or modify commands dynamically + - Sort or reorder the final command list + - Have full control over what gets rendered + +**Note:** Typically use `commandListBuilder` **instead of** `commandItems`, not both together. + +See the main [Custom Menu Slots](../menu-slots.md) documentation for detailed `commandListBuilder` examples. + #### with Options That is when you want to define a list of Options (only 1 list) that the user can choose from and once is selected we would do something (for example change the value of a cell in the grid). @@ -79,7 +171,7 @@ this.gridOptions = { // subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option) onOptionSelected: (e, args) => { // change Priority - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('priority')) { dataContext.priority = args.item.option; this.sgb.gridService.updateItem(dataContext); @@ -139,7 +231,7 @@ For example, say we want the Context Menu to only be available on the first 20 r ```ts contextMenu: { menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 }, }, @@ -153,7 +245,7 @@ contextMenu: { option: 0, title: 'n/a', textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -177,6 +269,11 @@ contextMenu: { } ``` +### Custom Menu Item Rendering +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. + ### Show Menu only over Certain Columns Say you want to show the Context Menu only when the user is over certain columns of the grid. For that, you could use the `commandShownOverColumnIds` (or `optionShownOverColumnIds`) array, by default these arrays are empty and when that is the case then the menu will be accessible from any columns. So if we want to have the Context Menu available only over the first 2 columns, we would have an array of those 2 column ids. For example, the following would show the Context Menu everywhere except the last 2 columns (priority, action) since they are not part of the array. ```ts diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/Custom-Footer.md b/frameworks/angular-slickgrid/docs/grid-functionalities/custom-footer.md similarity index 100% rename from frameworks/angular-slickgrid/docs/grid-functionalities/Custom-Footer.md rename to frameworks/angular-slickgrid/docs/grid-functionalities/custom-footer.md diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/grid-menu.md b/frameworks/angular-slickgrid/docs/grid-functionalities/grid-menu.md index a32879fa12..75ee618cde 100644 --- a/frameworks/angular-slickgrid/docs/grid-functionalities/grid-menu.md +++ b/frameworks/angular-slickgrid/docs/grid-functionalities/grid-menu.md @@ -74,6 +74,11 @@ this.gridOptions = { }; ``` +#### Advanced: Dynamic Command List Builder +For more advanced use cases where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. + +See the main [Custom Menu Slots](../menu-slots.md) documentation for detailed `commandListBuilder` examples. + #### Events There are multiple events/callback hooks which are accessible from the Grid Options @@ -107,6 +112,11 @@ gridMenu: { For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/6pac/SlickGrid/blob/master/controls/slick.gridmenu.js) itself. +### Custom Menu Item Rendering +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. + ### How to change an icon of all default commands? You can change any of the default command icon(s) by changing the `icon[Command]`, for example, see below for the defaults. diff --git a/frameworks/angular-slickgrid/docs/menu-slots.md b/frameworks/angular-slickgrid/docs/menu-slots.md new file mode 100644 index 0000000000..61f036b738 --- /dev/null +++ b/frameworks/angular-slickgrid/docs/menu-slots.md @@ -0,0 +1,499 @@ +## Custom Menu Slots - Rendering + +All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cross-framework compatible slot rendering** for custom content injection in menu items. This is achieved through the `slotRenderer` callback at the item level combined with an optional `defaultMenuItemRenderer` at the menu level. + +> **Note:** This documentation covers **how menu items are rendered** (visual presentation). If you need to **dynamically modify which commands appear** in the menu (filtering, sorting, adding/removing items), see the `commandListBuilder` callback documented in [Grid Menu](grid-functionalities/grid-menu.md), [Context Menu](grid-functionalities/context-menu.md), or [Header Menu](grid-functionalities/header-menu-header-buttons.md). + +### Core Concept + +Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. + +### Slot Renderer Callback + +```typescript +slotRenderer?: (cmdItem: any, args: any, event?: Event) => string | HTMLElement +``` + +- **cmdItem** - The menu cmdItem object containing command, title, iconCssClass, etc. +- **args** - The callback args providing access to grid, column, dataContext, and other context +- **event** - Optional DOM event passed during click handling (allows `stopPropagation()`) + +### Basic Example - HTML String Rendering + +```typescript +const menuItem = { + command: 'custom-command', + title: 'Custom Action', + iconCssClass: 'mdi mdi-star', + // Return custom HTML string for the entire menu item + slotRenderer: () => ` +
+ + Custom Action + NEW +
+ ` +}; +``` + +### Advanced Example - HTMLElement Objects + +```typescript +// Create custom element with full DOM control +const menuItem = { + command: 'notifications', + title: 'Notifications', + // Return HTMLElement for more control and event listeners + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + + const icon = document.createElement('i'); + icon.className = 'mdi mdi-bell'; + icon.style.marginRight = '8px'; + + const text = document.createElement('span'); + text.textContent = cmdItem.title; + + const badge = document.createElement('span'); + badge.className = 'badge'; + badge.textContent = '5'; + badge.style.marginLeft = 'auto'; + + container.appendChild(icon); + container.appendChild(text); + container.appendChild(badge); + + return container; + } +}; +``` + +### Default Menu-Level Renderer + +Set a `defaultMenuItemRenderer` at the menu option level to apply to all items (unless overridden by individual `slotRenderer`): + +```typescript +const menuOption = { + // Apply this renderer to all menu items (can be overridden per item) + defaultMenuItemRenderer: (cmdItem, args) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
+ `; + }, + commandItems: [ + { + command: 'action-1', + title: 'Action One', + iconCssClass: 'mdi mdi-check', + // This item uses defaultMenuItemRenderer + }, + { + command: 'custom', + title: 'Custom Item', + // This item overrides defaultMenuItemRenderer with its own slotRenderer + slotRenderer: () => ` +
+ Custom rendering overrides default +
+ ` + } + ] +}; +``` + +### Menu Types & Configuration + +The `slotRenderer` and `defaultMenuItemRenderer` work identically across all menu plugins: + +#### Header Menu +```typescript +const columnDef = { + id: 'name', + header: { + menu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'sort', + title: 'Sort', + slotRenderer: () => '
Custom sort
' + } + ] + } + } +}; +``` + +#### Cell Menu +```typescript +const columnDef = { + id: 'action', + cellMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'edit', + title: 'Edit', + slotRenderer: (cmdItem, args) => `
Edit row ${args.dataContext.id}
` + } + ] + } +}; +``` + +#### Context Menu +```typescript +const gridOptions = { + enableContextMenu: true, + contextMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'export', + title: 'Export', + slotRenderer: () => '
📊 Export data
' + } + ] + } +}; +``` + +#### Grid Menu +```typescript +const gridOptions = { + enableGridMenu: true, + gridMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'refresh', + title: 'Refresh', + slotRenderer: () => '
🔄 Refresh data
' + } + ] + } +}; +``` + +### Framework Integration Examples + +#### Vanilla JavaScript +```typescript +const menuItem = { + command: 'custom', + title: 'Action', + slotRenderer: () => ` + + ` +}; +``` + +#### Angular - Dynamic Components +```typescript +// In component class +const menuItem = { + command: 'with-component', + title: 'With Angular Component', + slotRenderer: (cmdItem, args) => { + // Create a placeholder element + const placeholder = document.createElement('div'); + placeholder.id = `angular-slot-${Date.now()}`; + + // Schedule component creation for after rendering + setTimeout(() => { + const element = document.getElementById(placeholder.id); + if (element) { + const componentRef = this.viewContainerRef.createComponent(MyComponent); + element.appendChild(componentRef.location.nativeElement); + } + }, 0); + + return placeholder; + } +}; +``` + +#### React - Using Hooks +```typescript +// Define menu item with slotRenderer +const menuItem = { + command: 'with-react', + title: 'With React Component', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.id = `react-slot-${Date.now()}`; + + // Schedule component render for after menu renders + setTimeout(() => { + const element = document.getElementById(container.id); + if (element) { + ReactDOM.render(, element); + } + }, 0); + + return container; + } +}; +``` + +#### Vue - Using createApp +```typescript +// Define menu item with slotRenderer +const menuItem = { + command: 'with-vue', + title: 'With Vue Component', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.id = `vue-slot-${Date.now()}`; + + // Schedule component mount for after menu renders + setTimeout(() => { + const element = document.getElementById(container.id); + if (element && !element._appInstance) { + const app = createApp(MyComponent, { data: args }); + app.mount(element); + element._appInstance = app; + } + }, 0); + + return container; + } +}; +``` + +### Real-World Use Cases + +#### 1. Add Keyboard Shortcuts +```typescript +{ + command: 'copy', + title: 'Copy', + iconCssClass: 'mdi mdi-content-copy', + slotRenderer: () => ` +
+ + Copy + Ctrl+C +
+ ` +} +``` + +#### 2. Add Status Indicators +```typescript +{ + command: 'filter', + title: 'Filter', + iconCssClass: 'mdi mdi-filter', + slotRenderer: () => ` +
+ + Filter + +
+ ` +} +``` + +#### 3. Add Dynamic Content Based on Context +```typescript +{ + command: 'edit-row', + title: 'Edit Row', + slotRenderer: (cmdItem, args) => ` +
+ + Edit Row #${args.dataContext?.id || 'N/A'} +
+ ` +} +``` + +#### 4. Add Interactive Elements +```typescript +{ + command: 'toggle-setting', + title: 'Auto Refresh', + slotRenderer: (cmdItem, args, event) => { + const container = document.createElement('label'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + container.style.gap = '8px'; + container.style.marginRight = 'auto'; + + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.addEventListener('change', (e) => { + // Prevent menu item click from firing when toggling checkbox + event?.stopPropagation?.(); + console.log('Auto refresh:', checkbox.checked); + }); + + const label = document.createElement('span'); + label.textContent = cmdItem.title; + + container.appendChild(label); + container.appendChild(checkbox); + return container; + } +} +``` + +#### 5. Add Badges and Status Labels +```typescript +{ + command: 'export-excel', + title: 'Export as Excel', + slotRenderer: (cmdItem, args) => ` +
+ + ${cmdItem.title} + RECOMMENDED +
+ ` +} +``` + +#### 6. Gradient and Styled Icons +```typescript +{ + command: 'advanced-export', + title: 'Advanced Export', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + container.style.gap = '8px'; + + const iconDiv = document.createElement('div'); + iconDiv.style.width = '20px'; + iconDiv.style.height = '20px'; + iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; + iconDiv.style.borderRadius = '4px'; + iconDiv.style.display = 'flex'; + iconDiv.style.alignItems = 'center'; + iconDiv.style.justifyContent = 'center'; + iconDiv.style.color = 'white'; + iconDiv.style.fontSize = '12px'; + iconDiv.innerHTML = '📊'; + + const textSpan = document.createElement('span'); + textSpan.textContent = cmdItem.title; + + container.appendChild(iconDiv); + container.appendChild(textSpan); + return container; + } +} +``` + +### Notes and Best Practices + +- **HTML strings** are inserted via `innerHTML` - ensure content is sanitized if user-provided +- **HTMLElement objects** are appended directly - safer for dynamic content and allows event listeners +- **Cross-framework compatible** - works in vanilla JS, Angular, React, Vue, Aurelia using the same API +- **Priority order** - Item-level `slotRenderer` overrides menu-level `defaultMenuItemRenderer` +- **Built-in command preservation** - When overriding a built-in command (e.g., `sort-asc`, `sort-desc`, `hide`, etc.) with custom properties like `slotRenderer` or `iconCssClass`, if you don't provide an `action` callback, the library will automatically preserve and use the built-in action for that command. This means you can safely customize the appearance of built-in commands without losing their functionality. +- **Accessibility** - Include proper ARIA attributes when creating custom elements +- **Event handling** - Call `event.stopPropagation()` in interactive elements to prevent menu commands from firing +- **Default fallback** - If neither `slotRenderer` nor `defaultMenuItemRenderer` is provided, the default icon + text rendering is used +- **Performance** - Avoid heavy DOM manipulation inside renderer callbacks (they may be called multiple times) +- **Event parameter** - The optional `event` parameter is passed during click handling and allows you to control menu behavior +- **All menus supported** - This API works uniformly across Header Menu, Cell Menu, Context Menu, and Grid Menu + +### Styling Custom Menu Items + +```css +/* Example CSS for styled menu items */ +.slick-menu-item { + padding: 4px 8px; +} + +.slick-menu-item div { + display: flex; + align-items: center; + gap: 8px; +} + +.slick-menu-item kbd { + background: #f0f0f0; + border: 1px solid #ddd; + border-radius: 3px; + padding: 2px 6px; + font-size: 11px; + font-family: monospace; + color: #666; +} + +.slick-menu-item .badge { + background: #ff6b6b; + color: white; + padding: 2px 6px; + border-radius: 3px; + font-size: 9px; + font-weight: bold; + white-space: nowrap; +} + +.slick-menu-item:hover { + background: #f5f5f5; +} + +.slick-menu-item.slick-menu-item-disabled { + opacity: 0.5; + cursor: not-allowed; +} +``` + +### Migration from Static Rendering + +**Before (Static HTML Title):** +```typescript +{ + command: 'action', + title: 'Action ⭐', // Emoji embedded in title + iconCssClass: 'mdi mdi-star' +} +``` + +**After (Custom Rendering):** +```typescript +{ + command: 'action', + title: 'Action', + slotRenderer: () => ` +
+ + Action + ⭐ +
+ ` +} +``` + +### Error Handling + +When creating custom renderers, handle potential errors gracefully: + +```typescript +{ + command: 'safe-render', + title: 'Safe Render', + slotRenderer: (cmdItem, args) => { + try { + if (args?.dataContext?.status === 'error') { + return `
❌ Error loading
`; + } + return `
✓ Data loaded
`; + } catch (error) { + console.error('Render error:', error); + return '
Render error
'; + } + } +} +``` diff --git a/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md b/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md index 48e583ee65..0ebbeed2c5 100644 --- a/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md +++ b/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md @@ -1,4 +1,4 @@ -## Cleaner Code / Smaller Code ⚡ +## Simplication and Modernization ⚡ One of the biggest change of this release is to hide columns by using the `hidden` column property (now used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()` in v10+, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... @@ -89,11 +89,30 @@ gridOptions = { }; ``` -### External Resources are now auto-enabled - This change does not require any code update from the end user, but it is a change that you should probably be aware of nonetheless. The reason I decided to implement this is because I often forget myself to enable the associated flag and typically if you wanted to load the resource, then it's most probably because you also want it enabled. So for example, if your register `ExcelExportService` then the library will now auto-enable the resource with its associated flag (which in this case is `enableExcelExport:true`)... unless you already disabled the flag (or enabled) yourself, if so then the internal assignment will simply be skipped and yours will prevail. Also just to be clear, the list of auto-enabled external resources is rather small, it will auto-enable the following resources: (ExcelExportService, PdfExportService, TextExportService, CompositeEditorComponent and RowDetailView). +### Menu with Commands + +All menu plugins (Cell Menu, Context Menu, Header Menu and Grid Menu) now have a new `commandListBuilder: (items) => items` which now allow you to filter/sort and maybe override built-in commands. With this new feature in place, I'm deprecating all `hide...` properties and also `positionOrder` since you can now do that with the builder. You could also use the `hideCommands` which accepts an array of built-in command names. This well remove huge amount of `hide...` properties (over 30) that keeps increasing anytime a new built-in command gets added (in other words, this will simplify maintenance for both you and me). + +These are currently just deprecations in v10.x but it's strongly recommended to start using the `commandListBuilder` and/or `hideCommands` and move away from the deprecated properties which will be removed in v11.x. For example if we want to hide some built-in commands: + +```diff +gridOptions = { + gridMenu: { +- hideExportCsvCommand: true, +- hideTogglePreHeaderCommand: true, + +// via command name(s) ++ hideCommands: ['export-csv', 'toggle-preheader'], + +// or via builder ++ commandListBuilder: (cmdItems) => [...cmdItems.filter(x => x !== 'divider' && x.command !== 'export-csv' && x.command !== 'toggle-preheader')] + } +} +``` + ### `ngx-translate` v17.x now required Because of the Angular v21 upgrade, the user (you) will also need to upgrade [`ngx-translate`](https://ngx-translate.org/) to its latest version 17.x. diff --git a/frameworks/angular-slickgrid/src/demos/examples/custom-angularComponentEditor.ts b/frameworks/angular-slickgrid/src/demos/examples/custom-angularComponentEditor.ts index c7a57a6bf3..b6ecc73d0d 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/custom-angularComponentEditor.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/custom-angularComponentEditor.ts @@ -32,7 +32,7 @@ export class CustomAngularComponentEditor implements Editor { grid: SlickGrid; constructor(private args: any) { - this.grid = args && args.grid; + this.grid = args?.grid; this.init(); } diff --git a/frameworks/angular-slickgrid/src/demos/examples/example02.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example02.component.ts index b97686af07..760674f53f 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example02.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example02.component.ts @@ -133,7 +133,7 @@ export class Example2Component implements OnInit { minWidth: 100, formatter: customEnableButtonFormatter, onCellClick: (e, args) => { - this.toggleCompletedProperty(args && args.dataContext); + this.toggleCompletedProperty(args?.dataContext); }, }, ]; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example03.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example03.component.ts index 70943907ba..70e9768efe 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example03.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example03.component.ts @@ -37,7 +37,7 @@ const URL_COUNTRY_NAMES = 'assets/data/country_names.json'; const myCustomTitleValidator: EditorValidator = (value: any, _args?: EditorArguments) => { // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it /* - const grid = args && args.grid; + const grid = args?.grid; const gridOptions = (grid?.getOptions() ?? {}) as GridOption; const translate = gridOptions.i18n; const columnEditor = args?.column?.editor; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example04.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example04.component.ts index 985206a15c..2ce484fe97 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example04.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example04.component.ts @@ -306,12 +306,12 @@ export class Example4Component implements OnInit { } refreshMetrics(e: Event, args: any) { - if (args && args.current >= 0) { + if (args?.current >= 0) { setTimeout(() => { this.metrics = { startTime: new Date(), endTime: new Date(), - itemCount: (args && args.current) || 0, + itemCount: args?.current || 0, totalItemCount: this.dataset.length || 0, }; }); diff --git a/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts index 3824b954bc..56f0d7e98c 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts @@ -265,11 +265,11 @@ export class Example23Component implements OnInit, OnDestroy { } refreshMetrics(_e: Event, args: any) { - if (args && args.current >= 0) { + if (args?.current >= 0) { setTimeout(() => { this.metrics = { startTime: new Date(), - itemCount: (args && args.current) || 0, + itemCount: args?.current || 0, totalItemCount: this.dataset.length || 0, }; }); diff --git a/frameworks/angular-slickgrid/src/demos/examples/example24.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example24.component.ts index 38df75e50c..df7c922056 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example24.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example24.component.ts @@ -358,7 +358,7 @@ export class Example24Component implements OnInit, OnDestroy { onCommand: (e, args) => this.executeCommand(e, args), onOptionSelected: (e, args) => { // change "Completed" property with new option selected from the Cell Menu - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && 'completed' in dataContext) { dataContext.completed = args.item.option; this.angularGrid.gridService.updateItem(dataContext); @@ -437,7 +437,7 @@ export class Example24Component implements OnInit, OnDestroy { // optionally and conditionally define when the the menu is usable, // this should be used with a custom formatter to show/hide/disable the menu menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return dataContext.id < 21; // say we want to display the menu only from Task 0 to 20 }, // which column to show the command list? when not defined it will be shown over all columns @@ -468,7 +468,7 @@ export class Example24Component implements OnInit, OnDestroy { }, // only show command to 'Help' when the task is Not Completed itemVisibilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -534,7 +534,7 @@ export class Example24Component implements OnInit, OnDestroy { textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, // you can use the 'action' callback and/or subscribe to the 'onCallback' event, they both have the same arguments @@ -556,7 +556,7 @@ export class Example24Component implements OnInit, OnDestroy { disabled: true, // only shown when the task is Not Completed itemVisibilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -587,7 +587,7 @@ export class Example24Component implements OnInit, OnDestroy { // subscribe to Context Menu onOptionSelected event (or use the action callback on each option) onOptionSelected: (_e, args) => { // change Priority - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if ('priority' in dataContext) { dataContext.priority = args.item.option; this.angularGrid.gridService.updateItem(dataContext); diff --git a/frameworks/angular-slickgrid/src/demos/examples/example33.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example33.component.ts index af4e7bd6e0..90c287c5f7 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example33.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example33.component.ts @@ -464,7 +464,7 @@ export class Example33Component implements OnInit { onCommand: (e, args) => this.executeCommand(e, args), onOptionSelected: (_e, args) => { // change "Completed" property with new option selected from the Cell Menu - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && 'completed' in dataContext) { dataContext.completed = args.item.option; this.angularGrid.gridService.updateItem(dataContext); diff --git a/frameworks/aurelia-slickgrid/docs/column-functionalities/cell-menu.md b/frameworks/aurelia-slickgrid/docs/column-functionalities/cell-menu.md index fe68977b51..5d6810e225 100644 --- a/frameworks/aurelia-slickgrid/docs/column-functionalities/cell-menu.md +++ b/frameworks/aurelia-slickgrid/docs/column-functionalities/cell-menu.md @@ -140,6 +140,11 @@ this.gridOptions = { }; ``` +### Custom Menu Item Rendering +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. + +See [Custom Menu Slots](../../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. + ### Override Callback Methods What if you want to dynamically disable or hide a Command/Option or even disable the entire menu in certain circumstances? For these cases, you would use the override callback methods, the method must return a `boolean`. The list of override available are the following - `menuUsabilityOverride` returning false would make the Cell Menu unavailable to the user @@ -152,10 +157,7 @@ For example, say we want the Cell Menu to only be available on the first 20 rows this.columnDefinitions = [ { id: 'action', field: 'action', name: 'Action', cellMenu: { - menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; - return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 - }, + menuUsabilityOverride: (args) => args?.dataContext.id < 21, // say we want to display the menu only from Task 0 to 20 } } ]; @@ -167,12 +169,13 @@ this.columnDefinitions = [ { id: 'action', field: 'action', name: 'Action', cellMenu: { optionItems: [ - { - option: 0, title: 'n/a', textCssClass: 'italic', - // only enable this option when the task is Not Completed - itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; - return !dataContext.completed; + { + option: 0, title: 'n/a', textCssClass: 'italic', + // only enable this option when the task is Not Completed + itemUsabilityOverride: (args) => { + const dataContext = args?.dataContext; + return !dataContext.completed; + }, }, { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' }, { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' }, diff --git a/frameworks/aurelia-slickgrid/docs/column-functionalities/editors.md b/frameworks/aurelia-slickgrid/docs/column-functionalities/editors.md index 4d3b058060..7367e15d22 100644 --- a/frameworks/aurelia-slickgrid/docs/column-functionalities/editors.md +++ b/frameworks/aurelia-slickgrid/docs/column-functionalities/editors.md @@ -449,8 +449,8 @@ So if we take all of these informations and we want to create our own Custom Edi ```ts const myCustomTitleValidator: EditorValidator = (value: any, args: EditorArgs) => { // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it - const grid = args && args.grid; - const gridOptions = (grid && grid.getOptions) ? grid.getOptions() : {}; + const grid = args.grid; + const gridOptions = grid.getOptions() : {}; const i18n = gridOptions.i18n; if (value == null || value === undefined || !value.length) { diff --git a/frameworks/aurelia-slickgrid/docs/grid-functionalities/context-menu.md b/frameworks/aurelia-slickgrid/docs/grid-functionalities/context-menu.md index 2e77bed499..7906c2b194 100644 --- a/frameworks/aurelia-slickgrid/docs/grid-functionalities/context-menu.md +++ b/frameworks/aurelia-slickgrid/docs/grid-functionalities/context-menu.md @@ -23,7 +23,7 @@ This extensions is wrapped around the new SlickGrid Plugin **SlickContextMenu** ### Default Usage Technically, the Context Menu is enabled by default (copy, export) and so you don't have anything to do to enjoy it (you could disable it at any time). However, if you want to customize the content of the Context Menu, then continue reading. You can customize the menu with 2 different lists, Commands and/or Options, they can be used separately or at the same time. Also note that even though the code shown below makes a separation between the Commands and Options, you can mix them in the same Context Menu. -#### with Commands +#### with Commands (Static) ```ts this.gridOptions = { @@ -63,6 +63,98 @@ this.gridOptions = { }; ``` +#### with Commands (Dynamic Builder) +For advanced scenarios where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. + +```ts +this.gridOptions = { + enableContextMenu: true, + contextMenu: { + commandListBuilder: (builtInItems) => { + // Example: Add custom commands after built-in ones + return [ + ...builtInItems, + 'divider', + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: (e, args) => { + if (confirm(`Delete row ${args.dataContext.id}?`)) { + this.gridService.deleteItem(args.dataContext); + } + } + }, + { + command: 'duplicate-row', + title: 'Duplicate Row', + iconCssClass: 'mdi mdi-content-duplicate', + action: (e, args) => { + const newItem = { ...args.dataContext, id: this.generateNewId() }; + this.gridService.addItem(newItem); + } + } + ]; + }, + onCommand: (e, args) => { + // Handle commands here if not using action callbacks + console.log('Command:', args.command); + } + } +}; +``` + +**Example: Filter commands based on row data** +```ts +contextMenu: { + commandListBuilder: (builtInItems) => { + // You can't access row data here, but you can filter/modify built-in items + // Use itemUsabilityOverride or itemVisibilityOverride for row-specific logic + + // Only show export commands + return builtInItems.filter(item => + item === 'divider' || item.command?.includes('export') + ); + } +} +``` + +**Example: Sort and reorganize commands** +```ts +contextMenu: { + commandListBuilder: (builtInItems) => { + const customFirst = [ + { + command: 'edit', + title: 'Edit Row', + iconCssClass: 'mdi mdi-pencil', + positionOrder: 0 + } + ]; + + // Sort built-in commands by positionOrder + const sorted = [...builtInItems].sort((a, b) => { + if (a === 'divider' || b === 'divider') return 0; + return (a.positionOrder || 50) - (b.positionOrder || 50); + }); + + return [...customFirst, 'divider', ...sorted]; + } +} +``` + +**When to use `commandListBuilder` vs `commandItems`:** +- Use `commandItems` for static command lists +- Use `commandListBuilder` when you need to: + - Append/prepend to built-in commands + - Filter or modify commands dynamically + - Sort or reorder the final command list + - Have full control over what gets rendered + +**Note:** Typically use `commandListBuilder` **instead of** `commandItems`, not both together. + +See the main [Custom Menu Slots](../menu-slots.md) documentation for detailed `commandListBuilder` examples. + #### with Options That is when you want to define a list of Options (only 1 list) that the user can choose from and once is selected we would do something (for example change the value of a cell in the grid). @@ -79,7 +171,7 @@ this.gridOptions = { // subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option) onOptionSelected: (e, args) => { // change Priority - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('priority')) { dataContext.priority = args.item.option; this.sgb.gridService.updateItem(dataContext); @@ -139,7 +231,7 @@ For example, say we want the Context Menu to only be available on the first 20 r ```ts contextMenu: { menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 }, }, @@ -153,7 +245,7 @@ contextMenu: { option: 0, title: 'n/a', textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -177,6 +269,11 @@ contextMenu: { } ``` +### Custom Menu Item Rendering +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. + ### Show Menu only over Certain Columns Say you want to show the Context Menu only when the user is over certain columns of the grid. For that, you could use the `commandShownOverColumnIds` (or `optionShownOverColumnIds`) array, by default these arrays are empty and when that is the case then the menu will be accessible from any columns. So if we want to have the Context Menu available only over the first 2 columns, we would have an array of those 2 column ids. For example, the following would show the Context Menu everywhere except the last 2 columns (priority, action) since they are not part of the array. ```ts diff --git a/frameworks/aurelia-slickgrid/docs/grid-functionalities/grid-menu.md b/frameworks/aurelia-slickgrid/docs/grid-functionalities/grid-menu.md index 45b6ff831f..79ec2166a0 100644 --- a/frameworks/aurelia-slickgrid/docs/grid-functionalities/grid-menu.md +++ b/frameworks/aurelia-slickgrid/docs/grid-functionalities/grid-menu.md @@ -73,6 +73,11 @@ this.gridOptions = { }; ``` +#### Advanced: Dynamic Command List Builder +For more advanced use cases where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. + +See the main [Custom Menu Slots](../menu-slots.md) documentation for detailed `commandListBuilder` examples. + #### Events There are multiple events/callback hooks which are accessible from the Grid Options - `onBeforeMenuShow` @@ -105,6 +110,11 @@ gridMenu: { For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/6pac/SlickGrid/blob/master/controls/slick.gridmenu.js) itself. +### Custom Menu Item Rendering +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. + ### How to change an icon of all default commands? You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults. ```ts diff --git a/frameworks/aurelia-slickgrid/docs/grid-functionalities/header-menu-header-buttons.md b/frameworks/aurelia-slickgrid/docs/grid-functionalities/header-menu-header-buttons.md index 04e75c5cf5..2a12bea3f8 100644 --- a/frameworks/aurelia-slickgrid/docs/grid-functionalities/header-menu-header-buttons.md +++ b/frameworks/aurelia-slickgrid/docs/grid-functionalities/header-menu-header-buttons.md @@ -20,7 +20,10 @@ The Header Menu also comes, by default, with a list of built-in custom commands - Sort Descending (you can hide it with `hideSortCommands: true`) - Hide Column (you can hide it with `hideColumnHideCommand: true`) -This section is called Custom Commands because you can also customize this section with your own commands. To do that, you need to fill in 2 properties (an array of `headerMenuItems` that will go under each column definition and define `onCommand` callbacks) in your Grid Options. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): +This section is called Custom Commands because you can also customize this section with your own commands. You can do this in two ways: using static command items or using a dynamic command list builder. + +#### Static Command Items +To add static commands, fill in an array of items in your column definition's `header.menu.commandItems`. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): ```ts this.gridOptions = { enableAutoResize: true, @@ -51,6 +54,100 @@ this.gridOptions = { } }; ``` + +#### Dynamic Command List Builder +For advanced use cases where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. This is executed **after** `commandItems` and is the **last call before rendering**. + +```ts +this.columnDefinitions = [ + { + id: 'title', + name: 'Title', + field: 'title', + header: { + menu: { + commandListBuilder: (builtInItems) => { + // Append custom commands to the built-in sort/hide commands + return [ + ...builtInItems, + 'divider', + { + command: 'freeze-column', + title: 'Freeze Column', + iconCssClass: 'mdi mdi-pin', + action: (e, args) => { + // Implement column freezing + console.log('Freeze column:', args.column.name); + } + } + ]; + } + } + } + } +]; +``` + +**Example: Conditional commands based on column type** +```ts +header: { + menu: { + commandListBuilder: (builtInItems) => { + const column = this; // column context + + // Add filtering option only for filterable columns + const extraCommands = []; + if (column.filterable !== false) { + extraCommands.push({ + command: 'clear-filter', + title: 'Clear Filter', + iconCssClass: 'mdi mdi-filter-remove', + action: (e, args) => { + this.filterService.clearFilterByColumnId(args.column.id); + } + }); + } + + return [...builtInItems, ...extraCommands]; + } + } +} +``` + +**Example: Remove sort commands, keep only custom ones** +```ts +header: { + menu: { + commandListBuilder: (builtInItems) => { + // Filter out sort commands + const filtered = builtInItems.filter(item => + item !== 'divider' && + !item.command?.includes('sort') + ); + + // Add custom commands + return [ + ...filtered, + { + command: 'custom-action', + title: 'Custom Action', + iconCssClass: 'mdi mdi-star', + action: (e, args) => alert('Custom: ' + args.column.name) + } + ]; + } + } +} +``` + +**When to use `commandListBuilder`:** +- You want to append/prepend items to built-in commands +- You need to filter or modify commands based on column properties +- You want to customize the command list per column dynamically +- You need full control over the final command list + +**Note:** Use `commandListBuilder` **instead of** `commandItems`, not both together. + #### Callback Hooks There are 2 callback hooks which are accessible in the Grid Options - `onBeforeMenuShow` @@ -58,6 +155,11 @@ There are 2 callback hooks which are accessible in the Grid Options For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/extensions/slickHeaderButtons.ts) itself. +### Custom Menu Item Rendering +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. + ### How to change icon(s) of the default commands? You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults. ```ts diff --git a/frameworks/aurelia-slickgrid/docs/menu-slots.md b/frameworks/aurelia-slickgrid/docs/menu-slots.md new file mode 100644 index 0000000000..61f036b738 --- /dev/null +++ b/frameworks/aurelia-slickgrid/docs/menu-slots.md @@ -0,0 +1,499 @@ +## Custom Menu Slots - Rendering + +All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cross-framework compatible slot rendering** for custom content injection in menu items. This is achieved through the `slotRenderer` callback at the item level combined with an optional `defaultMenuItemRenderer` at the menu level. + +> **Note:** This documentation covers **how menu items are rendered** (visual presentation). If you need to **dynamically modify which commands appear** in the menu (filtering, sorting, adding/removing items), see the `commandListBuilder` callback documented in [Grid Menu](grid-functionalities/grid-menu.md), [Context Menu](grid-functionalities/context-menu.md), or [Header Menu](grid-functionalities/header-menu-header-buttons.md). + +### Core Concept + +Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. + +### Slot Renderer Callback + +```typescript +slotRenderer?: (cmdItem: any, args: any, event?: Event) => string | HTMLElement +``` + +- **cmdItem** - The menu cmdItem object containing command, title, iconCssClass, etc. +- **args** - The callback args providing access to grid, column, dataContext, and other context +- **event** - Optional DOM event passed during click handling (allows `stopPropagation()`) + +### Basic Example - HTML String Rendering + +```typescript +const menuItem = { + command: 'custom-command', + title: 'Custom Action', + iconCssClass: 'mdi mdi-star', + // Return custom HTML string for the entire menu item + slotRenderer: () => ` +
+ + Custom Action + NEW +
+ ` +}; +``` + +### Advanced Example - HTMLElement Objects + +```typescript +// Create custom element with full DOM control +const menuItem = { + command: 'notifications', + title: 'Notifications', + // Return HTMLElement for more control and event listeners + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + + const icon = document.createElement('i'); + icon.className = 'mdi mdi-bell'; + icon.style.marginRight = '8px'; + + const text = document.createElement('span'); + text.textContent = cmdItem.title; + + const badge = document.createElement('span'); + badge.className = 'badge'; + badge.textContent = '5'; + badge.style.marginLeft = 'auto'; + + container.appendChild(icon); + container.appendChild(text); + container.appendChild(badge); + + return container; + } +}; +``` + +### Default Menu-Level Renderer + +Set a `defaultMenuItemRenderer` at the menu option level to apply to all items (unless overridden by individual `slotRenderer`): + +```typescript +const menuOption = { + // Apply this renderer to all menu items (can be overridden per item) + defaultMenuItemRenderer: (cmdItem, args) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
+ `; + }, + commandItems: [ + { + command: 'action-1', + title: 'Action One', + iconCssClass: 'mdi mdi-check', + // This item uses defaultMenuItemRenderer + }, + { + command: 'custom', + title: 'Custom Item', + // This item overrides defaultMenuItemRenderer with its own slotRenderer + slotRenderer: () => ` +
+ Custom rendering overrides default +
+ ` + } + ] +}; +``` + +### Menu Types & Configuration + +The `slotRenderer` and `defaultMenuItemRenderer` work identically across all menu plugins: + +#### Header Menu +```typescript +const columnDef = { + id: 'name', + header: { + menu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'sort', + title: 'Sort', + slotRenderer: () => '
Custom sort
' + } + ] + } + } +}; +``` + +#### Cell Menu +```typescript +const columnDef = { + id: 'action', + cellMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'edit', + title: 'Edit', + slotRenderer: (cmdItem, args) => `
Edit row ${args.dataContext.id}
` + } + ] + } +}; +``` + +#### Context Menu +```typescript +const gridOptions = { + enableContextMenu: true, + contextMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'export', + title: 'Export', + slotRenderer: () => '
📊 Export data
' + } + ] + } +}; +``` + +#### Grid Menu +```typescript +const gridOptions = { + enableGridMenu: true, + gridMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'refresh', + title: 'Refresh', + slotRenderer: () => '
🔄 Refresh data
' + } + ] + } +}; +``` + +### Framework Integration Examples + +#### Vanilla JavaScript +```typescript +const menuItem = { + command: 'custom', + title: 'Action', + slotRenderer: () => ` + + ` +}; +``` + +#### Angular - Dynamic Components +```typescript +// In component class +const menuItem = { + command: 'with-component', + title: 'With Angular Component', + slotRenderer: (cmdItem, args) => { + // Create a placeholder element + const placeholder = document.createElement('div'); + placeholder.id = `angular-slot-${Date.now()}`; + + // Schedule component creation for after rendering + setTimeout(() => { + const element = document.getElementById(placeholder.id); + if (element) { + const componentRef = this.viewContainerRef.createComponent(MyComponent); + element.appendChild(componentRef.location.nativeElement); + } + }, 0); + + return placeholder; + } +}; +``` + +#### React - Using Hooks +```typescript +// Define menu item with slotRenderer +const menuItem = { + command: 'with-react', + title: 'With React Component', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.id = `react-slot-${Date.now()}`; + + // Schedule component render for after menu renders + setTimeout(() => { + const element = document.getElementById(container.id); + if (element) { + ReactDOM.render(, element); + } + }, 0); + + return container; + } +}; +``` + +#### Vue - Using createApp +```typescript +// Define menu item with slotRenderer +const menuItem = { + command: 'with-vue', + title: 'With Vue Component', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.id = `vue-slot-${Date.now()}`; + + // Schedule component mount for after menu renders + setTimeout(() => { + const element = document.getElementById(container.id); + if (element && !element._appInstance) { + const app = createApp(MyComponent, { data: args }); + app.mount(element); + element._appInstance = app; + } + }, 0); + + return container; + } +}; +``` + +### Real-World Use Cases + +#### 1. Add Keyboard Shortcuts +```typescript +{ + command: 'copy', + title: 'Copy', + iconCssClass: 'mdi mdi-content-copy', + slotRenderer: () => ` +
+ + Copy + Ctrl+C +
+ ` +} +``` + +#### 2. Add Status Indicators +```typescript +{ + command: 'filter', + title: 'Filter', + iconCssClass: 'mdi mdi-filter', + slotRenderer: () => ` +
+ + Filter + +
+ ` +} +``` + +#### 3. Add Dynamic Content Based on Context +```typescript +{ + command: 'edit-row', + title: 'Edit Row', + slotRenderer: (cmdItem, args) => ` +
+ + Edit Row #${args.dataContext?.id || 'N/A'} +
+ ` +} +``` + +#### 4. Add Interactive Elements +```typescript +{ + command: 'toggle-setting', + title: 'Auto Refresh', + slotRenderer: (cmdItem, args, event) => { + const container = document.createElement('label'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + container.style.gap = '8px'; + container.style.marginRight = 'auto'; + + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.addEventListener('change', (e) => { + // Prevent menu item click from firing when toggling checkbox + event?.stopPropagation?.(); + console.log('Auto refresh:', checkbox.checked); + }); + + const label = document.createElement('span'); + label.textContent = cmdItem.title; + + container.appendChild(label); + container.appendChild(checkbox); + return container; + } +} +``` + +#### 5. Add Badges and Status Labels +```typescript +{ + command: 'export-excel', + title: 'Export as Excel', + slotRenderer: (cmdItem, args) => ` +
+ + ${cmdItem.title} + RECOMMENDED +
+ ` +} +``` + +#### 6. Gradient and Styled Icons +```typescript +{ + command: 'advanced-export', + title: 'Advanced Export', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + container.style.gap = '8px'; + + const iconDiv = document.createElement('div'); + iconDiv.style.width = '20px'; + iconDiv.style.height = '20px'; + iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; + iconDiv.style.borderRadius = '4px'; + iconDiv.style.display = 'flex'; + iconDiv.style.alignItems = 'center'; + iconDiv.style.justifyContent = 'center'; + iconDiv.style.color = 'white'; + iconDiv.style.fontSize = '12px'; + iconDiv.innerHTML = '📊'; + + const textSpan = document.createElement('span'); + textSpan.textContent = cmdItem.title; + + container.appendChild(iconDiv); + container.appendChild(textSpan); + return container; + } +} +``` + +### Notes and Best Practices + +- **HTML strings** are inserted via `innerHTML` - ensure content is sanitized if user-provided +- **HTMLElement objects** are appended directly - safer for dynamic content and allows event listeners +- **Cross-framework compatible** - works in vanilla JS, Angular, React, Vue, Aurelia using the same API +- **Priority order** - Item-level `slotRenderer` overrides menu-level `defaultMenuItemRenderer` +- **Built-in command preservation** - When overriding a built-in command (e.g., `sort-asc`, `sort-desc`, `hide`, etc.) with custom properties like `slotRenderer` or `iconCssClass`, if you don't provide an `action` callback, the library will automatically preserve and use the built-in action for that command. This means you can safely customize the appearance of built-in commands without losing their functionality. +- **Accessibility** - Include proper ARIA attributes when creating custom elements +- **Event handling** - Call `event.stopPropagation()` in interactive elements to prevent menu commands from firing +- **Default fallback** - If neither `slotRenderer` nor `defaultMenuItemRenderer` is provided, the default icon + text rendering is used +- **Performance** - Avoid heavy DOM manipulation inside renderer callbacks (they may be called multiple times) +- **Event parameter** - The optional `event` parameter is passed during click handling and allows you to control menu behavior +- **All menus supported** - This API works uniformly across Header Menu, Cell Menu, Context Menu, and Grid Menu + +### Styling Custom Menu Items + +```css +/* Example CSS for styled menu items */ +.slick-menu-item { + padding: 4px 8px; +} + +.slick-menu-item div { + display: flex; + align-items: center; + gap: 8px; +} + +.slick-menu-item kbd { + background: #f0f0f0; + border: 1px solid #ddd; + border-radius: 3px; + padding: 2px 6px; + font-size: 11px; + font-family: monospace; + color: #666; +} + +.slick-menu-item .badge { + background: #ff6b6b; + color: white; + padding: 2px 6px; + border-radius: 3px; + font-size: 9px; + font-weight: bold; + white-space: nowrap; +} + +.slick-menu-item:hover { + background: #f5f5f5; +} + +.slick-menu-item.slick-menu-item-disabled { + opacity: 0.5; + cursor: not-allowed; +} +``` + +### Migration from Static Rendering + +**Before (Static HTML Title):** +```typescript +{ + command: 'action', + title: 'Action ⭐', // Emoji embedded in title + iconCssClass: 'mdi mdi-star' +} +``` + +**After (Custom Rendering):** +```typescript +{ + command: 'action', + title: 'Action', + slotRenderer: () => ` +
+ + Action + ⭐ +
+ ` +} +``` + +### Error Handling + +When creating custom renderers, handle potential errors gracefully: + +```typescript +{ + command: 'safe-render', + title: 'Safe Render', + slotRenderer: (cmdItem, args) => { + try { + if (args?.dataContext?.status === 'error') { + return `
❌ Error loading
`; + } + return `
✓ Data loaded
`; + } catch (error) { + console.error('Render error:', error); + return '
Render error
'; + } + } +} +``` diff --git a/frameworks/aurelia-slickgrid/docs/migrations/migration-to-10.x.md b/frameworks/aurelia-slickgrid/docs/migrations/migration-to-10.x.md index e33e944d9a..a24ea1a69f 100644 --- a/frameworks/aurelia-slickgrid/docs/migrations/migration-to-10.x.md +++ b/frameworks/aurelia-slickgrid/docs/migrations/migration-to-10.x.md @@ -1,4 +1,4 @@ -## Cleaner Code / Smaller Code ⚡ +## Simplication and Modernization ⚡ One of the biggest change of this release is to hide columns by using the `hidden` column property (now used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()` in v10+, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... @@ -85,11 +85,30 @@ gridOptions = { }; ``` -### External Resources are now auto-enabled - This change does not require any code update from the end user, but it is a change that you should probably be aware of nonetheless. The reason I decided to implement this is because I often forget myself to enable the associated flag and typically if you wanted to load the resource, then it's most probably because you also want it enabled. So for example, if your register `ExcelExportService` then the library will now auto-enable the resource with its associated flag (which in this case is `enableExcelExport:true`)... unless you already disabled the flag (or enabled) yourself, if so then the internal assignment will simply be skipped and yours will prevail. Also just to be clear, the list of auto-enabled external resources is rather small, it will auto-enable the following resources: (ExcelExportService, PdfExportService, TextExportService, CompositeEditorComponent and RowDetailView). +### Menu with Commands + +All menu plugins (Cell Menu, Context Menu, Header Menu and Grid Menu) now have a new `commandListBuilder: (items) => items` which now allow you to filter/sort and maybe override built-in commands. With this new feature in place, I'm deprecating all `hide...` properties and also `positionOrder` since you can now do that with the builder. You could also use the `hideCommands` which accepts an array of built-in command names. This well remove huge amount of `hide...` properties (over 30) that keeps increasing anytime a new built-in command gets added (in other words, this will simplify maintenance for both you and me). + +These are currently just deprecations in v10.x but it's strongly recommended to start using the `commandListBuilder` and/or `hideCommands` and move away from the deprecated properties which will be removed in v11.x. For example if we want to hide some built-in commands: + +```diff +gridOptions = { + gridMenu: { +- hideExportCsvCommand: true, +- hideTogglePreHeaderCommand: true, + +// via command name(s) ++ hideCommands: ['export-csv', 'toggle-preheader'], + +// or via builder ++ commandListBuilder: (cmdItems) => [...cmdItems.filter(x => x !== 'divider' && x.command !== 'export-csv' && x.command !== 'toggle-preheader')] + } +} +``` + --- {% hint style="note" %} diff --git a/frameworks/slickgrid-react/docs/column-functionalities/cell-menu.md b/frameworks/slickgrid-react/docs/column-functionalities/cell-menu.md index ff0b52b027..b9e63d392a 100644 --- a/frameworks/slickgrid-react/docs/column-functionalities/cell-menu.md +++ b/frameworks/slickgrid-react/docs/column-functionalities/cell-menu.md @@ -142,6 +142,11 @@ const gridOptions = { }; ``` +### Custom Menu Item Rendering +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. + +See [Custom Menu Slots](../../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. + ### Override Callback Methods What if you want to dynamically disable or hide a Command/Option or even disable the entire menu in certain circumstances? For these cases, you would use the override callback methods, the method must return a `boolean`. The list of override available are the following - `menuUsabilityOverride` returning false would make the Cell Menu unavailable to the user @@ -155,10 +160,7 @@ const columnDefinitions = [ { id: 'action', field: 'action', name: 'Action', cellMenu: { - menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; - return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 - }, + menuUsabilityOverride: (args) => args?.dataContext.id < 21, // say we want to display the menu only from Task 0 to 20 } } ]; @@ -171,12 +173,13 @@ const columnDefinitions = [ id: 'action', field: 'action', name: 'Action', cellMenu: { optionItems: [ - { - option: 0, title: 'n/a', textCssClass: 'italic', - // only enable this option when the task is Not Completed - itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; - return !dataContext.completed; + { + option: 0, title: 'n/a', textCssClass: 'italic', + // only enable this option when the task is Not Completed + itemUsabilityOverride: (args) => { + const dataContext = args?.dataContext; + return !dataContext.completed; + }, }, { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' }, { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' }, diff --git a/frameworks/slickgrid-react/docs/column-functionalities/editors.md b/frameworks/slickgrid-react/docs/column-functionalities/editors.md index fd6b4043f3..7259a22607 100644 --- a/frameworks/slickgrid-react/docs/column-functionalities/editors.md +++ b/frameworks/slickgrid-react/docs/column-functionalities/editors.md @@ -447,8 +447,8 @@ So if we take all of these informations and we want to create our own Custom Edi ```tsx const myCustomTitleValidator: EditorValidator = (value: any, args: EditorArgs) => { // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it - const grid = args && args.grid; - const gridOptions = (grid && grid.getOptions) ? grid.getOptions() : {}; + const grid = args.grid; + const gridOptions = grid.getOptions() : {}; const i18n = gridOptions.i18n; if (value == null || value === undefined || !value.length) { diff --git a/frameworks/slickgrid-react/docs/grid-functionalities/context-menu.md b/frameworks/slickgrid-react/docs/grid-functionalities/context-menu.md index c1381ffc06..e07d7bb89d 100644 --- a/frameworks/slickgrid-react/docs/grid-functionalities/context-menu.md +++ b/frameworks/slickgrid-react/docs/grid-functionalities/context-menu.md @@ -23,7 +23,7 @@ This extensions is wrapped around the new SlickGrid Plugin **SlickContextMenu** ### Default Usage Technically, the Context Menu is enabled by default (copy, export) and so you don't have anything to do to enjoy it (you could disable it at any time). However, if you want to customize the content of the Context Menu, then continue reading. You can customize the menu with 2 different lists, Commands and/or Options, they can be used separately or at the same time. Also note that even though the code shown below makes a separation between the Commands and Options, you can mix them in the same Context Menu. -#### with Commands +#### with Commands (Static) ```ts const gridOptions = { @@ -63,6 +63,98 @@ const gridOptions = { }; ``` +#### with Commands (Dynamic Builder) +For advanced scenarios where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. + +```ts +this.gridOptions = { + enableContextMenu: true, + contextMenu: { + commandListBuilder: (builtInItems) => { + // Example: Add custom commands after built-in ones + return [ + ...builtInItems, + 'divider', + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: (e, args) => { + if (confirm(`Delete row ${args.dataContext.id}?`)) { + this.gridService.deleteItem(args.dataContext); + } + } + }, + { + command: 'duplicate-row', + title: 'Duplicate Row', + iconCssClass: 'mdi mdi-content-duplicate', + action: (e, args) => { + const newItem = { ...args.dataContext, id: this.generateNewId() }; + this.gridService.addItem(newItem); + } + } + ]; + }, + onCommand: (e, args) => { + // Handle commands here if not using action callbacks + console.log('Command:', args.command); + } + } +}; +``` + +**Example: Filter commands based on row data** +```ts +contextMenu: { + commandListBuilder: (builtInItems) => { + // You can't access row data here, but you can filter/modify built-in items + // Use itemUsabilityOverride or itemVisibilityOverride for row-specific logic + + // Only show export commands + return builtInItems.filter(item => + item === 'divider' || item.command?.includes('export') + ); + } +} +``` + +**Example: Sort and reorganize commands** +```ts +contextMenu: { + commandListBuilder: (builtInItems) => { + const customFirst = [ + { + command: 'edit', + title: 'Edit Row', + iconCssClass: 'mdi mdi-pencil', + positionOrder: 0 + } + ]; + + // Sort built-in commands by positionOrder + const sorted = [...builtInItems].sort((a, b) => { + if (a === 'divider' || b === 'divider') return 0; + return (a.positionOrder || 50) - (b.positionOrder || 50); + }); + + return [...customFirst, 'divider', ...sorted]; + } +} +``` + +**When to use `commandListBuilder` vs `commandItems`:** +- Use `commandItems` for static command lists +- Use `commandListBuilder` when you need to: + - Append/prepend to built-in commands + - Filter or modify commands dynamically + - Sort or reorder the final command list + - Have full control over what gets rendered + +**Note:** Typically use `commandListBuilder` **instead of** `commandItems`, not both together. + +See the main [Custom Menu Slots](../menu-slots.md) documentation for detailed `commandListBuilder` examples. + #### with Options That is when you want to define a list of Options (only 1 list) that the user can choose from and once is selected we would do something (for example change the value of a cell in the grid). @@ -79,7 +171,7 @@ const gridOptions = { // subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option) onOptionSelected: (e, args) => { // change Priority - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('priority')) { dataContext.priority = args.item.option; reactGridRef.current?.gridService.updateItem(dataContext); @@ -139,7 +231,7 @@ For example, say we want the Context Menu to only be available on the first 20 r ```ts contextMenu: { menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 }, }, @@ -153,7 +245,7 @@ contextMenu: { option: 0, title: 'n/a', textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -177,6 +269,11 @@ contextMenu: { } ``` +### Custom Menu Item Rendering +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. + ### Show Menu only over Certain Columns Say you want to show the Context Menu only when the user is over certain columns of the grid. For that, you could use the `commandShownOverColumnIds` (or `optionShownOverColumnIds`) array, by default these arrays are empty and when that is the case then the menu will be accessible from any columns. So if we want to have the Context Menu available only over the first 2 columns, we would have an array of those 2 column ids. For example, the following would show the Context Menu everywhere except the last 2 columns (priority, action) since they are not part of the array. ```ts diff --git a/frameworks/slickgrid-react/docs/grid-functionalities/grid-menu.md b/frameworks/slickgrid-react/docs/grid-functionalities/grid-menu.md index 586574a12a..9fb66f858e 100644 --- a/frameworks/slickgrid-react/docs/grid-functionalities/grid-menu.md +++ b/frameworks/slickgrid-react/docs/grid-functionalities/grid-menu.md @@ -73,6 +73,11 @@ const gridOptions = { }; ``` +#### Advanced: Dynamic Command List Builder +For more advanced use cases where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. + +See the main [Custom Menu Slots](../menu-slots.md) documentation for detailed `commandListBuilder` examples. + #### Events There are multiple events/callback hooks which are accessible from the Grid Options - `onBeforeMenuShow` @@ -105,6 +110,11 @@ gridMenu: { For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/6pac/SlickGrid/blob/master/controls/slick.gridmenu.js) itself. +### Custom Menu Item Rendering +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. + ### How to change an icon of all default commands? You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults. ```ts diff --git a/frameworks/slickgrid-react/docs/grid-functionalities/header-menu-header-buttons.md b/frameworks/slickgrid-react/docs/grid-functionalities/header-menu-header-buttons.md index 0bcf07b3ab..1d14f68ab3 100644 --- a/frameworks/slickgrid-react/docs/grid-functionalities/header-menu-header-buttons.md +++ b/frameworks/slickgrid-react/docs/grid-functionalities/header-menu-header-buttons.md @@ -20,7 +20,10 @@ The Header Menu also comes, by default, with a list of built-in custom commands - Sort Descending (you can hide it with `hideSortCommands: true`) - Hide Column (you can hide it with `hideColumnHideCommand: true`) -This section is called Custom Commands because you can also customize this section with your own commands. To do that, you need to fill in 2 properties (an array of `headerMenuItems` that will go under each column definition and define `onCommand` callbacks) in your Grid Options. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): +This section is called Custom Commands because you can also customize this section with your own commands. You can do this in two ways: using static command items or using a dynamic command list builder. + +#### Static Command Items +To add static commands, fill in an array of items in your column definition's `header.menu.commandItems`. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): ```ts const gridOptions = { enableAutoResize: true, @@ -51,6 +54,100 @@ const gridOptions = { } }; ``` + +#### Dynamic Command List Builder +For advanced use cases where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. This is executed **after** `commandItems` and is the **last call before rendering**. + +```ts +const columnDefinitions = [ + { + id: 'title', + name: 'Title', + field: 'title', + header: { + menu: { + commandListBuilder: (builtInItems) => { + // Append custom commands to the built-in sort/hide commands + return [ + ...builtInItems, + 'divider', + { + command: 'freeze-column', + title: 'Freeze Column', + iconCssClass: 'mdi mdi-pin', + action: (e, args) => { + // Implement column freezing + console.log('Freeze column:', args.column.name); + } + } + ]; + } + } + } + } +]; +``` + +**Example: Conditional commands based on column type** +```ts +header: { + menu: { + commandListBuilder: (builtInItems) => { + const column = this; // column context + + // Add filtering option only for filterable columns + const extraCommands = []; + if (column.filterable !== false) { + extraCommands.push({ + command: 'clear-filter', + title: 'Clear Filter', + iconCssClass: 'mdi mdi-filter-remove', + action: (e, args) => { + filterService.clearFilterByColumnId(args.column.id); + } + }); + } + + return [...builtInItems, ...extraCommands]; + } + } +} +``` + +**Example: Remove sort commands, keep only custom ones** +```ts +header: { + menu: { + commandListBuilder: (builtInItems) => { + // Filter out sort commands + const filtered = builtInItems.filter(item => + item !== 'divider' && + !item.command?.includes('sort') + ); + + // Add custom commands + return [ + ...filtered, + { + command: 'custom-action', + title: 'Custom Action', + iconCssClass: 'mdi mdi-star', + action: (e, args) => alert('Custom: ' + args.column.name) + } + ]; + } + } +} +``` + +**When to use `commandListBuilder`:** +- You want to append/prepend items to built-in commands +- You need to filter or modify commands based on column properties +- You want to customize the command list per column dynamically +- You need full control over the final command list + +**Note:** Use `commandListBuilder` **instead of** `commandItems`, not both together. + #### Callback Hooks There are 2 callback hooks which are accessible in the Grid Options - `onBeforeMenuShow` @@ -58,6 +155,11 @@ There are 2 callback hooks which are accessible in the Grid Options For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/extensions/slickHeaderButtons.ts) itself. +### Custom Menu Item Rendering +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. + ### How to change icon(s) of the default commands? You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults. ```ts diff --git a/frameworks/slickgrid-react/docs/menu-slots.md b/frameworks/slickgrid-react/docs/menu-slots.md new file mode 100644 index 0000000000..61f036b738 --- /dev/null +++ b/frameworks/slickgrid-react/docs/menu-slots.md @@ -0,0 +1,499 @@ +## Custom Menu Slots - Rendering + +All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cross-framework compatible slot rendering** for custom content injection in menu items. This is achieved through the `slotRenderer` callback at the item level combined with an optional `defaultMenuItemRenderer` at the menu level. + +> **Note:** This documentation covers **how menu items are rendered** (visual presentation). If you need to **dynamically modify which commands appear** in the menu (filtering, sorting, adding/removing items), see the `commandListBuilder` callback documented in [Grid Menu](grid-functionalities/grid-menu.md), [Context Menu](grid-functionalities/context-menu.md), or [Header Menu](grid-functionalities/header-menu-header-buttons.md). + +### Core Concept + +Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. + +### Slot Renderer Callback + +```typescript +slotRenderer?: (cmdItem: any, args: any, event?: Event) => string | HTMLElement +``` + +- **cmdItem** - The menu cmdItem object containing command, title, iconCssClass, etc. +- **args** - The callback args providing access to grid, column, dataContext, and other context +- **event** - Optional DOM event passed during click handling (allows `stopPropagation()`) + +### Basic Example - HTML String Rendering + +```typescript +const menuItem = { + command: 'custom-command', + title: 'Custom Action', + iconCssClass: 'mdi mdi-star', + // Return custom HTML string for the entire menu item + slotRenderer: () => ` +
+ + Custom Action + NEW +
+ ` +}; +``` + +### Advanced Example - HTMLElement Objects + +```typescript +// Create custom element with full DOM control +const menuItem = { + command: 'notifications', + title: 'Notifications', + // Return HTMLElement for more control and event listeners + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + + const icon = document.createElement('i'); + icon.className = 'mdi mdi-bell'; + icon.style.marginRight = '8px'; + + const text = document.createElement('span'); + text.textContent = cmdItem.title; + + const badge = document.createElement('span'); + badge.className = 'badge'; + badge.textContent = '5'; + badge.style.marginLeft = 'auto'; + + container.appendChild(icon); + container.appendChild(text); + container.appendChild(badge); + + return container; + } +}; +``` + +### Default Menu-Level Renderer + +Set a `defaultMenuItemRenderer` at the menu option level to apply to all items (unless overridden by individual `slotRenderer`): + +```typescript +const menuOption = { + // Apply this renderer to all menu items (can be overridden per item) + defaultMenuItemRenderer: (cmdItem, args) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
+ `; + }, + commandItems: [ + { + command: 'action-1', + title: 'Action One', + iconCssClass: 'mdi mdi-check', + // This item uses defaultMenuItemRenderer + }, + { + command: 'custom', + title: 'Custom Item', + // This item overrides defaultMenuItemRenderer with its own slotRenderer + slotRenderer: () => ` +
+ Custom rendering overrides default +
+ ` + } + ] +}; +``` + +### Menu Types & Configuration + +The `slotRenderer` and `defaultMenuItemRenderer` work identically across all menu plugins: + +#### Header Menu +```typescript +const columnDef = { + id: 'name', + header: { + menu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'sort', + title: 'Sort', + slotRenderer: () => '
Custom sort
' + } + ] + } + } +}; +``` + +#### Cell Menu +```typescript +const columnDef = { + id: 'action', + cellMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'edit', + title: 'Edit', + slotRenderer: (cmdItem, args) => `
Edit row ${args.dataContext.id}
` + } + ] + } +}; +``` + +#### Context Menu +```typescript +const gridOptions = { + enableContextMenu: true, + contextMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'export', + title: 'Export', + slotRenderer: () => '
📊 Export data
' + } + ] + } +}; +``` + +#### Grid Menu +```typescript +const gridOptions = { + enableGridMenu: true, + gridMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'refresh', + title: 'Refresh', + slotRenderer: () => '
🔄 Refresh data
' + } + ] + } +}; +``` + +### Framework Integration Examples + +#### Vanilla JavaScript +```typescript +const menuItem = { + command: 'custom', + title: 'Action', + slotRenderer: () => ` + + ` +}; +``` + +#### Angular - Dynamic Components +```typescript +// In component class +const menuItem = { + command: 'with-component', + title: 'With Angular Component', + slotRenderer: (cmdItem, args) => { + // Create a placeholder element + const placeholder = document.createElement('div'); + placeholder.id = `angular-slot-${Date.now()}`; + + // Schedule component creation for after rendering + setTimeout(() => { + const element = document.getElementById(placeholder.id); + if (element) { + const componentRef = this.viewContainerRef.createComponent(MyComponent); + element.appendChild(componentRef.location.nativeElement); + } + }, 0); + + return placeholder; + } +}; +``` + +#### React - Using Hooks +```typescript +// Define menu item with slotRenderer +const menuItem = { + command: 'with-react', + title: 'With React Component', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.id = `react-slot-${Date.now()}`; + + // Schedule component render for after menu renders + setTimeout(() => { + const element = document.getElementById(container.id); + if (element) { + ReactDOM.render(, element); + } + }, 0); + + return container; + } +}; +``` + +#### Vue - Using createApp +```typescript +// Define menu item with slotRenderer +const menuItem = { + command: 'with-vue', + title: 'With Vue Component', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.id = `vue-slot-${Date.now()}`; + + // Schedule component mount for after menu renders + setTimeout(() => { + const element = document.getElementById(container.id); + if (element && !element._appInstance) { + const app = createApp(MyComponent, { data: args }); + app.mount(element); + element._appInstance = app; + } + }, 0); + + return container; + } +}; +``` + +### Real-World Use Cases + +#### 1. Add Keyboard Shortcuts +```typescript +{ + command: 'copy', + title: 'Copy', + iconCssClass: 'mdi mdi-content-copy', + slotRenderer: () => ` +
+ + Copy + Ctrl+C +
+ ` +} +``` + +#### 2. Add Status Indicators +```typescript +{ + command: 'filter', + title: 'Filter', + iconCssClass: 'mdi mdi-filter', + slotRenderer: () => ` +
+ + Filter + +
+ ` +} +``` + +#### 3. Add Dynamic Content Based on Context +```typescript +{ + command: 'edit-row', + title: 'Edit Row', + slotRenderer: (cmdItem, args) => ` +
+ + Edit Row #${args.dataContext?.id || 'N/A'} +
+ ` +} +``` + +#### 4. Add Interactive Elements +```typescript +{ + command: 'toggle-setting', + title: 'Auto Refresh', + slotRenderer: (cmdItem, args, event) => { + const container = document.createElement('label'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + container.style.gap = '8px'; + container.style.marginRight = 'auto'; + + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.addEventListener('change', (e) => { + // Prevent menu item click from firing when toggling checkbox + event?.stopPropagation?.(); + console.log('Auto refresh:', checkbox.checked); + }); + + const label = document.createElement('span'); + label.textContent = cmdItem.title; + + container.appendChild(label); + container.appendChild(checkbox); + return container; + } +} +``` + +#### 5. Add Badges and Status Labels +```typescript +{ + command: 'export-excel', + title: 'Export as Excel', + slotRenderer: (cmdItem, args) => ` +
+ + ${cmdItem.title} + RECOMMENDED +
+ ` +} +``` + +#### 6. Gradient and Styled Icons +```typescript +{ + command: 'advanced-export', + title: 'Advanced Export', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + container.style.gap = '8px'; + + const iconDiv = document.createElement('div'); + iconDiv.style.width = '20px'; + iconDiv.style.height = '20px'; + iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; + iconDiv.style.borderRadius = '4px'; + iconDiv.style.display = 'flex'; + iconDiv.style.alignItems = 'center'; + iconDiv.style.justifyContent = 'center'; + iconDiv.style.color = 'white'; + iconDiv.style.fontSize = '12px'; + iconDiv.innerHTML = '📊'; + + const textSpan = document.createElement('span'); + textSpan.textContent = cmdItem.title; + + container.appendChild(iconDiv); + container.appendChild(textSpan); + return container; + } +} +``` + +### Notes and Best Practices + +- **HTML strings** are inserted via `innerHTML` - ensure content is sanitized if user-provided +- **HTMLElement objects** are appended directly - safer for dynamic content and allows event listeners +- **Cross-framework compatible** - works in vanilla JS, Angular, React, Vue, Aurelia using the same API +- **Priority order** - Item-level `slotRenderer` overrides menu-level `defaultMenuItemRenderer` +- **Built-in command preservation** - When overriding a built-in command (e.g., `sort-asc`, `sort-desc`, `hide`, etc.) with custom properties like `slotRenderer` or `iconCssClass`, if you don't provide an `action` callback, the library will automatically preserve and use the built-in action for that command. This means you can safely customize the appearance of built-in commands without losing their functionality. +- **Accessibility** - Include proper ARIA attributes when creating custom elements +- **Event handling** - Call `event.stopPropagation()` in interactive elements to prevent menu commands from firing +- **Default fallback** - If neither `slotRenderer` nor `defaultMenuItemRenderer` is provided, the default icon + text rendering is used +- **Performance** - Avoid heavy DOM manipulation inside renderer callbacks (they may be called multiple times) +- **Event parameter** - The optional `event` parameter is passed during click handling and allows you to control menu behavior +- **All menus supported** - This API works uniformly across Header Menu, Cell Menu, Context Menu, and Grid Menu + +### Styling Custom Menu Items + +```css +/* Example CSS for styled menu items */ +.slick-menu-item { + padding: 4px 8px; +} + +.slick-menu-item div { + display: flex; + align-items: center; + gap: 8px; +} + +.slick-menu-item kbd { + background: #f0f0f0; + border: 1px solid #ddd; + border-radius: 3px; + padding: 2px 6px; + font-size: 11px; + font-family: monospace; + color: #666; +} + +.slick-menu-item .badge { + background: #ff6b6b; + color: white; + padding: 2px 6px; + border-radius: 3px; + font-size: 9px; + font-weight: bold; + white-space: nowrap; +} + +.slick-menu-item:hover { + background: #f5f5f5; +} + +.slick-menu-item.slick-menu-item-disabled { + opacity: 0.5; + cursor: not-allowed; +} +``` + +### Migration from Static Rendering + +**Before (Static HTML Title):** +```typescript +{ + command: 'action', + title: 'Action ⭐', // Emoji embedded in title + iconCssClass: 'mdi mdi-star' +} +``` + +**After (Custom Rendering):** +```typescript +{ + command: 'action', + title: 'Action', + slotRenderer: () => ` +
+ + Action + ⭐ +
+ ` +} +``` + +### Error Handling + +When creating custom renderers, handle potential errors gracefully: + +```typescript +{ + command: 'safe-render', + title: 'Safe Render', + slotRenderer: (cmdItem, args) => { + try { + if (args?.dataContext?.status === 'error') { + return `
❌ Error loading
`; + } + return `
✓ Data loaded
`; + } catch (error) { + console.error('Render error:', error); + return '
Render error
'; + } + } +} +``` diff --git a/frameworks/slickgrid-react/docs/migrations/migration-to-10.x.md b/frameworks/slickgrid-react/docs/migrations/migration-to-10.x.md index 407756ae80..05a9df70e2 100644 --- a/frameworks/slickgrid-react/docs/migrations/migration-to-10.x.md +++ b/frameworks/slickgrid-react/docs/migrations/migration-to-10.x.md @@ -1,4 +1,4 @@ -## Cleaner Code / Smaller Code ⚡ +## Simplication and Modernization ⚡ One of the biggest change of this release is to hide columns by using the `hidden` column property (now used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()` in v10+, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... @@ -85,11 +85,30 @@ gridOptions = { }; ``` -### External Resources are now auto-enabled - This change does not require any code update from the end user, but it is a change that you should probably be aware of nonetheless. The reason I decided to implement this is because I often forget myself to enable the associated flag and typically if you wanted to load the resource, then it's most probably because you also want it enabled. So for example, if your register `ExcelExportService` then the library will now auto-enable the resource with its associated flag (which in this case is `enableExcelExport:true`)... unless you already disabled the flag (or enabled) yourself, if so then the internal assignment will simply be skipped and yours will prevail. Also just to be clear, the list of auto-enabled external resources is rather small, it will auto-enable the following resources: (ExcelExportService, PdfExportService, TextExportService, CompositeEditorComponent and RowDetailView). +### Menu with Commands + +All menu plugins (Cell Menu, Context Menu, Header Menu and Grid Menu) now have a new `commandListBuilder: (items) => items` which now allow you to filter/sort and maybe override built-in commands. With this new feature in place, I'm deprecating all `hide...` properties and also `positionOrder` since you can now do that with the builder. You could also use the `hideCommands` which accepts an array of built-in command names. This well remove huge amount of `hide...` properties (over 30) that keeps increasing anytime a new built-in command gets added (in other words, this will simplify maintenance for both you and me). + +These are currently just deprecations in v10.x but it's strongly recommended to start using the `commandListBuilder` and/or `hideCommands` and move away from the deprecated properties which will be removed in v11.x. For example if we want to hide some built-in commands: + +```diff +gridOptions = { + gridMenu: { +- hideExportCsvCommand: true, +- hideTogglePreHeaderCommand: true, + +// via command name(s) ++ hideCommands: ['export-csv', 'toggle-preheader'], + +// or via builder ++ commandListBuilder: (cmdItems) => [...cmdItems.filter(x => x !== 'divider' && x.command !== 'export-csv' && x.command !== 'toggle-preheader')] + } +} +``` + --- {% hint style="note" %} diff --git a/frameworks/slickgrid-vue/docs/column-functionalities/cell-menu.md b/frameworks/slickgrid-vue/docs/column-functionalities/cell-menu.md index 15a8b3d00f..4ff57137ed 100644 --- a/frameworks/slickgrid-vue/docs/column-functionalities/cell-menu.md +++ b/frameworks/slickgrid-vue/docs/column-functionalities/cell-menu.md @@ -94,7 +94,8 @@ So if you decide to use the `action` callback, then your code would look like th ##### with `action` callback ```ts columnDefinitions.value = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { commandItems: [ { command: 'command1', title: 'Command 1', action: (e, args) => console.log(args) }, @@ -111,7 +112,8 @@ The `onCommand` (or `onOptionSelected`) **must** be defined in the Grid Options ```ts columnDefinitions.value = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { commandItems: [ { command: 'command1', title: 'Command 1' }, @@ -140,6 +142,11 @@ gridOptions.value = { }; ``` +### Custom Menu Item Rendering +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. + +See [Custom Menu Slots](../../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. + ### Override Callback Methods What if you want to dynamically disable or hide a Command/Option or even disable the entire menu in certain circumstances? For these cases, you would use the override callback methods, the method must return a `boolean`. The list of override available are the following - `menuUsabilityOverride` returning false would make the Cell Menu unavailable to the user @@ -150,12 +157,10 @@ What if you want to dynamically disable or hide a Command/Option or even disable For example, say we want the Cell Menu to only be available on the first 20 rows of the grid, we could use the override this way ```ts columnDefinitions.value = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { - menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; - return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 - }, + menuUsabilityOverride: (args) => args?.dataContext.id < 21, // say we want to display the menu only from Task 0 to 20 } } ]; @@ -164,14 +169,15 @@ columnDefinitions.value = [ To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way ```ts columnDefinitions.value = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { optionItems: [ { option: 0, title: 'n/a', textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; } }, @@ -188,7 +194,8 @@ columnDefinitions.value = [ It works exactly like the rest of the library when `enableTranslate` is set, all we have to do is to provide translations with the `Key` suffix, so for example without translations, we would use `title` and that would become `titleKey` with translations, that;'s easy enough. So for example, a list of Options could be defined as follow: ```ts columnDefinitions.value = [ - { id: 'action', field: 'action', name: 'Action', + { + id: 'action', field: 'action', name: 'Action', cellMenu: { optionTitleKey: 'OPTIONS', // optionally pass a title to show over the Options optionItems: [ diff --git a/frameworks/slickgrid-vue/docs/column-functionalities/editors.md b/frameworks/slickgrid-vue/docs/column-functionalities/editors.md index 78151d2c9c..dbab3c3d27 100644 --- a/frameworks/slickgrid-vue/docs/column-functionalities/editors.md +++ b/frameworks/slickgrid-vue/docs/column-functionalities/editors.md @@ -498,8 +498,8 @@ So if we take all of these informations and we want to create our own Custom Edi ```ts const myCustomTitleValidator: EditorValidator = (value: any, args: EditorArgs) => { // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it - const grid = args && args.grid; - const gridOptions = (grid && grid.getOptions) ? grid.getOptions() : {}; + const grid = args.grid; + const gridOptions = grid.getOptions() : {}; const i18n = gridOptions.i18n; if (value == null || value === undefined || !value.length) { diff --git a/frameworks/slickgrid-vue/docs/grid-functionalities/context-menu.md b/frameworks/slickgrid-vue/docs/grid-functionalities/context-menu.md index c03cbc04c5..638528bf65 100644 --- a/frameworks/slickgrid-vue/docs/grid-functionalities/context-menu.md +++ b/frameworks/slickgrid-vue/docs/grid-functionalities/context-menu.md @@ -23,7 +23,7 @@ This extensions is wrapped around the new SlickGrid Plugin **SlickContextMenu** ### Default Usage Technically, the Context Menu is enabled by default (copy, export) and so you don't have anything to do to enjoy it (you could disable it at any time). However, if you want to customize the content of the Context Menu, then continue reading. You can customize the menu with 2 different lists, Commands and/or Options, they can be used separately or at the same time. Also note that even though the code shown below makes a separation between the Commands and Options, you can mix them in the same Context Menu. -#### with Commands +#### with Commands (Static) ```ts gridOptions.value = { @@ -63,6 +63,98 @@ gridOptions.value = { }; ``` +#### with Commands (Dynamic Builder) +For advanced scenarios where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. + +```ts +this.gridOptions = { + enableContextMenu: true, + contextMenu: { + commandListBuilder: (builtInItems) => { + // Example: Add custom commands after built-in ones + return [ + ...builtInItems, + 'divider', + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: (e, args) => { + if (confirm(`Delete row ${args.dataContext.id}?`)) { + this.gridService.deleteItem(args.dataContext); + } + } + }, + { + command: 'duplicate-row', + title: 'Duplicate Row', + iconCssClass: 'mdi mdi-content-duplicate', + action: (e, args) => { + const newItem = { ...args.dataContext, id: this.generateNewId() }; + this.gridService.addItem(newItem); + } + } + ]; + }, + onCommand: (e, args) => { + // Handle commands here if not using action callbacks + console.log('Command:', args.command); + } + } +}; +``` + +**Example: Filter commands based on row data** +```ts +contextMenu: { + commandListBuilder: (builtInItems) => { + // You can't access row data here, but you can filter/modify built-in items + // Use itemUsabilityOverride or itemVisibilityOverride for row-specific logic + + // Only show export commands + return builtInItems.filter(item => + item === 'divider' || item.command?.includes('export') + ); + } +} +``` + +**Example: Sort and reorganize commands** +```ts +contextMenu: { + commandListBuilder: (builtInItems) => { + const customFirst = [ + { + command: 'edit', + title: 'Edit Row', + iconCssClass: 'mdi mdi-pencil', + positionOrder: 0 + } + ]; + + // Sort built-in commands by positionOrder + const sorted = [...builtInItems].sort((a, b) => { + if (a === 'divider' || b === 'divider') return 0; + return (a.positionOrder || 50) - (b.positionOrder || 50); + }); + + return [...customFirst, 'divider', ...sorted]; + } +} +``` + +**When to use `commandListBuilder` vs `commandItems`:** +- Use `commandItems` for static command lists +- Use `commandListBuilder` when you need to: + - Append/prepend to built-in commands + - Filter or modify commands dynamically + - Sort or reorder the final command list + - Have full control over what gets rendered + +**Note:** Typically use `commandListBuilder` **instead of** `commandItems`, not both together. + +See the main [Custom Menu Slots](../menu-slots.md) documentation for detailed `commandListBuilder` examples. + #### with Options That is when you want to define a list of Options (only 1 list) that the user can choose from and once is selected we would do something (for example change the value of a cell in the grid). @@ -79,7 +171,7 @@ gridOptions.value = { // subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option) onOptionSelected: (e, args) => { // change Priority - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; if (dataContext && dataContext.hasOwnProperty('priority')) { dataContext.priority = args.item.option; sgb.gridService.updateItem(dataContext); @@ -139,7 +231,7 @@ For example, say we want the Context Menu to only be available on the first 20 r ```ts contextMenu: { menuUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20 }, }, @@ -153,7 +245,7 @@ contextMenu: { option: 0, title: 'n/a', textCssClass: 'italic', // only enable this option when the task is Not Completed itemUsabilityOverride: (args) => { - const dataContext = args && args.dataContext; + const dataContext = args?.dataContext; return !dataContext.completed; }, }, @@ -177,6 +269,11 @@ contextMenu: { } ``` +### Custom Menu Item Rendering +For advanced customization of menu item appearance, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks to create custom HTML or HTMLElement content for your menu items. This allows you to add badges, keyboard shortcuts, status indicators, and more. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content across all menu types. + ### Show Menu only over Certain Columns Say you want to show the Context Menu only when the user is over certain columns of the grid. For that, you could use the `commandShownOverColumnIds` (or `optionShownOverColumnIds`) array, by default these arrays are empty and when that is the case then the menu will be accessible from any columns. So if we want to have the Context Menu available only over the first 2 columns, we would have an array of those 2 column ids. For example, the following would show the Context Menu everywhere except the last 2 columns (priority, action) since they are not part of the array. ```ts diff --git a/frameworks/slickgrid-vue/docs/grid-functionalities/grid-menu.md b/frameworks/slickgrid-vue/docs/grid-functionalities/grid-menu.md index d89c54482b..5a5485a1d1 100644 --- a/frameworks/slickgrid-vue/docs/grid-functionalities/grid-menu.md +++ b/frameworks/slickgrid-vue/docs/grid-functionalities/grid-menu.md @@ -74,6 +74,11 @@ gridOptions.value = { }; ``` +#### Advanced: Dynamic Command List Builder +For more advanced use cases where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. + +See the main [Custom Menu Slots](../menu-slots.md) documentation for detailed `commandListBuilder` examples. + #### Events There are multiple events/callback hooks which are accessible from the Grid Options - `onBeforeMenuShow` @@ -106,6 +111,11 @@ gridMenu: { For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/6pac/SlickGrid/blob/master/controls/slick.gridmenu.js) itself. +### Custom Menu Item Rendering +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. + ### How to change an icon of all default commands? You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults. ```ts diff --git a/frameworks/slickgrid-vue/docs/grid-functionalities/header-menu-header-buttons.md b/frameworks/slickgrid-vue/docs/grid-functionalities/header-menu-header-buttons.md index db633290d7..09bafcdb3c 100644 --- a/frameworks/slickgrid-vue/docs/grid-functionalities/header-menu-header-buttons.md +++ b/frameworks/slickgrid-vue/docs/grid-functionalities/header-menu-header-buttons.md @@ -20,7 +20,10 @@ The Header Menu also comes, by default, with a list of built-in custom commands - Sort Descending (you can hide it with `hideSortCommands: true`) - Hide Column (you can hide it with `hideColumnHideCommand: true`) -This section is called Custom Commands because you can also customize this section with your own commands. To do that, you need to fill in 2 properties (an array of `headerMenuItems` that will go under each column definition and define `onCommand` callbacks) in your Grid Options. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): +This section is called Custom Commands because you can also customize this section with your own commands. You can do this in two ways: using static command items or using a dynamic command list builder. + +#### Static Command Items +To add static commands, fill in an array of items in your column definition's `header.menu.commandItems`. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them): ```ts gridOptions.value = { enableAutoResize: true, @@ -51,6 +54,98 @@ gridOptions.value = { } }; ``` +#### Dynamic Command List Builder +For advanced use cases where you need to dynamically build the command list, use `commandListBuilder`. This callback receives the built-in commands and allows you to filter, sort, or modify the list before it's rendered in the UI, giving you full control over the final command list. This is executed **after** `commandItems` and is the **last call before rendering**. + +```ts +columnDefinitions.value = [ + { + id: 'title', + name: 'Title', + field: 'title', + header: { + menu: { + commandListBuilder: (builtInItems) => { + // Append custom commands to the built-in sort/hide commands + return [ + ...builtInItems, + 'divider', + { + command: 'freeze-column', + title: 'Freeze Column', + iconCssClass: 'mdi mdi-pin', + action: (e, args) => { + // Implement column freezing + console.log('Freeze column:', args.column.name); + } + } + ]; + } + } + } + } +]; +``` + +**Example: Conditional commands based on column type** +```ts +header: { + menu: { + commandListBuilder: (builtInItems) => { + const column = this; // column context + + // Add filtering option only for filterable columns + const extraCommands = []; + if (column.filterable !== false) { + extraCommands.push({ + command: 'clear-filter', + title: 'Clear Filter', + iconCssClass: 'mdi mdi-filter-remove', + action: (e, args) => { + filterService.clearFilterByColumnId(args.column.id); + } + }); + } + + return [...builtInItems, ...extraCommands]; + } + } +} +``` + +**Example: Remove sort commands, keep only custom ones** +```ts +header: { + menu: { + commandListBuilder: (builtInItems) => { + // Filter out sort commands + const filtered = builtInItems.filter(item => + item !== 'divider' && + !item.command?.includes('sort') + ); + + // Add custom commands + return [ + ...filtered, + { + command: 'custom-action', + title: 'Custom Action', + iconCssClass: 'mdi mdi-star', + action: (e, args) => alert('Custom: ' + args.column.name) + } + ]; + } + } +} +``` + +**When to use `commandListBuilder`:** +- You want to append/prepend items to built-in commands +- You need to filter or modify commands based on column properties +- You want to customize the command list per column dynamically +- You need full control over the final command list + +**Note:** Use `commandListBuilder` **instead of** `commandItems`, not both together. #### Callback Hooks There are 2 callback hooks which are accessible in the Grid Options - `onBeforeMenuShow` @@ -58,6 +153,11 @@ There are 2 callback hooks which are accessible in the Grid Options For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/extensions/slickHeaderButtons.ts) itself. +### Custom Menu Item Rendering +To customize the appearance of menu items with custom HTML, badges, icons, or interactive elements, you can use the `slotRenderer` or `defaultMenuItemRenderer` callbacks. + +See [Custom Menu Slots](../menu-slots.md) for detailed examples and best practices on rendering custom menu item content. + ### How to change icon(s) of the default commands? You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults. ```ts diff --git a/frameworks/slickgrid-vue/docs/menu-slots.md b/frameworks/slickgrid-vue/docs/menu-slots.md new file mode 100644 index 0000000000..61f036b738 --- /dev/null +++ b/frameworks/slickgrid-vue/docs/menu-slots.md @@ -0,0 +1,499 @@ +## Custom Menu Slots - Rendering + +All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cross-framework compatible slot rendering** for custom content injection in menu items. This is achieved through the `slotRenderer` callback at the item level combined with an optional `defaultMenuItemRenderer` at the menu level. + +> **Note:** This documentation covers **how menu items are rendered** (visual presentation). If you need to **dynamically modify which commands appear** in the menu (filtering, sorting, adding/removing items), see the `commandListBuilder` callback documented in [Grid Menu](grid-functionalities/grid-menu.md), [Context Menu](grid-functionalities/context-menu.md), or [Header Menu](grid-functionalities/header-menu-header-buttons.md). + +### Core Concept + +Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. + +### Slot Renderer Callback + +```typescript +slotRenderer?: (cmdItem: any, args: any, event?: Event) => string | HTMLElement +``` + +- **cmdItem** - The menu cmdItem object containing command, title, iconCssClass, etc. +- **args** - The callback args providing access to grid, column, dataContext, and other context +- **event** - Optional DOM event passed during click handling (allows `stopPropagation()`) + +### Basic Example - HTML String Rendering + +```typescript +const menuItem = { + command: 'custom-command', + title: 'Custom Action', + iconCssClass: 'mdi mdi-star', + // Return custom HTML string for the entire menu item + slotRenderer: () => ` +
+ + Custom Action + NEW +
+ ` +}; +``` + +### Advanced Example - HTMLElement Objects + +```typescript +// Create custom element with full DOM control +const menuItem = { + command: 'notifications', + title: 'Notifications', + // Return HTMLElement for more control and event listeners + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + + const icon = document.createElement('i'); + icon.className = 'mdi mdi-bell'; + icon.style.marginRight = '8px'; + + const text = document.createElement('span'); + text.textContent = cmdItem.title; + + const badge = document.createElement('span'); + badge.className = 'badge'; + badge.textContent = '5'; + badge.style.marginLeft = 'auto'; + + container.appendChild(icon); + container.appendChild(text); + container.appendChild(badge); + + return container; + } +}; +``` + +### Default Menu-Level Renderer + +Set a `defaultMenuItemRenderer` at the menu option level to apply to all items (unless overridden by individual `slotRenderer`): + +```typescript +const menuOption = { + // Apply this renderer to all menu items (can be overridden per item) + defaultMenuItemRenderer: (cmdItem, args) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
+ `; + }, + commandItems: [ + { + command: 'action-1', + title: 'Action One', + iconCssClass: 'mdi mdi-check', + // This item uses defaultMenuItemRenderer + }, + { + command: 'custom', + title: 'Custom Item', + // This item overrides defaultMenuItemRenderer with its own slotRenderer + slotRenderer: () => ` +
+ Custom rendering overrides default +
+ ` + } + ] +}; +``` + +### Menu Types & Configuration + +The `slotRenderer` and `defaultMenuItemRenderer` work identically across all menu plugins: + +#### Header Menu +```typescript +const columnDef = { + id: 'name', + header: { + menu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'sort', + title: 'Sort', + slotRenderer: () => '
Custom sort
' + } + ] + } + } +}; +``` + +#### Cell Menu +```typescript +const columnDef = { + id: 'action', + cellMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'edit', + title: 'Edit', + slotRenderer: (cmdItem, args) => `
Edit row ${args.dataContext.id}
` + } + ] + } +}; +``` + +#### Context Menu +```typescript +const gridOptions = { + enableContextMenu: true, + contextMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'export', + title: 'Export', + slotRenderer: () => '
📊 Export data
' + } + ] + } +}; +``` + +#### Grid Menu +```typescript +const gridOptions = { + enableGridMenu: true, + gridMenu: { + defaultMenuItemRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + commandItems: [ + { + command: 'refresh', + title: 'Refresh', + slotRenderer: () => '
🔄 Refresh data
' + } + ] + } +}; +``` + +### Framework Integration Examples + +#### Vanilla JavaScript +```typescript +const menuItem = { + command: 'custom', + title: 'Action', + slotRenderer: () => ` + + ` +}; +``` + +#### Angular - Dynamic Components +```typescript +// In component class +const menuItem = { + command: 'with-component', + title: 'With Angular Component', + slotRenderer: (cmdItem, args) => { + // Create a placeholder element + const placeholder = document.createElement('div'); + placeholder.id = `angular-slot-${Date.now()}`; + + // Schedule component creation for after rendering + setTimeout(() => { + const element = document.getElementById(placeholder.id); + if (element) { + const componentRef = this.viewContainerRef.createComponent(MyComponent); + element.appendChild(componentRef.location.nativeElement); + } + }, 0); + + return placeholder; + } +}; +``` + +#### React - Using Hooks +```typescript +// Define menu item with slotRenderer +const menuItem = { + command: 'with-react', + title: 'With React Component', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.id = `react-slot-${Date.now()}`; + + // Schedule component render for after menu renders + setTimeout(() => { + const element = document.getElementById(container.id); + if (element) { + ReactDOM.render(, element); + } + }, 0); + + return container; + } +}; +``` + +#### Vue - Using createApp +```typescript +// Define menu item with slotRenderer +const menuItem = { + command: 'with-vue', + title: 'With Vue Component', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.id = `vue-slot-${Date.now()}`; + + // Schedule component mount for after menu renders + setTimeout(() => { + const element = document.getElementById(container.id); + if (element && !element._appInstance) { + const app = createApp(MyComponent, { data: args }); + app.mount(element); + element._appInstance = app; + } + }, 0); + + return container; + } +}; +``` + +### Real-World Use Cases + +#### 1. Add Keyboard Shortcuts +```typescript +{ + command: 'copy', + title: 'Copy', + iconCssClass: 'mdi mdi-content-copy', + slotRenderer: () => ` +
+ + Copy + Ctrl+C +
+ ` +} +``` + +#### 2. Add Status Indicators +```typescript +{ + command: 'filter', + title: 'Filter', + iconCssClass: 'mdi mdi-filter', + slotRenderer: () => ` +
+ + Filter + +
+ ` +} +``` + +#### 3. Add Dynamic Content Based on Context +```typescript +{ + command: 'edit-row', + title: 'Edit Row', + slotRenderer: (cmdItem, args) => ` +
+ + Edit Row #${args.dataContext?.id || 'N/A'} +
+ ` +} +``` + +#### 4. Add Interactive Elements +```typescript +{ + command: 'toggle-setting', + title: 'Auto Refresh', + slotRenderer: (cmdItem, args, event) => { + const container = document.createElement('label'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + container.style.gap = '8px'; + container.style.marginRight = 'auto'; + + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.addEventListener('change', (e) => { + // Prevent menu item click from firing when toggling checkbox + event?.stopPropagation?.(); + console.log('Auto refresh:', checkbox.checked); + }); + + const label = document.createElement('span'); + label.textContent = cmdItem.title; + + container.appendChild(label); + container.appendChild(checkbox); + return container; + } +} +``` + +#### 5. Add Badges and Status Labels +```typescript +{ + command: 'export-excel', + title: 'Export as Excel', + slotRenderer: (cmdItem, args) => ` +
+ + ${cmdItem.title} + RECOMMENDED +
+ ` +} +``` + +#### 6. Gradient and Styled Icons +```typescript +{ + command: 'advanced-export', + title: 'Advanced Export', + slotRenderer: (cmdItem, args) => { + const container = document.createElement('div'); + container.style.display = 'flex'; + container.style.alignItems = 'center'; + container.style.gap = '8px'; + + const iconDiv = document.createElement('div'); + iconDiv.style.width = '20px'; + iconDiv.style.height = '20px'; + iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; + iconDiv.style.borderRadius = '4px'; + iconDiv.style.display = 'flex'; + iconDiv.style.alignItems = 'center'; + iconDiv.style.justifyContent = 'center'; + iconDiv.style.color = 'white'; + iconDiv.style.fontSize = '12px'; + iconDiv.innerHTML = '📊'; + + const textSpan = document.createElement('span'); + textSpan.textContent = cmdItem.title; + + container.appendChild(iconDiv); + container.appendChild(textSpan); + return container; + } +} +``` + +### Notes and Best Practices + +- **HTML strings** are inserted via `innerHTML` - ensure content is sanitized if user-provided +- **HTMLElement objects** are appended directly - safer for dynamic content and allows event listeners +- **Cross-framework compatible** - works in vanilla JS, Angular, React, Vue, Aurelia using the same API +- **Priority order** - Item-level `slotRenderer` overrides menu-level `defaultMenuItemRenderer` +- **Built-in command preservation** - When overriding a built-in command (e.g., `sort-asc`, `sort-desc`, `hide`, etc.) with custom properties like `slotRenderer` or `iconCssClass`, if you don't provide an `action` callback, the library will automatically preserve and use the built-in action for that command. This means you can safely customize the appearance of built-in commands without losing their functionality. +- **Accessibility** - Include proper ARIA attributes when creating custom elements +- **Event handling** - Call `event.stopPropagation()` in interactive elements to prevent menu commands from firing +- **Default fallback** - If neither `slotRenderer` nor `defaultMenuItemRenderer` is provided, the default icon + text rendering is used +- **Performance** - Avoid heavy DOM manipulation inside renderer callbacks (they may be called multiple times) +- **Event parameter** - The optional `event` parameter is passed during click handling and allows you to control menu behavior +- **All menus supported** - This API works uniformly across Header Menu, Cell Menu, Context Menu, and Grid Menu + +### Styling Custom Menu Items + +```css +/* Example CSS for styled menu items */ +.slick-menu-item { + padding: 4px 8px; +} + +.slick-menu-item div { + display: flex; + align-items: center; + gap: 8px; +} + +.slick-menu-item kbd { + background: #f0f0f0; + border: 1px solid #ddd; + border-radius: 3px; + padding: 2px 6px; + font-size: 11px; + font-family: monospace; + color: #666; +} + +.slick-menu-item .badge { + background: #ff6b6b; + color: white; + padding: 2px 6px; + border-radius: 3px; + font-size: 9px; + font-weight: bold; + white-space: nowrap; +} + +.slick-menu-item:hover { + background: #f5f5f5; +} + +.slick-menu-item.slick-menu-item-disabled { + opacity: 0.5; + cursor: not-allowed; +} +``` + +### Migration from Static Rendering + +**Before (Static HTML Title):** +```typescript +{ + command: 'action', + title: 'Action ⭐', // Emoji embedded in title + iconCssClass: 'mdi mdi-star' +} +``` + +**After (Custom Rendering):** +```typescript +{ + command: 'action', + title: 'Action', + slotRenderer: () => ` +
+ + Action + ⭐ +
+ ` +} +``` + +### Error Handling + +When creating custom renderers, handle potential errors gracefully: + +```typescript +{ + command: 'safe-render', + title: 'Safe Render', + slotRenderer: (cmdItem, args) => { + try { + if (args?.dataContext?.status === 'error') { + return `
❌ Error loading
`; + } + return `
✓ Data loaded
`; + } catch (error) { + console.error('Render error:', error); + return '
Render error
'; + } + } +} +``` diff --git a/frameworks/slickgrid-vue/docs/migrations/migration-to-10.x.md b/frameworks/slickgrid-vue/docs/migrations/migration-to-10.x.md index c5a19be365..8d89888e7c 100644 --- a/frameworks/slickgrid-vue/docs/migrations/migration-to-10.x.md +++ b/frameworks/slickgrid-vue/docs/migrations/migration-to-10.x.md @@ -1,4 +1,4 @@ -## Cleaner Code / Smaller Code ⚡ +## Simplication and Modernization ⚡ One of the biggest change of this release is to hide columns by using the `hidden` column property (now used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()` in v10+, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... @@ -99,11 +99,30 @@ gridOptions = { }; ``` -### External Resources are now auto-enabled - This change does not require any code update from the end user, but it is a change that you should probably be aware of nonetheless. The reason I decided to implement this is because I often forget myself to enable the associated flag and typically if you wanted to load the resource, then it's most probably because you also want it enabled. So for example, if your register `ExcelExportService` then the library will now auto-enable the resource with its associated flag (which in this case is `enableExcelExport:true`)... unless you already disabled the flag (or enabled) yourself, if so then the internal assignment will simply be skipped and yours will prevail. Also just to be clear, the list of auto-enabled external resources is rather small, it will auto-enable the following resources: (ExcelExportService, PdfExportService, TextExportService, CompositeEditorComponent and RowDetailView). +### Menu with Commands + +All menu plugins (Cell Menu, Context Menu, Header Menu and Grid Menu) now have a new `commandListBuilder: (items) => items` which now allow you to filter/sort and maybe override built-in commands. With this new feature in place, I'm deprecating all `hide...` properties and also `positionOrder` since you can now do that with the builder. You could also use the `hideCommands` which accepts an array of built-in command names. This well remove huge amount of `hide...` properties (over 30) that keeps increasing anytime a new built-in command gets added (in other words, this will simplify maintenance for both you and me). + +These are currently just deprecations in v10.x but it's strongly recommended to start using the `commandListBuilder` and/or `hideCommands` and move away from the deprecated properties which will be removed in v11.x. For example if we want to hide some built-in commands: + +```diff +gridOptions = { + gridMenu: { +- hideExportCsvCommand: true, +- hideTogglePreHeaderCommand: true, + +// via command name(s) ++ hideCommands: ['export-csv', 'toggle-preheader'], + +// or via builder ++ commandListBuilder: (cmdItems) => [...cmdItems.filter(x => x !== 'divider' && x.command !== 'export-csv' && x.command !== 'toggle-preheader')] + } +} +``` + --- {% hint style="note" %} From 44cec34a8f4ac203434646f009a8bc79ec973242 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 13:41:42 -0500 Subject: [PATCH 13/24] docs: typo --- docs/migrations/migration-to-10.x.md | 2 +- .../angular-slickgrid/docs/migrations/migration-to-10.x.md | 2 +- .../aurelia-slickgrid/docs/migrations/migration-to-10.x.md | 2 +- frameworks/slickgrid-react/docs/migrations/migration-to-10.x.md | 2 +- frameworks/slickgrid-vue/docs/migrations/migration-to-10.x.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/migrations/migration-to-10.x.md b/docs/migrations/migration-to-10.x.md index e826765d87..0497ce0e33 100644 --- a/docs/migrations/migration-to-10.x.md +++ b/docs/migrations/migration-to-10.x.md @@ -1,4 +1,4 @@ -## Simplication and Modernization ⚡ +## Simplification and Modernization ⚡ One of the biggest change of this release is to hide columns by using the `hidden` column property (now used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()` in v10+, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... diff --git a/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md b/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md index 0ebbeed2c5..175159a65c 100644 --- a/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md +++ b/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md @@ -1,4 +1,4 @@ -## Simplication and Modernization ⚡ +## Simplification and Modernization ⚡ One of the biggest change of this release is to hide columns by using the `hidden` column property (now used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()` in v10+, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... diff --git a/frameworks/aurelia-slickgrid/docs/migrations/migration-to-10.x.md b/frameworks/aurelia-slickgrid/docs/migrations/migration-to-10.x.md index a24ea1a69f..99c5b21c51 100644 --- a/frameworks/aurelia-slickgrid/docs/migrations/migration-to-10.x.md +++ b/frameworks/aurelia-slickgrid/docs/migrations/migration-to-10.x.md @@ -1,4 +1,4 @@ -## Simplication and Modernization ⚡ +## Simplification and Modernization ⚡ One of the biggest change of this release is to hide columns by using the `hidden` column property (now used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()` in v10+, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... diff --git a/frameworks/slickgrid-react/docs/migrations/migration-to-10.x.md b/frameworks/slickgrid-react/docs/migrations/migration-to-10.x.md index 05a9df70e2..0005d30687 100644 --- a/frameworks/slickgrid-react/docs/migrations/migration-to-10.x.md +++ b/frameworks/slickgrid-react/docs/migrations/migration-to-10.x.md @@ -1,4 +1,4 @@ -## Simplication and Modernization ⚡ +## Simplification and Modernization ⚡ One of the biggest change of this release is to hide columns by using the `hidden` column property (now used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()` in v10+, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... diff --git a/frameworks/slickgrid-vue/docs/migrations/migration-to-10.x.md b/frameworks/slickgrid-vue/docs/migrations/migration-to-10.x.md index 8d89888e7c..51cc1c94d8 100644 --- a/frameworks/slickgrid-vue/docs/migrations/migration-to-10.x.md +++ b/frameworks/slickgrid-vue/docs/migrations/migration-to-10.x.md @@ -1,4 +1,4 @@ -## Simplication and Modernization ⚡ +## Simplification and Modernization ⚡ One of the biggest change of this release is to hide columns by using the `hidden` column property (now used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()` in v10+, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... From 9396c107d1f2229ee3eb793a3f26f471c05c0e6e Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 13:41:58 -0500 Subject: [PATCH 14/24] chore: remove deprecated TS downlevelIteration --- demos/react/tsconfig.json | 1 - frameworks-plugins/angular-row-detail-plugin/tsconfig.json | 1 - frameworks-plugins/aurelia-row-detail-plugin/tsconfig.json | 1 - frameworks-plugins/react-row-detail-plugin/tsconfig.json | 1 - frameworks-plugins/vue-row-detail-plugin/tsconfig.json | 1 - frameworks/aurelia-slickgrid/tsconfig.json | 1 - frameworks/slickgrid-react/tsconfig.json | 1 - 7 files changed, 7 deletions(-) diff --git a/demos/react/tsconfig.json b/demos/react/tsconfig.json index 68ce43f7d8..669403216e 100644 --- a/demos/react/tsconfig.json +++ b/demos/react/tsconfig.json @@ -4,7 +4,6 @@ "target": "es2022", "module": "esnext", "sourceMap": true, - "downlevelIteration": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "esModuleInterop": true, diff --git a/frameworks-plugins/angular-row-detail-plugin/tsconfig.json b/frameworks-plugins/angular-row-detail-plugin/tsconfig.json index 84056217cc..5b4bd341dd 100644 --- a/frameworks-plugins/angular-row-detail-plugin/tsconfig.json +++ b/frameworks-plugins/angular-row-detail-plugin/tsconfig.json @@ -21,7 +21,6 @@ "skipLibCheck": true, "sourceMap": true, "newLine": "lf", - "downlevelIteration": true, "outDir": "dist" }, "include": ["src"], diff --git a/frameworks-plugins/aurelia-row-detail-plugin/tsconfig.json b/frameworks-plugins/aurelia-row-detail-plugin/tsconfig.json index 82191a3a37..201c1b1dc0 100644 --- a/frameworks-plugins/aurelia-row-detail-plugin/tsconfig.json +++ b/frameworks-plugins/aurelia-row-detail-plugin/tsconfig.json @@ -21,7 +21,6 @@ "skipLibCheck": true, "sourceMap": true, "newLine": "lf", - "downlevelIteration": true, "outDir": "dist" }, "include": ["src"], diff --git a/frameworks-plugins/react-row-detail-plugin/tsconfig.json b/frameworks-plugins/react-row-detail-plugin/tsconfig.json index 82191a3a37..201c1b1dc0 100644 --- a/frameworks-plugins/react-row-detail-plugin/tsconfig.json +++ b/frameworks-plugins/react-row-detail-plugin/tsconfig.json @@ -21,7 +21,6 @@ "skipLibCheck": true, "sourceMap": true, "newLine": "lf", - "downlevelIteration": true, "outDir": "dist" }, "include": ["src"], diff --git a/frameworks-plugins/vue-row-detail-plugin/tsconfig.json b/frameworks-plugins/vue-row-detail-plugin/tsconfig.json index 82191a3a37..201c1b1dc0 100644 --- a/frameworks-plugins/vue-row-detail-plugin/tsconfig.json +++ b/frameworks-plugins/vue-row-detail-plugin/tsconfig.json @@ -21,7 +21,6 @@ "skipLibCheck": true, "sourceMap": true, "newLine": "lf", - "downlevelIteration": true, "outDir": "dist" }, "include": ["src"], diff --git a/frameworks/aurelia-slickgrid/tsconfig.json b/frameworks/aurelia-slickgrid/tsconfig.json index 82191a3a37..201c1b1dc0 100644 --- a/frameworks/aurelia-slickgrid/tsconfig.json +++ b/frameworks/aurelia-slickgrid/tsconfig.json @@ -21,7 +21,6 @@ "skipLibCheck": true, "sourceMap": true, "newLine": "lf", - "downlevelIteration": true, "outDir": "dist" }, "include": ["src"], diff --git a/frameworks/slickgrid-react/tsconfig.json b/frameworks/slickgrid-react/tsconfig.json index d6cc0e4af9..27be555f78 100644 --- a/frameworks/slickgrid-react/tsconfig.json +++ b/frameworks/slickgrid-react/tsconfig.json @@ -22,7 +22,6 @@ "skipLibCheck": true, "sourceMap": true, "newLine": "lf", - "downlevelIteration": true, "outDir": "dist" }, "include": ["src"], From be45c8c09896a01e09c7d29476491450cdf826bb Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 14:53:11 -0500 Subject: [PATCH 15/24] docs: replace all ms-select.js reference with multiple-select-vanilla --- .../editors/select-dropdown-editor.md | 10 +++++----- docs/column-functionalities/filters/select-filter.md | 10 +++++----- docs/grid-functionalities/composite-editor-modal.md | 2 +- .../docs/column-functionalities/editors.md | 2 +- .../editors/select-dropdown-editor.md | 12 ++++++------ .../column-functionalities/filters/select-filter.md | 12 ++++++------ .../grid-functionalities/composite-editor-modal.md | 2 +- .../docs/column-functionalities/editors.md | 8 ++++---- .../editors/select-dropdown-editor.md | 10 +++++----- .../column-functionalities/filters/custom-filter.md | 2 +- .../column-functionalities/filters/select-filter.md | 12 ++++++------ .../grid-functionalities/composite-editor-modal.md | 2 +- .../docs/column-functionalities/editors.md | 10 +++++----- .../editors/select-dropdown-editor.md | 10 +++++----- .../column-functionalities/filters/custom-filter.md | 2 +- .../column-functionalities/filters/select-filter.md | 12 ++++++------ .../grid-functionalities/composite-editor-modal.md | 2 +- .../docs/column-functionalities/editors.md | 6 +++--- .../editors/select-dropdown-editor.md | 10 +++++----- .../column-functionalities/filters/custom-filter.md | 2 +- .../column-functionalities/filters/select-filter.md | 12 ++++++------ .../grid-functionalities/composite-editor-modal.md | 2 +- packages/common/src/editors/editors.index.ts | 4 ++-- .../collectionSearchFilterCondition.ts | 2 +- packages/common/src/filters/filters.index.ts | 4 ++-- 25 files changed, 81 insertions(+), 81 deletions(-) diff --git a/docs/column-functionalities/editors/select-dropdown-editor.md b/docs/column-functionalities/editors/select-dropdown-editor.md index defd751b7a..eef11e25c5 100644 --- a/docs/column-functionalities/editors/select-dropdown-editor.md +++ b/docs/column-functionalities/editors/select-dropdown-editor.md @@ -6,11 +6,11 @@ - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix) - [Collection Label Render HTML](#collection-label-render-html) - [Collection Change Watch](#collection-watch) - - [`multiple-select.js` Options](#multiple-selectjs-options) + - [`multiple-select-vanilla` Options](#multiple-selectjs-options) - See the [Editors - Docs](../Editors.md) for more general info about Editors (validators, event handlers, ...) ## Select Editors -The library ships with two select editors: `singleSelectEditor` and the `multipleSelectEditor`. Both support the [multiple-select](https://github.com/ghiscoding/multiple-select-adapted/blob/master/src/multiple-select.js) library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the [collectionFormatter](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/collectionFormatter.ts). +The library ships with two select editors: `singleSelectEditor` and the `multipleSelectEditor`. Both support the [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the [collectionFormatter](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/collectionFormatter.ts). We use an external lib named [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla). @@ -199,8 +199,8 @@ this.columnDefinitions = [ ]; ``` -### `multiple-select.js` Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +### `multiple-select-vanilla` Options +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/lib` folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -226,7 +226,7 @@ this.columnDefinitions = [ collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], model: Editors.singleSelect, elementOptions: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } diff --git a/docs/column-functionalities/filters/select-filter.md b/docs/column-functionalities/filters/select-filter.md index 5dcd583ac5..f0cecfd56a 100644 --- a/docs/column-functionalities/filters/select-filter.md +++ b/docs/column-functionalities/filters/select-filter.md @@ -16,7 +16,7 @@ - [Collection Async Load](#collection-async-load) - [Collection Lazy Load](#collection-lazy-load) - [Collection Watch](#collection-watch) -- [`multiple-select.js` Options](#multiple-selectjs-options) +- [`multiple-select-vanilla` Options](#multiple-selectjs-options) - [Filter Options (`MultipleSelectOption` interface)](#filter-options-multipleselectoption-interface) - [Display shorter selected label text](#display-shorter-selected-label-text) - [Query against a different field](#query-against-another-field-property) @@ -33,7 +33,7 @@ Multiple Select (dropdown) filter is useful when we want to filter the grid 1 or We use an external lib named [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla). #### Note -For this filter to work you will need to add [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) to your project. This is a customized version of the original (thought all the original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/dist/lib` folder. This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) +For this filter to work you will need to add [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) to your project. This is a customized version of the original (thought all the original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/dist/lib` folder. This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. - `okButtonText` was also added for locale (i18n) - `offsetLeft` option was added to make it possible to offset the dropdown. By default it is set to 0 and is aligned to the left of the select element. This option is particularly helpful when used as the last right column, not to fall off the screen. @@ -608,8 +608,8 @@ this.gridOptions = { } ``` -### Multiple-select.js Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +### multiple-select-vanilla Options +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why we are using a fork [ghiscoding/multiple-select-modified](https://github.com/ghiscoding/multiple-select-modified) folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -641,7 +641,7 @@ prepareGrid() { model: Filters.singleSelect, // previously known as `filterOptions` for < 9.0 options: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } as MultipleSelectOption diff --git a/docs/grid-functionalities/composite-editor-modal.md b/docs/grid-functionalities/composite-editor-modal.md index 1619e6e7ee..dcf33b1f8b 100644 --- a/docs/grid-functionalities/composite-editor-modal.md +++ b/docs/grid-functionalities/composite-editor-modal.md @@ -535,7 +535,7 @@ export class GridExample { // you can also change some editor options // not all Editors supports this functionality, so far only these Editors are supported: AutoComplete, Date, Single/Multiple Select if (columnDef.id === 'completed') { - this.compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select.js, show filter in dropdown + this.compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select-vanilla, show filter in dropdown this.compositeEditorInstance.changeFormEditorOption('product', 'minLength', 3); // autocomplete, change minLength char to type this.compositeEditorInstance.changeFormEditorOption('finish', 'displayDateMin', 'today'); // vanilla calendar date picker, change minDate to today } diff --git a/frameworks/angular-slickgrid/docs/column-functionalities/editors.md b/frameworks/angular-slickgrid/docs/column-functionalities/editors.md index 449a27af35..24f2903504 100644 --- a/frameworks/angular-slickgrid/docs/column-functionalities/editors.md +++ b/frameworks/angular-slickgrid/docs/column-functionalities/editors.md @@ -282,7 +282,7 @@ this.columnDefinitions = [ collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], model: Editors.singleSelect, elementOptions: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } diff --git a/frameworks/angular-slickgrid/docs/column-functionalities/editors/select-dropdown-editor.md b/frameworks/angular-slickgrid/docs/column-functionalities/editors/select-dropdown-editor.md index 9e791eaad1..911884149c 100644 --- a/frameworks/angular-slickgrid/docs/column-functionalities/editors/select-dropdown-editor.md +++ b/frameworks/angular-slickgrid/docs/column-functionalities/editors/select-dropdown-editor.md @@ -6,11 +6,11 @@ - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix) - [Collection Label Render HTML](#collection-label-render-html) - [Collection Change Watch](#collection-watch) - - [`multiple-select.js` Options](#multiple-selectjs-options) + - [`multiple-select-vanilla` Options](#multiple-selectjs-options) - See the [Editors - Wiki](../Editors.md) for more general info about Editors (validators, event handlers, ...) ## Select Editors -The library ships with two select editors: `singleSelectEditor` and the `multipleSelectEditor`. Both support the [multiple-select](https://github.com/ghiscoding/multiple-select-adapted/blob/master/src/multiple-select.js) library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the [collectionFormatter](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/collectionFormatter.ts). +The library ships with two select editors: `singleSelectEditor` and the `multipleSelectEditor`. Both support the [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the [collectionFormatter](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/collectionFormatter.ts). We use an external lib named [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla). @@ -37,7 +37,7 @@ this.columnDefinitions = [ ``` ### Editor Options (`MultipleSelectOption` interface) -All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```ts editor: { @@ -190,8 +190,8 @@ this.columnDefinitions = [ ]; ``` -### `multiple-select.js` Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +### `multiple-select-vanilla` Options +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/lib` folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -217,7 +217,7 @@ this.columnDefinitions = [ collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], model: Editors.singleSelect, elementOptions: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } diff --git a/frameworks/angular-slickgrid/docs/column-functionalities/filters/select-filter.md b/frameworks/angular-slickgrid/docs/column-functionalities/filters/select-filter.md index fe7b55f7d7..f135a24310 100644 --- a/frameworks/angular-slickgrid/docs/column-functionalities/filters/select-filter.md +++ b/frameworks/angular-slickgrid/docs/column-functionalities/filters/select-filter.md @@ -16,7 +16,7 @@ - [Collection Async Load](#collection-async-load) - [Collection Lazy Load](#collection-lazy-load) - [Collection Watch](#collection-watch) -- [`multiple-select.js` Options](#multiple-selectjs-options) +- [`multiple-select-vanilla` Options](#multiple-selectjs-options) - [Filter Options (`MultipleSelectOption` interface)](#filter-options-multipleselectoption-interface) - [Display shorter selected label text](#display-shorter-selected-label-text) - [Query against a different field](#query-against-another-field-property) @@ -33,7 +33,7 @@ Multiple Select (dropdown) filter is useful when we want to filter the grid 1 or We use an external lib named [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla). #### Note -For this filter to work you will need to add [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) to your project. This is a customized version of the original (thought all the original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/dist/lib` folder. This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) +For this filter to work you will need to add [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) to your project. This is a customized version of the original (thought all the original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/dist/lib` folder. This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. - `okButtonText` was also added for locale (i18n) - `offsetLeft` option was added to make it possible to offset the dropdown. By default it is set to 0 and is aligned to the left of the select element. This option is particularly helpful when used as the last right column, not to fall off the screen. @@ -576,7 +576,7 @@ this.columnDefinitions = [ ``` ### Filter Options (`MultipleSelectOption` interface) -All the available options that can be provided as filter `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your filter `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as filter `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your filter `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```ts filter: { @@ -599,8 +599,8 @@ this.gridOptions = { } ``` -### Multiple-select.js Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your filter `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +### multiple-select-vanilla Options +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your filter `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why we are using a fork [ghiscoding/multiple-select-modified](https://github.com/ghiscoding/multiple-select-modified) folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -629,7 +629,7 @@ this.columnDefinitions = [ model: Filters.singleSelect, // previously known as `filterOptions` for < 9.0 options: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } as MultipleSelectOption diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/composite-editor-modal.md b/frameworks/angular-slickgrid/docs/grid-functionalities/composite-editor-modal.md index b9ea239db2..ce3c9cf392 100644 --- a/frameworks/angular-slickgrid/docs/grid-functionalities/composite-editor-modal.md +++ b/frameworks/angular-slickgrid/docs/grid-functionalities/composite-editor-modal.md @@ -476,7 +476,7 @@ export class GridExample { // you can also change some editor options // not all Editors supports this functionality, so far only these Editors are supported: AutoComplete, Date, Single/Multiple Select if (columnDef.id === 'completed') { - this.compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select.js, show filter in dropdown + this.compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select-vanilla, show filter in dropdown this.compositeEditorInstance.changeFormEditorOption('product', 'minLength', 3); // autocomplete, change minLength char to type this.compositeEditorInstance.changeFormEditorOption('finish', 'displayDateMin', 'today'); } diff --git a/frameworks/aurelia-slickgrid/docs/column-functionalities/editors.md b/frameworks/aurelia-slickgrid/docs/column-functionalities/editors.md index 7367e15d22..28217c5797 100644 --- a/frameworks/aurelia-slickgrid/docs/column-functionalities/editors.md +++ b/frameworks/aurelia-slickgrid/docs/column-functionalities/editors.md @@ -231,7 +231,7 @@ this.columnDefinitions = [ ``` ### Editor Options (`MultipleSelectOption` interface) -All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```ts editor: { @@ -351,8 +351,8 @@ this.columnDefinitions = [ ]; ``` -### `multiple-select.js` Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +### `multiple-select-vanilla` Options +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit Aurelia-SlickGrid needs, which is why it points to `aurelia-slickgrid/lib` folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -378,7 +378,7 @@ this.columnDefinitions = [ collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], model: Editors.singleSelect, elementOptions: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } diff --git a/frameworks/aurelia-slickgrid/docs/column-functionalities/editors/select-dropdown-editor.md b/frameworks/aurelia-slickgrid/docs/column-functionalities/editors/select-dropdown-editor.md index 493ea40de3..c89db6de90 100644 --- a/frameworks/aurelia-slickgrid/docs/column-functionalities/editors/select-dropdown-editor.md +++ b/frameworks/aurelia-slickgrid/docs/column-functionalities/editors/select-dropdown-editor.md @@ -6,11 +6,11 @@ - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix) - [Collection Label Render HTML](#collection-label-render-html) - [Collection Change Watch](#collection-watch) - - [`multiple-select.js` Options](#multiple-selectjs-options) + - [`multiple-select-vanilla` Options](#multiple-selectjs-options) - See the [Editors - Wiki](../Editors.md) for more general info about Editors (validators, event handlers, ...) ## Select Editors -The library ships with two select editors: `singleSelectEditor` and the `multipleSelectEditor`. Both support the [multiple-select](https://github.com/ghiscoding/multiple-select-adapted/blob/master/src/multiple-select.js) library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the [collectionFormatter](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/collectionFormatter.ts). +The library ships with two select editors: `singleSelectEditor` and the `multipleSelectEditor`. Both support the [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the [collectionFormatter](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/collectionFormatter.ts). We use an external lib named [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla). @@ -37,7 +37,7 @@ this.columnDefinitions = [ ``` ### Editor Options (`MultipleSelectOption` interface) -All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```ts editor: { @@ -191,7 +191,7 @@ this.columnDefinitions = [ ``` ### `multiple-select-vanilla.js` Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/lib` folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -217,7 +217,7 @@ this.columnDefinitions = [ collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], model: Editors.singleSelect, elementOptions: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } diff --git a/frameworks/aurelia-slickgrid/docs/column-functionalities/filters/custom-filter.md b/frameworks/aurelia-slickgrid/docs/column-functionalities/filters/custom-filter.md index b6a752eff8..0776a2acc5 100644 --- a/frameworks/aurelia-slickgrid/docs/column-functionalities/filters/custom-filter.md +++ b/frameworks/aurelia-slickgrid/docs/column-functionalities/filters/custom-filter.md @@ -13,7 +13,7 @@ You can also create your own Custom Filter with any html/css you want and/or jQu - as mentioned in the description, only html/css and/or jQuery libraries are supported. - this mainly mean that Aurelia templates (Views) are not supported (feel free to contribute). - SlickGrid uses `table-cell` as CSS for it to display a consistent height for each rows (this keeps the same row height/line-height to always be the same). - - all this to say that you might be in a situation were your filter shows in the back of the grid. The best approach to overcome this is to use a modal if you can or if the library support `append to body container`. For example, you can see that `multiple-select.js` support a `container` and is needed for the filter to work as can be seen in the `multipleSelectFilter.ts` + - all this to say that you might be in a situation were your filter shows in the back of the grid. The best approach to overcome this is to use a modal if you can or if the library support `append to body container`. For example, you can see that `multiple-select-vanilla` support a `container` and is needed for the filter to work as can be seen in the `multipleSelectFilter.ts` ### How to use Custom Filter? 1. You first need to create a `class` using the [Filter interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/filter.interface.ts). Make sure to create all necessary public properties and functions. diff --git a/frameworks/aurelia-slickgrid/docs/column-functionalities/filters/select-filter.md b/frameworks/aurelia-slickgrid/docs/column-functionalities/filters/select-filter.md index 9e42c14bed..e879ef9c0f 100644 --- a/frameworks/aurelia-slickgrid/docs/column-functionalities/filters/select-filter.md +++ b/frameworks/aurelia-slickgrid/docs/column-functionalities/filters/select-filter.md @@ -16,7 +16,7 @@ - [Collection Async Load](#collection-async-load) - [Collection Lazy Load](#collection-lazy-load) - [Collection Watch](#collection-watch) -- [`multiple-select.js` Options](#multiple-selectjs-options) +- [`multiple-select-vanilla` Options](#multiple-selectjs-options) - [Filter Options (`MultipleSelectOption` interface)](#filter-options-multipleselectoption-interface) - [Display shorter selected label text](#display-shorter-selected-label-text) - [Query against a different field](#query-against-another-field-property) @@ -36,7 +36,7 @@ Multiple Select (dropdown) filter is useful when we want to filter the grid 1 or We use an external lib named [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla). #### Note -For this filter to work you will need to add [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) to your project. This is a customized version of the original (thought all the original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/dist/lib` folder. This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) +For this filter to work you will need to add [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) to your project. This is a customized version of the original (thought all the original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/dist/lib` folder. This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. - `okButtonText` was also added for locale (i18n) - `offsetLeft` option was added to make it possible to offset the dropdown. By default it is set to 0 and is aligned to the left of the select element. This option is particularly helpful when used as the last right column, not to fall off the screen. @@ -579,7 +579,7 @@ this.columnDefinitions = [ ``` ### Filter Options (`MultipleSelectOption` interface) -All the available options that can be provided as filter `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your filter `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as filter `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your filter `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```ts filter: { @@ -602,8 +602,8 @@ this.gridOptions = { } ``` -### Multiple-select.js Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your filter `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +### multiple-select-vanilla Options +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your filter `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why we are using a fork [ghiscoding/multiple-select-modified](https://github.com/ghiscoding/multiple-select-modified) folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -632,7 +632,7 @@ this.columnDefinitions = [ model: Filters.singleSelect, // previously known as `filterOptions` for < 9.0 options: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } as MultipleSelectOption diff --git a/frameworks/aurelia-slickgrid/docs/grid-functionalities/composite-editor-modal.md b/frameworks/aurelia-slickgrid/docs/grid-functionalities/composite-editor-modal.md index fbd5d12c06..c7f58c74d6 100644 --- a/frameworks/aurelia-slickgrid/docs/grid-functionalities/composite-editor-modal.md +++ b/frameworks/aurelia-slickgrid/docs/grid-functionalities/composite-editor-modal.md @@ -476,7 +476,7 @@ export class GridExample { // you can also change some editor options // not all Editors supports this functionality, so far only these Editors are supported: AutoComplete, Date, Single/Multiple Select if (columnDef.id === 'completed') { - this.compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select.js, show filter in dropdown + this.compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select-vanilla, show filter in dropdown this.compositeEditorInstance.changeFormEditorOption('product', 'minLength', 3); // autocomplete, change minLength char to type this.compositeEditorInstance.changeFormEditorOption('finish', 'displayDateMin', 'today'); // calendar picker, change minDate to today } diff --git a/frameworks/slickgrid-react/docs/column-functionalities/editors.md b/frameworks/slickgrid-react/docs/column-functionalities/editors.md index 7259a22607..3a3a2a6789 100644 --- a/frameworks/slickgrid-react/docs/column-functionalities/editors.md +++ b/frameworks/slickgrid-react/docs/column-functionalities/editors.md @@ -13,7 +13,7 @@ - [Collection Async Load](#collection-async-load) - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix) - [Collection Label Render HTML](#collection-label-render-html) - - [`multiple-select.js` Options](#multiple-selectjs-options) + - [`multiple-select-vanilla` Options](#multiple-selectjs-options) - [Editor Options](#editor-options) - [Validators](#validators) - [Custom Validator](#custom-validator) @@ -226,7 +226,7 @@ const columnDefinitions = [ ``` ### Editor Options (`MultipleSelectOption` interface) -All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/lib/src/interfaces/multipleSelectOption.interface.ts) and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/lib/src/interfaces/multipleSelectOption.interface.ts) and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```tsx editor: { @@ -349,8 +349,8 @@ const columnDefinitions = [ ]; ``` -### `multiple-select.js` Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +### `multiple-select-vanilla` Options +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit slickgrid-react needs, which is why it points to `slickgrid-react/lib` folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -376,7 +376,7 @@ const columnDefinitions = [ collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], model: Editors.singleSelect, elementOptions: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } diff --git a/frameworks/slickgrid-react/docs/column-functionalities/editors/select-dropdown-editor.md b/frameworks/slickgrid-react/docs/column-functionalities/editors/select-dropdown-editor.md index 9de1f4207e..a81c26710c 100644 --- a/frameworks/slickgrid-react/docs/column-functionalities/editors/select-dropdown-editor.md +++ b/frameworks/slickgrid-react/docs/column-functionalities/editors/select-dropdown-editor.md @@ -6,11 +6,11 @@ - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix) - [Collection Label Render HTML](#collection-label-render-html) - [Collection Change Watch](#collection-watch) - - [`multiple-select.js` Options](#multiple-selectjs-options) + - [`multiple-select-vanilla` Options](#multiple-selectjs-options) - See the [Editors - Wiki](../Editors.md) for more general info about Editors (validators, event handlers, ...) ## Select Editors -The library ships with two select editors: `singleSelectEditor` and the `multipleSelectEditor`. Both support the [multiple-select](https://github.com/ghiscoding/multiple-select-adapted/blob/master/src/multiple-select.js) library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the [collectionFormatter](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/collectionFormatter.ts). +The library ships with two select editors: `singleSelectEditor` and the `multipleSelectEditor`. Both support the [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the [collectionFormatter](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/collectionFormatter.ts). We use an external lib named [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla). @@ -37,7 +37,7 @@ const columnDefinitions = [ ``` ### Editor Options (`MultipleSelectOption` interface) -All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```ts editor: { @@ -191,7 +191,7 @@ const columnDefinitions = [ ``` ### `multiple-select-vanilla.js` Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/lib` folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -217,7 +217,7 @@ const columnDefinitions = [ collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], model: Editors.singleSelect, elementOptions: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } diff --git a/frameworks/slickgrid-react/docs/column-functionalities/filters/custom-filter.md b/frameworks/slickgrid-react/docs/column-functionalities/filters/custom-filter.md index 561137e42c..efab5a435e 100644 --- a/frameworks/slickgrid-react/docs/column-functionalities/filters/custom-filter.md +++ b/frameworks/slickgrid-react/docs/column-functionalities/filters/custom-filter.md @@ -12,7 +12,7 @@ You can also create your own Custom Filter with any html/css you want to use. Re - as mentioned in the description, only html/css and/or JS libraries are supported. - this mainly mean that React templates (Views) are not supported (feel free to contribute). - SlickGrid uses `table-cell` as CSS for it to display a consistent height for each rows (this keeps the same row height/line-height to always be the same). - - all this to say that you might be in a situation were your filter shows in the back of the grid. The best approach to overcome this is to use a modal if you can or if the library support `append to body container`. For example, you can see that `multiple-select.js` support a `container` and is needed for the filter to work as can be seen in the [multipleSelectFilter.ts](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/filters/multipleSelectFilter.ts#L26) + - all this to say that you might be in a situation were your filter shows in the back of the grid. The best approach to overcome this is to use a modal if you can or if the library support `append to body container`. For example, you can see that `multiple-select-vanilla` support a `container` and is needed for the filter to work as can be seen in the [multipleSelectFilter.ts](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/filters/multipleSelectFilter.ts#L26) ### How to use Custom Filter? 1. You first need to create a `class` using the [Filter interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/models/filter.interface.ts). Make sure to create all necessary public properties and functions. diff --git a/frameworks/slickgrid-react/docs/column-functionalities/filters/select-filter.md b/frameworks/slickgrid-react/docs/column-functionalities/filters/select-filter.md index 1a0ab4e6f1..37b65bf7cf 100644 --- a/frameworks/slickgrid-react/docs/column-functionalities/filters/select-filter.md +++ b/frameworks/slickgrid-react/docs/column-functionalities/filters/select-filter.md @@ -16,7 +16,7 @@ - [Collection Async Load](#collection-async-load) - [Collection Lazy Load](#collection-lazy-load) - [Collection Watch](#collection-watch) -- [`multiple-select.js` Options](#multiple-selectjs-options) +- [`multiple-select-vanilla` Options](#multiple-selectjs-options) - [Filter Options (`MultipleSelectOption` interface)](#filter-options-multipleselectoption-interface) - [Display shorter selected label text](#display-shorter-selected-label-text) - [Query against a different field](#query-against-another-field-property) @@ -36,7 +36,7 @@ Multiple Select (dropdown) filter is useful when we want to filter the grid 1 or We use an external lib named [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla). #### Note -For this filter to work you will need to add [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) to your project. This is a customized version of the original (thought all the original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/dist/lib` folder. This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) +For this filter to work you will need to add [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) to your project. This is a customized version of the original (thought all the original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/dist/lib` folder. This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. - `okButtonText` was also added for locale (i18n) - `offsetLeft` option was added to make it possible to offset the dropdown. By default it is set to 0 and is aligned to the left of the select element. This option is particularly helpful when used as the last right column, not to fall off the screen. @@ -601,7 +601,7 @@ const columnDefinitions = [ ``` ### Filter Options (`MultipleSelectOption` interface) -All the available options that can be provided as filter `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your filter `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as filter `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your filter `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```ts filter: { @@ -624,8 +624,8 @@ const gridOptions = { } ``` -### Multiple-select.js Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your filter `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +### multiple-select-vanilla Options +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your filter `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why we are using a fork [ghiscoding/multiple-select-modified](https://github.com/ghiscoding/multiple-select-modified) folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -653,7 +653,7 @@ const columnDefinitions = [ collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], model: Filters.singleSelect, options: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } as MultipleSelectOption diff --git a/frameworks/slickgrid-react/docs/grid-functionalities/composite-editor-modal.md b/frameworks/slickgrid-react/docs/grid-functionalities/composite-editor-modal.md index 7df59bd2c8..54497a33fc 100644 --- a/frameworks/slickgrid-react/docs/grid-functionalities/composite-editor-modal.md +++ b/frameworks/slickgrid-react/docs/grid-functionalities/composite-editor-modal.md @@ -481,7 +481,7 @@ const Example: React.FC = () => { // you can also change some editor options // not all Editors supports this functionality, so far only these Editors are supported: AutoComplete, Date, Single/Multiple Select if (columnDef.id === 'completed') { - compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select.js, show filter in dropdown + compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select-vanilla, show filter in dropdown compositeEditorInstance.changeFormEditorOption('product', 'minLength', 3); // autocomplete, change minLength char to type this.compositeEditorInstance.changeFormEditorOption('finish', 'displayDateMin', 'today'); // calendar picker, change minDate to today } diff --git a/frameworks/slickgrid-vue/docs/column-functionalities/editors.md b/frameworks/slickgrid-vue/docs/column-functionalities/editors.md index dbab3c3d27..511b3fe4c8 100644 --- a/frameworks/slickgrid-vue/docs/column-functionalities/editors.md +++ b/frameworks/slickgrid-vue/docs/column-functionalities/editors.md @@ -13,7 +13,7 @@ - [Collection Async Load](#collection-async-load) - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix) - [Collection Label Render HTML](#collection-label-render-html) - - [`multiple-select.js` Options](#multiple-selectjs-options) + - [`multiple-select-vanilla` Options](#multiple-selectjs-options) - [Editor Options](#editor-options) - [Validators](#validators) - [Custom Validator](#custom-validator) @@ -256,7 +256,7 @@ function defineGrid() { ``` ### Editor Options (`MultipleSelectOption` interface) -All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```ts editor: { @@ -417,7 +417,7 @@ function defineGrid() { collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], model: Editors.singleSelect, elementOptions: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } diff --git a/frameworks/slickgrid-vue/docs/column-functionalities/editors/select-dropdown-editor.md b/frameworks/slickgrid-vue/docs/column-functionalities/editors/select-dropdown-editor.md index ec1f631ff7..22d767d68a 100644 --- a/frameworks/slickgrid-vue/docs/column-functionalities/editors/select-dropdown-editor.md +++ b/frameworks/slickgrid-vue/docs/column-functionalities/editors/select-dropdown-editor.md @@ -6,11 +6,11 @@ - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix) - [Collection Label Render HTML](#collection-label-render-html) - [Collection Change Watch](#collection-watch) - - [`multiple-select.js` Options](#multiple-selectjs-options) + - [`multiple-select-vanilla` Options](#multiple-selectjs-options) - See the [Editors - Wiki](../Editors.md) for more general info about Editors (validators, event handlers, ...) ## Select Editors -The library ships with two select editors: `singleSelectEditor` and the `multipleSelectEditor`. Both support the [multiple-select](https://github.com/ghiscoding/multiple-select-adapted/blob/master/src/multiple-select.js) library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the [collectionFormatter](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/collectionFormatter.ts). +The library ships with two select editors: `singleSelectEditor` and the `multipleSelectEditor`. Both support the [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the [collectionFormatter](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/collectionFormatter.ts). We use an external lib named [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla). @@ -38,7 +38,7 @@ columnDefinitions.value = [ ``` ### Editor Options (`MultipleSelectOption` interface) -All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as editor `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your editor `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```ts editor: { @@ -195,7 +195,7 @@ columnDefinitions.value = [ ``` ### `multiple-select-vanilla.js` Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your editor `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/lib` folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -221,7 +221,7 @@ columnDefinitions.value = [ collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }], model: Editors.singleSelect, elementOptions: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } diff --git a/frameworks/slickgrid-vue/docs/column-functionalities/filters/custom-filter.md b/frameworks/slickgrid-vue/docs/column-functionalities/filters/custom-filter.md index 63ec606e33..91f3c98070 100644 --- a/frameworks/slickgrid-vue/docs/column-functionalities/filters/custom-filter.md +++ b/frameworks/slickgrid-vue/docs/column-functionalities/filters/custom-filter.md @@ -12,7 +12,7 @@ You can also create your own Custom Filter with any html/css you want to use. Vu - as mentioned in the description, only html/css and/or JS libraries are supported. - this mainly mean that Vue templates (Views) are not supported (feel free to contribute). - SlickGrid uses `table-cell` as CSS for it to display a consistent height for each rows (this keeps the same row height/line-height to always be the same). - - all this to say that you might be in a situation were your filter shows in the back of the grid. The best approach to overcome this is to use a modal if you can or if the library support `append to body container`. For example, you can see that `multiple-select.js` support a `container` and is needed for the filter to work as can be seen in the [multipleSelectFilter.ts](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/filters/multipleSelectFilter.ts#L26) + - all this to say that you might be in a situation were your filter shows in the back of the grid. The best approach to overcome this is to use a modal if you can or if the library support `append to body container`. For example, you can see that `multiple-select-vanilla` support a `container` and is needed for the filter to work as can be seen in the [multipleSelectFilter.ts](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/filters/multipleSelectFilter.ts#L26) ### How to use Custom Filter? 1. You first need to create a `class` using the [Filter interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/models/filter.interface.ts). Make sure to create all necessary public properties and functions. diff --git a/frameworks/slickgrid-vue/docs/column-functionalities/filters/select-filter.md b/frameworks/slickgrid-vue/docs/column-functionalities/filters/select-filter.md index f0955109e0..fbc65424de 100644 --- a/frameworks/slickgrid-vue/docs/column-functionalities/filters/select-filter.md +++ b/frameworks/slickgrid-vue/docs/column-functionalities/filters/select-filter.md @@ -16,7 +16,7 @@ - [Collection Async Load](#collection-async-load) - [Collection Lazy Load](#collection-lazy-load) - [Collection Watch](#collection-watch) -- [`multiple-select.js` Options](#multiple-selectjs-options) +- [`multiple-select-vanilla` Options](#multiple-selectjs-options) - [Filter Options (`MultipleSelectOption` interface)](#filter-options-multipleselectoption-interface) - [Display shorter selected label text](#display-shorter-selected-label-text) - [Query against a different field](#query-against-another-field-property) @@ -36,7 +36,7 @@ Multiple Select (dropdown) filter is useful when we want to filter the grid 1 or We use an external lib named [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla). #### Note -For this filter to work you will need to add [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) to your project. This is a customized version of the original (thought all the original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/dist/lib` folder. This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) +For this filter to work you will need to add [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) to your project. This is a customized version of the original (thought all the original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why it points to `slickgrid-universal/dist/lib` folder. This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. - `okButtonText` was also added for locale (i18n) - `offsetLeft` option was added to make it possible to offset the dropdown. By default it is set to 0 and is aligned to the left of the select element. This option is particularly helpful when used as the last right column, not to fall off the screen. @@ -590,7 +590,7 @@ columnDefinitions.value = [ ``` ### Filter Options (`MultipleSelectOption` interface) -All the available options that can be provided as filter `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your filter `options` to that interface to make sure that you use only valid options of the `multiple-select.js` library. +All the available options that can be provided as filter `options` to your column definitions can be found under this [MultipleSelectOption](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts) interface and you should cast your filter `options` to that interface to make sure that you use only valid options of the `multiple-select-vanilla` library. ```ts filter: { @@ -613,8 +613,8 @@ gridOptions.value = { } ``` -### Multiple-select.js Options -You can use any options from [Multiple-Select.js](http://wenzhixin.net.cn/p/multiple-select) and add them to your filter `options` property. However please note that this is a customized version of the original (all original [lib options](http://wenzhixin.net.cn/p/multiple-select/docs/) are available so you can still consult the original site for all options). +### multiple-select-vanilla Options +You can use any options from [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) and add them to your filter `options` property. However please note that this is a customized version of the original (all original [lib options](https://ghiscoding.github.io/multiple-select-vanilla/) are available so you can still consult the original site for all options). Couple of small options were added to suit SlickGrid-Universal needs, which is why we are using a fork [ghiscoding/multiple-select-modified](https://github.com/ghiscoding/multiple-select-modified) folder (which is our customized version of the original). This lib is required if you plan to use `multipleSelect` or `singleSelect` Filters. What was customized to (compare to the original) is the following: - `okButton` option was added to add an OK button for simpler closing of the dropdown after selecting multiple options. @@ -643,7 +643,7 @@ columnDefinitions.value = [ model: Filters.singleSelect, // previously known as `filterOptions` for < 9.0 options: { - // add any multiple-select.js options (from original or custom version) + // add any multiple-select-vanilla options (from original or custom version) autoAdjustDropPosition: false, // by default set to True, but you can disable it position: 'top' } as MultipleSelectOption diff --git a/frameworks/slickgrid-vue/docs/grid-functionalities/composite-editor-modal.md b/frameworks/slickgrid-vue/docs/grid-functionalities/composite-editor-modal.md index 8a8e367454..94aa193282 100644 --- a/frameworks/slickgrid-vue/docs/grid-functionalities/composite-editor-modal.md +++ b/frameworks/slickgrid-vue/docs/grid-functionalities/composite-editor-modal.md @@ -492,7 +492,7 @@ function handleOnCompositeEditorChange(event) { // you can also change some editor options // not all Editors supports this functionality, so far only these Editors are supported: AutoComplete, Date, Single/Multiple Select if (columnDef.id === 'completed') { - compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select.js, show filter in dropdown + compositeEditorInstance.changeFormEditorOption('percentComplete', 'filter', true); // multiple-select-vanilla, show filter in dropdown compositeEditorInstance.changeFormEditorOption('product', 'minLength', 3); // autocomplete, change minLength char to type compositeEditorInstance.changeFormEditorOption('finish', 'displayDateMin', 'today'); } diff --git a/packages/common/src/editors/editors.index.ts b/packages/common/src/editors/editors.index.ts index 2f52419da0..7038a8958b 100644 --- a/packages/common/src/editors/editors.index.ts +++ b/packages/common/src/editors/editors.index.ts @@ -37,13 +37,13 @@ export const Editors: Record = { */ longText: LongTextEditor, - /** Multiple Select editor (which uses 3rd party lib "multiple-select.js") */ + /** Multiple Select editor (which uses 3rd party lib "multiple-select-vanilla") */ multipleSelect: MultipleSelectEditor, /** Editor with an input of type Password (note that only the text shown in the UI will be masked, the editor value is still plain text) */ password: InputPasswordEditor, - /** Single Select editor (which uses 3rd party lib "multiple-select.js") */ + /** Single Select editor (which uses 3rd party lib "multiple-select-vanilla") */ singleSelect: SingleSelectEditor, /** Slider Editor using an input of type "range" */ diff --git a/packages/common/src/filter-conditions/collectionSearchFilterCondition.ts b/packages/common/src/filter-conditions/collectionSearchFilterCondition.ts index 18aa3c1690..896519f4d9 100644 --- a/packages/common/src/filter-conditions/collectionSearchFilterCondition.ts +++ b/packages/common/src/filter-conditions/collectionSearchFilterCondition.ts @@ -3,7 +3,7 @@ import { testFilterCondition } from './filterUtilities.js'; /** * Execute filter condition check on each cell. - * This is used only by the Select Single/Multiple Filter which uses the "multiple-select.js" 3rd party lib which always provide values as strings + * This is used only by the Select Single/Multiple Filter which uses the "multiple-select-vanilla" 3rd party lib which always provide values as strings */ export const executeCollectionSearchFilterCondition: FilterCondition = (options: FilterConditionOption) => { // multiple-select will always return text, so we should make our cell values text as well diff --git a/packages/common/src/filters/filters.index.ts b/packages/common/src/filters/filters.index.ts index a5cd78576b..baedbc387c 100644 --- a/packages/common/src/filters/filters.index.ts +++ b/packages/common/src/filters/filters.index.ts @@ -58,10 +58,10 @@ export const Filters: Record = { /** Default Filter, input type text filter */ inputText: InputFilter, - /** Multiple Select filter, which uses 3rd party lib "multiple-select.js" */ + /** Multiple Select filter, which uses 3rd party lib "multiple-select-vanilla" */ multipleSelect: MultipleSelectFilter, - /** Single Select filter, which uses 3rd party lib "multiple-select.js" */ + /** Single Select filter, which uses 3rd party lib "multiple-select-vanilla" */ singleSelect: SingleSelectFilter, /** Slider Filter (single value) */ From 9b4839910bf5e0ea055a43b58629d8e35372a10a Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 18:00:00 -0500 Subject: [PATCH 16/24] chore: add slot renderer demo for all frameworks and improve types --- .prettierignore | 4 +- .../src/examples/slickgrid/example51.html | 75 ++ .../src/examples/slickgrid/example51.scss | 144 ++++ .../src/examples/slickgrid/example51.ts | 606 +++++++++++++ demos/aurelia/src/my-app.ts | 1 + .../aurelia/test/cypress/e2e/example51.cy.ts | 382 ++++++++ demos/react/src/examples/slickgrid/App.tsx | 165 ++-- .../src/examples/slickgrid/Example51.tsx | 689 +++++++++++++++ .../src/examples/slickgrid/example51.scss | 144 ++++ demos/react/test/cypress/e2e/example51.cy.ts | 382 ++++++++ demos/vanilla/src/examples/example40.ts | 27 +- demos/vue/src/components/Example51.vue | 813 ++++++++++++++++++ demos/vue/src/router/index.ts | 154 ++-- demos/vue/test/cypress/e2e/example51.cy.ts | 382 ++++++++ docs/menu-slots.md | 27 +- .../angular-slickgrid/docs/menu-slots.md | 27 +- .../src/demos/app-routing.module.ts | 1 + .../src/demos/app.component.html | 3 + .../demos/examples/example51.component.html | 62 ++ .../demos/examples/example51.component.scss | 144 ++++ .../src/demos/examples/example51.component.ts | 609 +++++++++++++ .../test/cypress/e2e/example51.cy.ts | 382 ++++++++ .../aurelia-slickgrid/docs/menu-slots.md | 27 +- frameworks/slickgrid-react/docs/menu-slots.md | 27 +- frameworks/slickgrid-vue/docs/menu-slots.md | 27 +- .../src/interfaces/menuItem.interface.ts | 2 +- .../src/interfaces/menuOption.interface.ts | 3 +- test/cypress/e2e/example40.cy.ts | 6 +- 28 files changed, 5085 insertions(+), 230 deletions(-) create mode 100644 demos/aurelia/src/examples/slickgrid/example51.html create mode 100644 demos/aurelia/src/examples/slickgrid/example51.scss create mode 100644 demos/aurelia/src/examples/slickgrid/example51.ts create mode 100644 demos/aurelia/test/cypress/e2e/example51.cy.ts create mode 100644 demos/react/src/examples/slickgrid/Example51.tsx create mode 100644 demos/react/src/examples/slickgrid/example51.scss create mode 100644 demos/react/test/cypress/e2e/example51.cy.ts create mode 100644 demos/vue/src/components/Example51.vue create mode 100644 demos/vue/test/cypress/e2e/example51.cy.ts create mode 100644 frameworks/angular-slickgrid/src/demos/examples/example51.component.html create mode 100644 frameworks/angular-slickgrid/src/demos/examples/example51.component.scss create mode 100644 frameworks/angular-slickgrid/src/demos/examples/example51.component.ts create mode 100644 frameworks/angular-slickgrid/test/cypress/e2e/example51.cy.ts diff --git a/.prettierignore b/.prettierignore index a61667e120..8f569d1b18 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,4 +2,6 @@ _variables.scss _variables-theme-material.scss _variables-theme-salesforce.scss -**/test/vitest-coverage/*.* \ No newline at end of file +**/test/vitest-coverage/*.* +demos/vue/src/router/index.ts +demos/react/src/examples/slickgrid/App.tsx \ No newline at end of file diff --git a/demos/aurelia/src/examples/slickgrid/example51.html b/demos/aurelia/src/examples/slickgrid/example51.html new file mode 100644 index 0000000000..5255b2d467 --- /dev/null +++ b/demos/aurelia/src/examples/slickgrid/example51.html @@ -0,0 +1,75 @@ +
+

+ Example 51: Menus with Slots + + + code + + + + +

+ +
+
+ + Menu Slots Demo with Custom Renderer +
+

+ Click on the menu buttons to see the new single slot functionality working across all menu types (Header Menu, Cell + Menu, Context Menu, Grid Menu): +

+

+ Note: The demo focuses on the custom rendering capability via slotRenderer and + defaultMenuItemRenderer, which work across all menu plugins (SlickHeaderMenu, SlickCellMenu, SlickContextMenu, + SlickGridMenu). Also note that the keyboard shortcuts displayed in the menus (e.g., Alt+↑, F5) are for + demo purposes only and do not actually trigger any actions. + +

+
+ +
+
+ + + + +
+
+ +
+ + +
+
diff --git a/demos/aurelia/src/examples/slickgrid/example51.scss b/demos/aurelia/src/examples/slickgrid/example51.scss new file mode 100644 index 0000000000..539ad2ecd2 --- /dev/null +++ b/demos/aurelia/src/examples/slickgrid/example51.scss @@ -0,0 +1,144 @@ +body { + --slick-menu-item-height: 30px; + --slick-menu-line-height: 30px; + --slick-column-picker-item-height: 28px; + --slick-column-picker-line-height: 28px; + --slick-menu-item-border-radius: 4px; + --slick-menu-item-hover-border: 1px solid #148dff; + --slick-column-picker-item-hover-color: #fff; + --slick-column-picker-item-border-radius: 4px; + --slick-column-picker-item-hover-border: 1px solid #148dff; + --slick-menu-item-hover-color: #fff; + --slick-tooltip-background-color: #4c4c4c; + --slick-tooltip-color: #fff; + --slick-tooltip-font-size: 14px; + .slick-cell-menu, + .slick-context-menu, + .slick-grid-menu, + .slick-header-menu { + .slick-menu-item:hover:not(.slick-menu-item-disabled) { + color: #0a34b5; + } + } + .slick-menu-footer { + padding: 4px 6px; + border-top: 1px solid #c0c0c0; + } +} + +kbd { + background-color: #eee; + color: #202020; +} +.key-hint { + background: #eee; + border: 1px solid #ccc; + border-radius: 2px; + padding: 2px 4px; + font-size: 10px; + margin-left: 10px; + white-space: nowrap; + display: inline-flex; + align-items: center; + height: 20px; + + &.beta, + &.danger, + &.warn { + color: white; + font-size: 8px; + font-weight: bold; + } + &.beta { + background: #4444ff; + border: 1px solid #5454ff; + } + + &.danger { + background: #ff4444; + border: 1px solid #fb5a5a; + } + + &.warn { + background: #ff9800; + border: 1px solid #fba321; + } +} + +.edit-cell { + // background: #eee; + border: 1px solid #ccc; + border-radius: 2px; + padding: 2px 4px; + font-size: 10px; + margin-left: 10px; + display: inline-flex; + align-items: center; + height: 18px; +} + +.export-timestamp { + background-color: #4c4c4c; + color: #fff; + padding: 8px; + border-radius: 4px; + position: absolute; + z-index: 999999; +} + +.advanced-export-icon, +.edit-cell-icon, +.recalc-icon { + width: 20px; + height: 20px; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 4px; + transition: transform 0.2s; + color: white; + font-size: 10px; +} +.advanced-export-icon { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} +.edit-cell-icon { + background: linear-gradient(135deg, #00c853 0%, #64dd17 100%); +} +.recalc-icon { + background: linear-gradient(135deg, #c800a3 0%, #a31189 100%); +} + +.round-tag { + width: 6px; + height: 6px; + border-radius: 50%; + display: inline-block; + background: #44ff44; + box-shadow: 0 0 4px #44ff44; + margin-left: 10px; +} + +.menu-item { + display: flex; + align-items: center; + flex: 1; + justify-content: space-between; + + .menu-item-label.warn { + flex: 1; + color: #f09000; + } +} +.menu-item-icon { + margin-right: 4px; + font-size: 18px; + &.warn { + color: #ff9800; + } +} + +.menu-item-label { + flex: 1; +} diff --git a/demos/aurelia/src/examples/slickgrid/example51.ts b/demos/aurelia/src/examples/slickgrid/example51.ts new file mode 100644 index 0000000000..693f2be89b --- /dev/null +++ b/demos/aurelia/src/examples/slickgrid/example51.ts @@ -0,0 +1,606 @@ +import { format as tempoFormat } from '@formkit/tempo'; +import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; +import { + Aggregators, + createDomElement, + Filters, + Formatters, + SortComparers, + SortDirectionNumber, + type AureliaGridInstance, + type Column, + type GridOption, + type Grouping, + type MenuCommandItem, +} from 'aurelia-slickgrid'; +import './example51.scss'; + +const NB_ITEMS = 2000; + +interface ReportItem { + id: number; + title: string; + duration: number; + cost: number; + percentComplete: number; + start: Date; + finish: Date; + action?: string; +} + +export class Example51 { + aureliaGrid!: AureliaGridInstance; + columnDefinitions: Column[] = []; + gridOptions!: GridOption; + dataset!: ReportItem[]; + hideSubTitle = false; + + constructor() { + // define the grid options & columns and then create the grid itself + this.defineGrid(); + } + + attached() { + // mock some data (different in each dataset) + this.dataset = this.loadData(NB_ITEMS); + } + + aureliaGridReady(aureliaGrid: AureliaGridInstance) { + this.aureliaGrid = aureliaGrid; + } + + defineGrid() { + this.columnDefinitions = [ + { + id: 'title', + name: 'Title', + field: 'title', + sortable: true, + filterable: true, + minWidth: 100, + // Demo: Header Menu with Slot - complete custom HTML with keyboard shortcuts + header: { + menu: { + commandItems: [ + { + command: 'sort-asc', + title: 'Sort Ascending', + positionOrder: 50, + // Slot renderer replaces entire menu item content (can be HTML string or native DOM elements) + slotRenderer: (cmdItem) => ` +
+ + ${cmdItem.title} + Alt+↑ +
+ `, + }, + { + command: 'sort-desc', + title: 'Sort Descending', + positionOrder: 51, + // Slot renderer using native DOM elements + slotRenderer: () => { + const menuItemElm = createDomElement('div', { className: 'menu-item' }); + const iconElm = createDomElement('i', { className: 'mdi mdi-sort-descending menu-item-icon' }); + const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: 'Sort Descending' }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'Alt+↓' }); + menuItemElm.appendChild(iconElm); + menuItemElm.appendChild(menuItemLabelElm); + menuItemElm.appendChild(kbdElm); + return menuItemElm; + }, + }, + ], + }, + }, + }, + { + id: 'duration', + name: 'Duration', + field: 'duration', + sortable: true, + filterable: true, + minWidth: 100, + // Demo: Header Menu with Slot - showing badge and status dot + header: { + menu: { + commandItems: [ + { + command: 'column-resize-by-content', + title: 'Resize by Content', + positionOrder: 47, + // Slot renderer with badge + slotRenderer: () => ` +
+ + Resize by Content + NEW +
+ `, + }, + { divider: true, command: '', positionOrder: 48 }, + { + command: 'sort-asc', + title: 'Sort Ascending', + iconCssClass: 'mdi mdi-sort-ascending', + positionOrder: 50, + }, + { + command: 'sort-desc', + title: 'Sort Descending', + iconCssClass: 'mdi mdi-sort-descending', + positionOrder: 51, + }, + { divider: true, command: '', positionOrder: 52 }, + { + command: 'clear-sort', + title: 'Remove Sort', + positionOrder: 58, + // Slot renderer with status indicator + slotRenderer: () => ` +
+ + Remove Sort + +
+ `, + }, + ], + }, + }, + }, + { + id: 'start', + name: 'Start', + field: 'start', + sortable: true, + formatter: Formatters.dateIso, + filterable: true, + filter: { model: Filters.compoundDate }, + minWidth: 100, + }, + { + id: 'finish', + name: 'Finish', + field: 'finish', + sortable: true, + formatter: Formatters.dateIso, + filterable: true, + filter: { model: Filters.dateRange }, + minWidth: 100, + }, + { + id: 'cost', + name: 'Cost', + field: 'cost', + width: 90, + sortable: true, + filterable: true, + formatter: Formatters.dollar, + // Demo: Header Menu with Slot - showing slotRenderer with callback (item, args) + header: { + menu: { + commandItems: [ + { + command: 'custom-action', + title: 'Advanced Export', + // Demo: Native HTMLElement with event listeners using slotRenderer (full DOM control) + slotRenderer: (cmdItem) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const containerDiv = createDomElement('div', { className: 'menu-item' }); + const iconDiv = createDomElement('div', { className: 'advanced-export-icon', textContent: '📊' }); + const textSpan = createDomElement('span', { textContent: cmdItem.title || '', style: { flex: '1' } }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'Ctrl+E' }); + containerDiv.appendChild(iconDiv); + containerDiv.appendChild(textSpan); + containerDiv.appendChild(kbdElm); + + // Add native event listeners for hover effects + containerDiv.addEventListener('mouseover', () => { + iconDiv.style.transform = 'scale(1.15)'; + iconDiv.style.background = 'linear-gradient(135deg, #d8dcef 0%, #ffffff 100%)'; + containerDiv.parentElement!.style.backgroundColor = '#854685'; + containerDiv.parentElement!.title = `📈 Export timestamp: ${tempoFormat(new Date(), 'YYYY-MM-DD hh:mm:ss a')}`; + containerDiv.style.color = 'white'; + containerDiv.querySelector('.key-hint')!.style.color = 'black'; + }); + containerDiv.addEventListener('mouseout', () => { + iconDiv.style.transform = 'scale(1)'; + iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; + containerDiv.parentElement!.style.backgroundColor = 'white'; + containerDiv.style.color = 'black'; + document.querySelector('.export-timestamp')?.remove(); + }); + + return containerDiv; + }, + action: () => { + alert('Custom export action triggered!'); + }, + }, + { divider: true, command: '' }, + { + command: 'filter-column', + title: 'Filter Column', + // Slot renderer with status indicator and beta badge + slotRenderer: () => ` +
+ + Filter Column + BETA +
+ `, + }, + ], + }, + }, + }, + { + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + sortable: true, + filterable: true, + type: 'number', + filter: { model: Filters.slider, operator: '>=' }, + // Demo: Header Menu with Slot - showing interactive element (checkbox) + header: { + menu: { + commandItems: [ + { + command: 'recalc', + title: 'Recalculate', + iconCssClass: 'mdi mdi-refresh', + slotRenderer: () => ` +
+
%
+ Recalculate +
+ `, + }, + ], + }, + }, + }, + { + id: 'action', + name: 'Action', + field: 'action', + width: 70, + minWidth: 70, + maxWidth: 70, + cssClass: 'justify-center flex', + formatter: () => + `
`, + excludeFromExport: true, + // Demo: Cell Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) + cellMenu: { + hideCloseButton: false, + commandTitle: 'Cell Actions', + // Demo: Menu-level default renderer that applies to all items unless overridden + defaultMenuItemRenderer: (cmdItem) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : '◦'} + ${cmdItem.title} +
+ `; + }, + commandItems: [ + { + command: 'copy-cell', + title: 'Copy Cell Value', + iconCssClass: 'mdi mdi-content-copy', + action: (_e, args) => { + console.log('Copy cell value:', args.dataContext[args.column.field]); + alert(`Copied: ${args.dataContext[args.column.field]}`); + }, + }, + 'divider', + { + command: 'export-row', + title: 'Export Row', + iconCssClass: 'mdi mdi-download', + action: (_e, args) => { + console.log('Export row:', args.dataContext); + alert(`Export row #${args.dataContext.id}`); + }, + }, + { + command: 'export', + title: 'Export', + iconCssClass: 'mdi mdi-download', + commandItems: [ + { + command: 'export-excel', + title: 'Export as Excel', + iconCssClass: 'mdi mdi-file-excel-outline text-success', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to Excel`); + }, + }, + { + command: 'export-csv', + title: 'Export as CSV', + iconCssClass: 'mdi mdi-file-document-outline', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to CSV`); + }, + }, + { + command: 'export-pdf', + title: 'Export as PDF', + iconCssClass: 'mdi mdi-file-pdf-outline text-red', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to PDF`); + }, + }, + ], + }, + { divider: true, command: '' }, + { + command: 'edit-row', + title: 'Edit Row', + // Individual slotRenderer overrides the defaultMenuItemRenderer + slotRenderer: (_item, args) => ` +
+
✎
+ Edit Row #${args.dataContext.id} +
+ `, + action: (_e, args) => { + console.log('Edit row:', args.dataContext); + alert(`Edit row #${args.dataContext.id}`); + }, + }, + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: (_event, args) => { + const dataContext = args.dataContext; + if (confirm(`Do you really want to delete row (${args.row! + 1}) with "${dataContext.title}"`)) { + this.aureliaGrid?.gridService.deleteItemById(dataContext.id); + } + }, + }, + ], + }, + }, + ]; + + this.gridOptions = { + autoResize: { + container: '#demo-container', + }, + enableAutoResize: true, + enableCellNavigation: true, + enableFiltering: true, + enableSorting: true, + enableGrouping: true, + + // Header Menu with slots (already configured in columns above) + enableHeaderMenu: true, + headerMenu: { + hideColumnHideCommand: false, + // Demo: Menu-level default renderer for all header menu items + defaultMenuItemRenderer: (cmdItem) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
+ `; + }, + }, + + // Cell Menu with slots (configured in the Action column above) + enableCellMenu: true, + + // Context Menu with slot examples + enableContextMenu: true, + contextMenu: { + // build your command items list + // spread built-in commands and optionally filter/sort them however you want + commandListBuilder: (builtInItems) => { + // commandItems.sort((a, b) => (a === 'divider' || b === 'divider' ? 0 : a.title! > b.title! ? -1 : 1)); + return [ + // filter commands if you want + // ...builtInItems.filter((x) => x !== 'divider' && x.command !== 'copy' && x.command !== 'clear-grouping'), + { + command: 'edit-cell', + title: 'Edit Cell', + // Demo: Individual slotRenderer overrides the menu's defaultMenuItemRenderer + slotRenderer: (cmdItem) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const containerDiv = createDomElement('div', { className: 'menu-item' }); + const iconDiv = createDomElement('div', { className: 'edit-cell-icon', textContent: '✎' }); + const textSpan = createDomElement('span', { textContent: cmdItem.title || '', style: { flex: '1' } }); + const kbdElm = createDomElement('kbd', { className: 'edit-cell', textContent: 'F2' }); + containerDiv.appendChild(iconDiv); + containerDiv.appendChild(textSpan); + containerDiv.appendChild(kbdElm); + + // Native event listeners for interactive effects + containerDiv.addEventListener('mouseover', () => { + iconDiv.style.transform = 'rotate(15deg) scale(1.1)'; + iconDiv.style.boxShadow = '0 2px 8px rgba(0,200,83,0.4)'; + }); + containerDiv.addEventListener('mouseout', () => { + iconDiv.style.transform = 'rotate(0deg) scale(1)'; + iconDiv.style.boxShadow = 'none'; + }); + + return containerDiv; + }, + action: () => alert('Edit cell'), + }, + ...builtInItems, + { divider: true, command: '' }, + { + command: 'export', + title: 'Export', + iconCssClass: 'mdi mdi-download', + commandItems: [ + { + command: 'export-excel', + title: 'Export as Excel', + iconCssClass: 'mdi mdi-file-excel-outline text-success', + action: () => alert('Export to Excel'), + }, + { + command: 'export-csv', + title: 'Export as CSV', + iconCssClass: 'mdi mdi-file-document-outline', + action: () => alert('Export to CSV'), + }, + { + command: 'export-pdf', + title: 'Export as PDF', + iconCssClass: 'mdi mdi-file-pdf-outline text-danger', + action: () => alert('Export to PDF'), + }, + ], + }, + { divider: true, command: '' }, + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: () => alert('Delete row'), + }, + ] as Array; + }, + // Demo: Menu-level default renderer for context menu items + defaultMenuItemRenderer: (cmdItem) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
+ `; + }, + }, + + // Grid Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) + enableGridMenu: true, + gridMenu: { + // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) + defaultMenuItemRenderer: (cmdItem) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
+ `; + }, + commandListBuilder: (builtInItems) => { + return [ + ...builtInItems, + { divider: true, command: '' }, + { + command: 'export-excel', + title: 'Export to Excel', + iconCssClass: 'mdi mdi-file-excel-outline', + action: () => alert('Export to Excel'), + }, + { + command: 'export-csv', + title: 'Export to CSV', + iconCssClass: 'mdi mdi-download', + // Individual slotRenderer overrides the defaultMenuItemRenderer for this item + slotRenderer: (cmdItem) => ` +
+ + ${cmdItem.title} + CUSTOM +
+ `, + action: () => alert('Export to CSV'), + }, + { + command: 'refresh-data', + title: 'Refresh Data', + iconCssClass: 'mdi mdi-refresh', + // Demo: slotRenderer with keyboard shortcut + slotRenderer: (cmdItem) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const menuItemElm = createDomElement('div', { className: 'menu-item' }); + const iconElm = createDomElement('i', { className: `${cmdItem.iconCssClass} menu-item-icon` }); + const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: cmdItem.title || '' }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'F5' }); + menuItemElm.appendChild(iconElm); + menuItemElm.appendChild(menuItemLabelElm); + menuItemElm.appendChild(kbdElm); + return menuItemElm; + }, + action: () => alert('Refresh data'), + }, + ] as Array; + }, + }, + + // tooltip plugin + externalResources: [new SlickCustomTooltip()], + customTooltip: { + observeAllTooltips: true, + }, + }; + } + + clearGrouping() { + this.aureliaGrid?.dataView?.setGrouping([]); + } + + collapseAllGroups() { + this.aureliaGrid?.dataView?.collapseAllGroups(); + } + + expandAllGroups() { + this.aureliaGrid?.dataView?.expandAllGroups(); + } + + groupByDuration() { + // you need to manually add the sort icon(s) in UI + this.aureliaGrid?.slickGrid?.setSortColumns([{ columnId: 'duration', sortAsc: true }]); + this.aureliaGrid?.dataView?.setGrouping({ + getter: 'duration', + formatter: (g) => `Duration: ${g.value} (${g.count} items)`, + comparer: (a, b) => SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc), + aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')], + aggregateCollapsed: false, + lazyTotalsCalculation: true, + } as Grouping); + this.aureliaGrid?.slickGrid?.invalidate(); // invalidate all rows and re-render + } + + loadData(count: number): ReportItem[] { + const tmpData: ReportItem[] = []; + for (let i = 0; i < count; i++) { + const randomDuration = Math.round(Math.random() * 100); + const randomYear = 2000 + Math.floor(Math.random() * 10); + const randomMonth = Math.floor(Math.random() * 11); + const randomDay = Math.floor(Math.random() * 29); + const randomPercent = Math.round(Math.random() * 100); + + tmpData[i] = { + id: i, + title: 'Task ' + i, + duration: randomDuration, + cost: Math.round(Math.random() * 10000) / 100, + percentComplete: randomPercent, + start: new Date(randomYear, randomMonth, randomDay), + finish: new Date(randomYear, randomMonth + 1, randomDay), + }; + } + return tmpData; + } + + toggleSubTitle() { + this.hideSubTitle = !this.hideSubTitle; + const action = this.hideSubTitle ? 'add' : 'remove'; + document.querySelector('.subtitle')?.classList[action]('hidden'); + this.aureliaGrid.resizerService.resizeGrid(0); + } +} diff --git a/demos/aurelia/src/my-app.ts b/demos/aurelia/src/my-app.ts index 933828aa59..b2bd69762c 100644 --- a/demos/aurelia/src/my-app.ts +++ b/demos/aurelia/src/my-app.ts @@ -57,6 +57,7 @@ const myRoutes: Routeable[] = [ { path: 'example48', component: () => import('./examples/slickgrid/example48.js'), title: '48- Hybrid Selection Model' }, { path: 'example49', component: () => import('./examples/slickgrid/example49.js'), title: '49- Spreadsheet Drag-Fill' }, { path: 'example50', component: () => import('./examples/slickgrid/example50.js'), title: '50- Master/Detail Grids' }, + { path: 'example51', component: () => import('./examples/slickgrid/example51.js'), title: '51- Menus with Slots' }, { path: 'home', component: () => import('./home-page.js'), title: 'Home' }, ]; @route({ diff --git a/demos/aurelia/test/cypress/e2e/example51.cy.ts b/demos/aurelia/test/cypress/e2e/example51.cy.ts new file mode 100644 index 0000000000..80e5148c97 --- /dev/null +++ b/demos/aurelia/test/cypress/e2e/example51.cy.ts @@ -0,0 +1,382 @@ +import { format } from '@formkit/tempo'; + +describe('Example 51 - Menus with Slots', () => { + const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Action']; + + it('should display Example title', () => { + cy.visit(`${Cypress.config('baseUrl')}/example51`); + cy.get('h2').should('contain', 'Example 51: Menus with Slots'); + }); + + it('should have exact column titles in the grid', () => { + cy.get('#grid51') + .find('.slick-header-columns') + .children() + .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); + }); + + it('should open Context Menu hover "Duration" column and expect built-in and custom items listed in specific order', () => { + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick({ force: true }); + + // 1st item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.edit-cell-icon').contains('✎'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Edit Cell'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('kbd.edit-cell').contains('F2'); + + // icon should rotate while hovering + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseover'); + cy.wait(175); // wait for rotation + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item .edit-cell-icon') + .invoke('css', 'transform') // Get the transform property + .then((cssTransform) => { + const transformValue = cssTransform as unknown as string; // Cast to string + cy.getTransformValue(transformValue, true, 'rotate').then((rotationAngle) => { + expect(rotationAngle).to.approximately(13, 15); // 15 degrees rotation + }); + }); + + // 2nd item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item').find('i.mdi-content-copy').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item').find('span.menu-item-label').contains('Copy'); + + // 3rd item - divider + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(2)').should('have.class', 'slick-menu-item-divider'); + + // 4th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Clear all Grouping'); + + // 5th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item').find('i.mdi-arrow-collapse').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item') + .find('span.menu-item-label') + .contains('Collapse all Groups'); + + // 6th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('i.mdi-arrow-expand').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Expand all Groups'); + + // 7th item - divider + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(6)').should('have.class', 'slick-menu-item-divider'); + + // 8th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-download').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Export'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7)').find('.sub-item-chevron').should('exist'); + + // 9th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(8)').should('have.class', 'slick-menu-item-divider'); + + // 10th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(9) .menu-item') + .find('i.mdi-delete.text-danger') + .should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(9) .menu-item') + .find('span.menu-item-label') + .contains('Delete Row'); + }); + + it('should open Export->Excel context sub-menu', () => { + const subCommands1 = ['Export as Excel', 'Export as CSV', 'Export as PDF']; + + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('[data-row="0"] > .slick-cell:nth(2)').should('contain', '0'); + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick({ force: true }); + + cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains(/^Export$/) + .trigger('mouseover'); + + cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-command-list') + .should('exist') + .find('.slick-menu-item .menu-item') + .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); + + // click different sub-menu + cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains('Export as Excel') + .should('exist') + .click() + .then(() => expect(stub.getCall(0)).to.be.calledWith('Export to Excel')); + + cy.get('.slick-submenu').should('have.length', 0); + }); + + it('should open Header Menu from the "Title" column and expect some commands to have keyboard hints on the right side', () => { + cy.get('.slick-header-column:nth(0)').trigger('mouseover', { force: true }); + cy.get('.slick-header-column:nth(0)').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('i.mdi-arrow-expand-horizontal') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('span.menu-item-label') + .contains('Resize by Content'); + + // 2nd item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('i.mdi-sort-ascending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('span.menu-item-label') + .contains('Sort Ascending'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('kbd.key-hint').contains('Alt+↑'); + + // 4th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-sort-descending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Sort Descending'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('kbd.key-hint').contains('Alt+↓'); + + // 5th item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('i.mdi-filter-remove-outline') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Remove Filter'); + + // 7th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('i.mdi-sort-variant-off').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('span.menu-item-label') + .contains('Remove Sort'); + + // 8th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Hide Column'); + }); + + it('should open Header Menu from the "Duration" column and expect some commands to have tags on the right side', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover', { force: true }); + cy.get('.slick-header-column:nth(1)').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('i.mdi-arrow-expand-horizontal') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('span.menu-item-label') + .contains('Resize by Content'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('span.key-hint.danger').contains('NEW'); + + // 2nd item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('i.mdi-sort-ascending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('span.menu-item-label') + .contains('Sort Ascending'); + + // 4th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-sort-descending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Sort Descending'); + + // 5th item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('i.mdi-filter-remove-outline') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Remove Filter'); + + // 7th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('i.mdi-sort-variant-off').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('span.menu-item-label') + .contains('Remove Sort'); + + // 8th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Hide Column'); + }); + + it('should open Header Menu from the "Cost" column and expect first item to have a dynamic tooltip timestamp when hovering', () => { + cy.get('#grid51').find('.slick-header-column:nth(4)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.advanced-export-icon').contains('📊'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').contains('Advanced Export'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('kbd.key-hint').contains('Ctrl+E'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').should( + 'have.css', + 'background-color', + 'rgba(0, 0, 0, 0)' + ); + + // icon should scale up + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseover'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item .advanced-export-icon') + .invoke('css', 'transform') + .then((cssTransform) => { + const transformValue = cssTransform as unknown as string; // Cast to string + cy.getTransformValue(transformValue, true, 'scale').then((scaleValue) => { + expect(scaleValue).to.be.approximately(1.1, 1.15); // Check the scale value if applied + }); + }); + + const today = format(new Date(), 'YYYY-MM-DD'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').should( + 'have.css', + 'background-color', + 'rgb(133, 70, 133)' + ); + cy.get('.slick-custom-tooltip').contains(`📈 Export timestamp: ${today}`); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseout'); + cy.get('.slick-custom-tooltip').should('not.exist'); + cy.get('body').click(); + }); + + it('should open Action Menu from last column "Action" column and expect custom items listed in specific order', () => { + cy.get('[data-row="1"] > .slick-cell:nth(6)').click(); + cy.get('.slick-command-header.with-title.with-close').contains('Cell Actions'); + + // 1st item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.mdi-content-copy').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Copy Cell Value'); + + // 2nd item - divider + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('.mdi-download').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item span').contains('Export Row'); + + // 4th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-download').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('span.menu-item-label').contains('Export'); + + // 5th item - divider + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('.edit-cell-icon').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item .edit-cell-icon').contains('✎'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5)').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)'); + + // 7th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('.mdi-delete.text-danger').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Delete Row'); + }); + + it('should open Export->Excel cell sub-menu', () => { + const subCommands1 = ['Export as Excel', 'Export as CSV', 'Export as PDF']; + + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('.slick-cell-menu.slick-menu-level-0 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains(/^Export$/) + .trigger('mouseover'); + + cy.get('.slick-cell-menu.slick-menu-level-1 .slick-menu-command-list') + .should('exist') + .find('.slick-menu-item .menu-item') + .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); + + // click different sub-menu + cy.get('.slick-cell-menu.slick-menu-level-1 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains('Export as Excel') + .should('exist') + .click() + .then(() => expect(stub.getCall(0)).to.be.calledWith('Export row #1 to Excel')); + + cy.get('.slick-submenu').should('have.length', 0); + }); + + it('should open Grid Menu and expect built-in commands first then custom items listed in specific order', () => { + cy.get('.slick-grid-menu-button.mdi-menu').click(); + + // 1st item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('.mdi-filter-remove-outline.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Clear all Filters'); + + // 2nd item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item') + .find('.mdi-sort-variant-off.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item span').contains('Clear all Sorting'); + + // 3rd item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('.mdi-flip-vertical.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item span').contains('Toggle Filter Row'); + + // 4th item - divider + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(3)').should('have.class', 'slick-menu-item-divider'); + + // 5th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item') + .find('.mdi-file-excel-outline.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item span').contains('Export to Excel'); + + // 6th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('.mdi-download.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item span').contains('Export to CSV'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('span.key-hint.warn').contains('CUSTOM'); + + // 7th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('.mdi-refresh.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Refresh Data'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('kbd.key-hint').contains('F5'); + }); + + it('should sort ascending "Duration" even though the header menu item was override without an action callback', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').should('contain', 'Sort Ascending').click(); + + cy.get('[data-row=0]').children('.slick-cell:nth(1)').should('contain', '0'); + cy.get('[data-row=1]').children('.slick-cell:nth(1)').should('contain', '0'); + cy.get('[data-row=2]').children('.slick-cell:nth(1)').should('contain', '0'); + }); + + it('should sort descending "Duration" even though the header menu item was override without an action callback', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').should('contain', 'Sort Descending').click(); + + cy.get('[data-row=0]').children('.slick-cell:nth(1)').should('contain', '100'); + cy.get('[data-row=1]').children('.slick-cell:nth(1)').should('contain', '100'); + cy.get('[data-row=2]').children('.slick-cell:nth(1)').should('contain', '100'); + }); +}); diff --git a/demos/react/src/examples/slickgrid/App.tsx b/demos/react/src/examples/slickgrid/App.tsx index ac5a4381e0..b18c83f16e 100644 --- a/demos/react/src/examples/slickgrid/App.tsx +++ b/demos/react/src/examples/slickgrid/App.tsx @@ -1,106 +1,58 @@ -import { useEffect } from 'react'; +import { Suspense, lazy, useEffect } from 'react'; import { Routes as BaseRoutes, Link, Navigate, Route, useLocation } from 'react-router'; import { NavBar } from '../../NavBar.js'; -import Example1 from './Example1.js'; -import Example2 from './Example2.js'; -import Example3 from './Example3.js'; -import Example4 from './Example4.js'; -import Example5 from './Example5.js'; -import Example6 from './Example6.js'; -import Example7 from './Example7.js'; -import Example8 from './Example8.js'; -import Example9 from './Example9.js'; -import Example10 from './Example10.js'; -import Example11 from './Example11.js'; -import Example12 from './Example12.js'; -import Example13 from './Example13.js'; -import Example14 from './Example14.js'; -import Example15 from './Example15.js'; -import Example16 from './Example16.js'; -import Example17 from './Example17.js'; -import Example18 from './Example18.js'; -import Example19 from './Example19.js'; -import Example20 from './Example20.js'; -import Example21 from './Example21.js'; -import Example22 from './Example22.js'; -import Example23 from './Example23.js'; -import Example24 from './Example24.js'; -import Example25 from './Example25.js'; -import Example27 from './Example27.js'; -import Example28 from './Example28.js'; -import Example29 from './Example29.js'; -import Example30 from './Example30.js'; -import Example31 from './Example31.js'; -import Example32 from './Example32.js'; -import Example33 from './Example33.js'; -import Example34 from './Example34.js'; -import Example35 from './Example35.js'; -import Example36 from './Example36.js'; -import Example37 from './Example37.js'; -import Example38 from './Example38.js'; -import Example39 from './Example39.js'; -import Example40 from './Example40.js'; -import Example41 from './Example41.js'; -import Example42 from './Example42.js'; -import Example43 from './Example43.js'; -import Example44 from './Example44.js'; -import Example45 from './Example45.js'; -import Example46 from './Example46.js'; -import Example47 from './Example47.js'; -import Example48 from './Example48.js'; -import Example49 from './Example49.js'; -import Example50 from './Example50.js'; -const routes: Array<{ path: string; route: string; component: any; title: string }> = [ - { path: 'example1', route: '/example1', component: , title: '1- Basic Grid / 2 Grids' }, - { path: 'example2', route: '/example2', component: , title: '2- Formatters' }, - { path: 'example3', route: '/example3', component: , title: '3- Editors / Delete' }, - { path: 'example4', route: '/example4', component: , title: '4- Client Side Sort/Filter' }, - { path: 'example5', route: '/example5', component: , title: '5- Backend OData Service' }, - { path: 'example6', route: '/example6', component: , title: '6- Backend GraphQL Service' }, - { path: 'example7', route: '/example7', component: , title: '7- Header Button Plugin' }, - { path: 'example8', route: '/example8', component: , title: '8- Header Menu Plugin' }, - { path: 'example9', route: '/example9', component: , title: '9- Grid Menu Control' }, - { path: 'example10', route: '/example10', component: , title: '10- Row Selection / 2 Grids' }, - { path: 'example11', route: '/example11', component: , title: '11- Add/Update Grid Item' }, - { path: 'example12', route: '/example12', component: , title: '12- Localization (i18n)' }, - { path: 'example13', route: '/example13', component: , title: '13- Grouping & Aggregators' }, - { path: 'example14', route: '/example14', component: , title: '14- Column Span & Header Grouping' }, - { path: 'example15', route: '/example15', component: , title: '15- Grid State & Local Storage' }, - { path: 'example16', route: '/example16', component: , title: '16- Row Move Plugin' }, - { path: 'example17', route: '/example17', component: , title: '17- Create Grid from CSV' }, - { path: 'example18', route: '/example18', component: , title: '18- Draggable Grouping' }, - { path: 'example19', route: '/example19', component: , title: '19- Row Detail View' }, - { path: 'example20', route: '/example20', component: , title: '20- Pinned Columns/Rows' }, - { path: 'example21', route: '/example21', component: , title: '21- Grid AutoHeight (full height)' }, - { path: 'example22', route: '/example22', component: , title: '22- with Bootstrap Tabs' }, - { path: 'example23', route: '/example23', component: , title: '23- Filter by Range of Values' }, - { path: 'example24', route: '/example24', component: , title: '24- Cell & Context Menu' }, - { path: 'example25', route: '/example25', component: , title: '25- GraphQL without Pagination' }, - { path: 'example27', route: '/example27', component: , title: '27- Tree Data (Parent/Child)' }, - { path: 'example28', route: '/example28', component: , title: '28- Tree Data (Hierarchical set)' }, - { path: 'example29', route: '/example29', component: , title: '29- Grid with header and footer slots' }, - { path: 'example30', route: '/example30', component: , title: '30- Composite Editor Modal' }, - { path: 'example31', route: '/example31', component: , title: '31- Backend OData with RxJS' }, - { path: 'example32', route: '/example32', component: , title: '32- Columns Resize by Content' }, - { path: 'example33', route: '/example33', component: , title: '33- Regular & Custom Tooltip' }, - { path: 'example34', route: '/example34', component: , title: '34- Real-Time Trading Platform' }, - { path: 'example35', route: '/example35', component: , title: '35- Row Based Editing' }, - { path: 'example36', route: '/example36', component: , title: '36- Excel Export Formulas' }, - { path: 'example37', route: '/example37', component: , title: '37- Footer Totals Row' }, - { path: 'example38', route: '/example38', component: , title: '38- Infinite Scroll with OData' }, - { path: 'example39', route: '/example39', component: , title: '39- Infinite Scroll with GraphQL' }, - { path: 'example40', route: '/example40', component: , title: '40- Infinite Scroll from JSON data' }, - { path: 'example41', route: '/example41', component: , title: '41- Drag & Drop' }, - { path: 'example42', route: '/example42', component: , title: '42- Custom Pagination' }, - { path: 'example43', route: '/example43', component: , title: '43- Colspan/Rowspan (timesheets)' }, - { path: 'example44', route: '/example44', component: , title: '44- Colspan/Rowspan (large data)' }, - { path: 'example45', route: '/example45', component: , title: '45- Row Detail with inner Grid' }, - { path: 'example46', route: '/example46', component: , title: '46- Tree Data with Lazy Loading' }, - { path: 'example47', route: '/example47', component: , title: '47- Row Detail + Grouping' }, - { path: 'example48', route: '/example48', component: , title: '48- Hybrid Selection Model' }, - { path: 'example49', route: '/example49', component: , title: '49- Spreadsheet Drag-Fill' }, - { path: 'example50', route: '/example50', component: , title: '50- Master/Detail Grids' }, +const routes: Array<{ path: string; route: string; component: React.ComponentType; title: string }> = [ + { path: 'example1', route: '/example1', component: lazy(() => import('./Example1.js')), title: '1- Basic Grid / 2 Grids' }, + { path: 'example2', route: '/example2', component: lazy(() => import('./Example2.js')), title: '2- Formatters' }, + { path: 'example3', route: '/example3', component: lazy(() => import('./Example3.js')), title: '3- Editors / Delete' }, + { path: 'example4', route: '/example4', component: lazy(() => import('./Example4.js')), title: '4- Client Side Sort/Filter' }, + { path: 'example5', route: '/example5', component: lazy(() => import('./Example5.js')), title: '5- Backend OData Service' }, + { path: 'example6', route: '/example6', component: lazy(() => import('./Example6.js')), title: '6- Backend GraphQL Service' }, + { path: 'example7', route: '/example7', component: lazy(() => import('./Example7.js')), title: '7- Header Button Plugin' }, + { path: 'example8', route: '/example8', component: lazy(() => import('./Example8.js')), title: '8- Header Menu Plugin' }, + { path: 'example9', route: '/example9', component: lazy(() => import('./Example9.js')), title: '9- Grid Menu Control' }, + { path: 'example10', route: '/example10', component: lazy(() => import('./Example10.js')), title: '10- Row Selection / 2 Grids' }, + { path: 'example11', route: '/example11', component: lazy(() => import('./Example11.js')), title: '11- Add/Update Grid Item' }, + { path: 'example12', route: '/example12', component: lazy(() => import('./Example12.js')), title: '12- Localization (i18n)' }, + { path: 'example13', route: '/example13', component: lazy(() => import('./Example13.js')), title: '13- Grouping & Aggregators' }, + { path: 'example14', route: '/example14', component: lazy(() => import('./Example14.js')), title: '14- Column Span & Header Grouping' }, + { path: 'example15', route: '/example15', component: lazy(() => import('./Example15.js')), title: '15- Grid State & Local Storage' }, + { path: 'example16', route: '/example16', component: lazy(() => import('./Example16.js')), title: '16- Row Move Plugin' }, + { path: 'example17', route: '/example17', component: lazy(() => import('./Example17.js')), title: '17- Create Grid from CSV' }, + { path: 'example18', route: '/example18', component: lazy(() => import('./Example18.js')), title: '18- Draggable Grouping' }, + { path: 'example19', route: '/example19', component: lazy(() => import('./Example19.js')), title: '19- Row Detail View' }, + { path: 'example20', route: '/example20', component: lazy(() => import('./Example20.js')), title: '20- Pinned Columns/Rows' }, + { path: 'example21', route: '/example21', component: lazy(() => import('./Example21.js')), title: '21- Grid AutoHeight (full height)' }, + { path: 'example22', route: '/example22', component: lazy(() => import('./Example22.js')), title: '22- with Bootstrap Tabs' }, + { path: 'example23', route: '/example23', component: lazy(() => import('./Example23.js')), title: '23- Filter by Range of Values' }, + { path: 'example24', route: '/example24', component: lazy(() => import('./Example24.js')), title: '24- Cell & Context Menu' }, + { path: 'example25', route: '/example25', component: lazy(() => import('./Example25.js')), title: '25- GraphQL without Pagination' }, + { path: 'example27', route: '/example27', component: lazy(() => import('./Example27.js')), title: '27- Tree Data (Parent/Child)' }, + { path: 'example28', route: '/example28', component: lazy(() => import('./Example28.js')), title: '28- Tree Data (Hierarchical set)' }, + { path: 'example29', route: '/example29', component: lazy(() => import('./Example29.js')), title: '29- Grid with header and footer slots' }, + { path: 'example30', route: '/example30', component: lazy(() => import('./Example30.js')), title: '30- Composite Editor Modal' }, + { path: 'example31', route: '/example31', component: lazy(() => import('./Example31.js')), title: '31- Backend OData with RxJS' }, + { path: 'example32', route: '/example32', component: lazy(() => import('./Example32.js')), title: '32- Columns Resize by Content' }, + { path: 'example33', route: '/example33', component: lazy(() => import('./Example33.js')), title: '33- Regular & Custom Tooltip' }, + { path: 'example34', route: '/example34', component: lazy(() => import('./Example34.js')), title: '34- Real-Time Trading Platform' }, + { path: 'example35', route: '/example35', component: lazy(() => import('./Example35.js')), title: '35- Row Based Editing' }, + { path: 'example36', route: '/example36', component: lazy(() => import('./Example36.js')), title: '36- Excel Export Formulas' }, + { path: 'example37', route: '/example37', component: lazy(() => import('./Example37.js')), title: '37- Footer Totals Row' }, + { path: 'example38', route: '/example38', component: lazy(() => import('./Example38.js')), title: '38- Infinite Scroll with OData' }, + { path: 'example39', route: '/example39', component: lazy(() => import('./Example39.js')), title: '39- Infinite Scroll with GraphQL' }, + { path: 'example40', route: '/example40', component: lazy(() => import('./Example40.js')), title: '40- Infinite Scroll from JSON data' }, + { path: 'example41', route: '/example41', component: lazy(() => import('./Example41.js')), title: '41- Drag & Drop' }, + { path: 'example42', route: '/example42', component: lazy(() => import('./Example42.js')), title: '42- Custom Pagination' }, + { path: 'example43', route: '/example43', component: lazy(() => import('./Example43.js')), title: '43- Colspan/Rowspan (timesheets)' }, + { path: 'example44', route: '/example44', component: lazy(() => import('./Example44.js')), title: '44- Colspan/Rowspan (large data)' }, + { path: 'example45', route: '/example45', component: lazy(() => import('./Example45.js')), title: '45- Row Detail with inner Grid' }, + { path: 'example46', route: '/example46', component: lazy(() => import('./Example46.js')), title: '46- Tree Data with Lazy Loading' }, + { path: 'example47', route: '/example47', component: lazy(() => import('./Example47.js')), title: '47- Row Detail + Grouping' }, + { path: 'example48', route: '/example48', component: lazy(() => import('./Example48.js')), title: '48- Hybrid Selection Model' }, + { path: 'example49', route: '/example49', component: lazy(() => import('./Example49.js')), title: '49- Spreadsheet Drag-Fill' }, + { path: 'example50', route: '/example50', component: lazy(() => import('./Example50.js')), title: '50- Master/Detail Grids' }, + { path: 'example51', route: '/example51', component: lazy(() => import('./Example51.js')), title: '51- Menus with Slots' }, ]; export default function Routes() { @@ -138,11 +90,14 @@ export default function Routes() {
- {routes.map((row) => ( - - - - ))} + {routes.map((row) => { + const Component = row.component; + return ( + + Loading...
}>} /> + + ); + })} } />
diff --git a/demos/react/src/examples/slickgrid/Example51.tsx b/demos/react/src/examples/slickgrid/Example51.tsx new file mode 100644 index 0000000000..6f1583af32 --- /dev/null +++ b/demos/react/src/examples/slickgrid/Example51.tsx @@ -0,0 +1,689 @@ +import { format as tempoFormat } from '@formkit/tempo'; +import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; +import React, { useEffect, useRef, useState } from 'react'; +import { + Aggregators, + createDomElement, + Filters, + Formatters, + SlickgridReact, + SortComparers, + SortDirectionNumber, + type Column, + type GridOption, + type Grouping, + type MenuCommandItem, + type SlickgridReactInstance, +} from 'slickgrid-react'; +import './example51.scss'; // provide custom CSS/SASS styling + +const NB_ITEMS = 2000; + +interface ReportItem { + id: number; + title: string; + duration: number; + cost: number; + percentComplete: number; + start: Date; + finish: Date; + action?: string; +} + +const Example51: React.FC = () => { + const [columnDefinitions, setColumnDefinitions] = useState[]>([]); + const [gridOptions, setGridOptions] = useState(); + const [dataset] = useState(loadData(NB_ITEMS)); + const [hideSubTitle, setHideSubTitle] = useState(false); + + const reactGridRef = useRef(null); + + useEffect(() => { + defineGrid(); + }, []); + + function reactGridReady(reactGrid: SlickgridReactInstance) { + reactGridRef.current = reactGrid; + } + + /* Define grid Options and Columns */ + function defineGrid() { + const columnDefinitions: Column[] = [ + { + id: 'title', + name: 'Title', + field: 'title', + sortable: true, + filterable: true, + minWidth: 100, + // Demo: Header Menu with Slot - complete custom HTML with keyboard shortcuts + header: { + menu: { + commandItems: [ + { + command: 'sort-asc', + title: 'Sort Ascending', + positionOrder: 50, + // Slot renderer replaces entire menu item content (can be HTML string or native DOM elements) + slotRenderer: (cmdItem) => ` +
+ + ${cmdItem.title} + Alt+↑ +
+ `, + }, + { + command: 'sort-desc', + title: 'Sort Descending', + positionOrder: 51, + // Slot renderer using native DOM elements + slotRenderer: () => { + const menuItemElm = createDomElement('div', { className: 'menu-item' }); + const iconElm = createDomElement('i', { className: 'mdi mdi-sort-descending menu-item-icon' }); + const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: 'Sort Descending' }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'Alt+↓' }); + menuItemElm.appendChild(iconElm); + menuItemElm.appendChild(menuItemLabelElm); + menuItemElm.appendChild(kbdElm); + return menuItemElm; + }, + }, + ], + }, + }, + }, + { + id: 'duration', + name: 'Duration', + field: 'duration', + sortable: true, + filterable: true, + minWidth: 100, + // Demo: Header Menu with Slot - showing badge and status dot + header: { + menu: { + commandItems: [ + { + command: 'column-resize-by-content', + title: 'Resize by Content', + positionOrder: 47, + // Slot renderer with badge + slotRenderer: () => ` +
+ + Resize by Content + NEW +
+ `, + }, + { divider: true, command: '', positionOrder: 48 }, + { + command: 'sort-asc', + title: 'Sort Ascending', + iconCssClass: 'mdi mdi-sort-ascending', + positionOrder: 50, + }, + { + command: 'sort-desc', + title: 'Sort Descending', + iconCssClass: 'mdi mdi-sort-descending', + positionOrder: 51, + }, + { divider: true, command: '', positionOrder: 52 }, + { + command: 'clear-sort', + title: 'Remove Sort', + positionOrder: 58, + // Slot renderer with status indicator + slotRenderer: () => ` +
+ + Remove Sort + +
+ `, + }, + ], + }, + }, + }, + { + id: 'start', + name: 'Start', + field: 'start', + sortable: true, + formatter: Formatters.dateIso, + filterable: true, + filter: { model: Filters.compoundDate }, + minWidth: 100, + }, + { + id: 'finish', + name: 'Finish', + field: 'finish', + sortable: true, + formatter: Formatters.dateIso, + filterable: true, + filter: { model: Filters.dateRange }, + minWidth: 100, + }, + { + id: 'cost', + name: 'Cost', + field: 'cost', + width: 90, + sortable: true, + filterable: true, + formatter: Formatters.dollar, + // Demo: Header Menu with Slot - showing slotRenderer with callback (item, args) + header: { + menu: { + commandItems: [ + { + command: 'custom-action', + title: 'Advanced Export', + // Demo: Native HTMLElement with event listeners using slotRenderer (full DOM control) + slotRenderer: (cmdItem) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const containerDiv = createDomElement('div', { className: 'menu-item' }); + const iconDiv = createDomElement('div', { className: 'advanced-export-icon', textContent: '📊' }); + const textSpan = createDomElement('span', { textContent: cmdItem.title || '', style: { flex: '1' } }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'Ctrl+E' }); + containerDiv.appendChild(iconDiv); + containerDiv.appendChild(textSpan); + containerDiv.appendChild(kbdElm); + + // Add native event listeners for hover effects + containerDiv.addEventListener('mouseover', () => { + iconDiv.style.transform = 'scale(1.15)'; + iconDiv.style.background = 'linear-gradient(135deg, #d8dcef 0%, #ffffff 100%)'; + containerDiv.parentElement!.style.backgroundColor = '#854685'; + containerDiv.parentElement!.title = `📈 Export timestamp: ${tempoFormat(new Date(), 'YYYY-MM-DD hh:mm:ss a')}`; + containerDiv.style.color = 'white'; + containerDiv.querySelector('.key-hint')!.style.color = 'black'; + }); + containerDiv.addEventListener('mouseout', () => { + iconDiv.style.transform = 'scale(1)'; + iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; + containerDiv.parentElement!.style.backgroundColor = 'white'; + containerDiv.style.color = 'black'; + document.querySelector('.export-timestamp')?.remove(); + }); + + return containerDiv; + }, + action: () => { + alert('Custom export action triggered!'); + }, + }, + { divider: true, command: '' }, + { + command: 'filter-column', + title: 'Filter Column', + // Slot renderer with status indicator and beta badge + slotRenderer: () => ` +
+ + Filter Column + BETA +
+ `, + }, + ], + }, + }, + }, + { + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + sortable: true, + filterable: true, + type: 'number', + filter: { model: Filters.slider, operator: '>=' }, + // Demo: Header Menu with Slot - showing interactive element (checkbox) + header: { + menu: { + commandItems: [ + { + command: 'recalc', + title: 'Recalculate', + iconCssClass: 'mdi mdi-refresh', + slotRenderer: () => ` +
+
%
+ Recalculate +
+ `, + }, + ], + }, + }, + }, + { + id: 'action', + name: 'Action', + field: 'action', + width: 70, + minWidth: 70, + maxWidth: 70, + cssClass: 'justify-center flex', + formatter: () => + `
`, + excludeFromExport: true, + // Demo: Cell Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) + cellMenu: { + hideCloseButton: false, + commandTitle: 'Cell Actions', + // Demo: Menu-level default renderer that applies to all items unless overridden + defaultMenuItemRenderer: (cmdItem) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : '◦'} + ${cmdItem.title} +
+ `; + }, + commandItems: [ + { + command: 'copy-cell', + title: 'Copy Cell Value', + iconCssClass: 'mdi mdi-content-copy', + action: (_e, args) => { + console.log('Copy cell value:', args.dataContext[args.column.field]); + alert(`Copied: ${args.dataContext[args.column.field]}`); + }, + }, + 'divider', + { + command: 'export-row', + title: 'Export Row', + iconCssClass: 'mdi mdi-download', + action: (_e, args) => { + console.log('Export row:', args.dataContext); + alert(`Export row #${args.dataContext.id}`); + }, + }, + { + command: 'export', + title: 'Export', + iconCssClass: 'mdi mdi-download', + commandItems: [ + { + command: 'export-excel', + title: 'Export as Excel', + iconCssClass: 'mdi mdi-file-excel-outline text-success', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to Excel`); + }, + }, + { + command: 'export-csv', + title: 'Export as CSV', + iconCssClass: 'mdi mdi-file-document-outline', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to CSV`); + }, + }, + { + command: 'export-pdf', + title: 'Export as PDF', + iconCssClass: 'mdi mdi-file-pdf-outline text-red', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to PDF`); + }, + }, + ], + }, + { divider: true, command: '' }, + { + command: 'edit-row', + title: 'Edit Row', + // Individual slotRenderer overrides the defaultMenuItemRenderer + slotRenderer: (_item, args) => ` +
+
✎
+ Edit Row #${args.dataContext.id} +
+ `, + action: (_e, args) => { + console.log('Edit row:', args.dataContext); + alert(`Edit row #${args.dataContext.id}`); + }, + }, + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: (_event, args) => { + const dataContext = args.dataContext; + if (confirm(`Do you really want to delete row (${args.row! + 1}) with "${dataContext.title}"`)) { + reactGridRef.current?.gridService.deleteItemById(dataContext.id); + } + }, + }, + ], + }, + }, + ]; + + const gridOptions: GridOption = { + autoResize: { + container: '#demo-container', + }, + enableAutoResize: true, + enableCellNavigation: true, + enableFiltering: true, + enableSorting: true, + enableGrouping: true, + + // Header Menu with slots (already configured in columns above) + enableHeaderMenu: true, + headerMenu: { + hideColumnHideCommand: false, + // Demo: Menu-level default renderer for all header menu items + defaultMenuItemRenderer: (cmdItem) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
+ `; + }, + }, + + // Cell Menu with slots (configured in the Action column above) + enableCellMenu: true, + + // Context Menu with slot examples + enableContextMenu: true, + contextMenu: { + // build your command items list + // spread built-in commands and optionally filter/sort them however you want + commandListBuilder: (builtInItems) => { + // commandItems.sort((a, b) => (a === 'divider' || b === 'divider' ? 0 : a.title! > b.title! ? -1 : 1)); + return [ + // filter commands if you want + // ...builtInItems.filter((x) => x !== 'divider' && x.command !== 'copy' && x.command !== 'clear-grouping'), + { + command: 'edit-cell', + title: 'Edit Cell', + // Demo: Individual slotRenderer overrides the menu's defaultMenuItemRenderer + slotRenderer: (cmdItem) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const containerDiv = createDomElement('div', { className: 'menu-item' }); + const iconDiv = createDomElement('div', { className: 'edit-cell-icon', textContent: '✎' }); + const textSpan = createDomElement('span', { textContent: cmdItem.title || '', style: { flex: '1' } }); + const kbdElm = createDomElement('kbd', { className: 'edit-cell', textContent: 'F2' }); + containerDiv.appendChild(iconDiv); + containerDiv.appendChild(textSpan); + containerDiv.appendChild(kbdElm); + + // Native event listeners for interactive effects + containerDiv.addEventListener('mouseover', () => { + iconDiv.style.transform = 'rotate(15deg) scale(1.1)'; + iconDiv.style.boxShadow = '0 2px 8px rgba(0,200,83,0.4)'; + }); + containerDiv.addEventListener('mouseout', () => { + iconDiv.style.transform = 'rotate(0deg) scale(1)'; + iconDiv.style.boxShadow = 'none'; + }); + + return containerDiv; + }, + action: () => alert('Edit cell'), + }, + ...builtInItems, + { divider: true, command: '' }, + { + command: 'export', + title: 'Export', + iconCssClass: 'mdi mdi-download', + commandItems: [ + { + command: 'export-excel', + title: 'Export as Excel', + iconCssClass: 'mdi mdi-file-excel-outline text-success', + action: () => alert('Export to Excel'), + }, + { + command: 'export-csv', + title: 'Export as CSV', + iconCssClass: 'mdi mdi-file-document-outline', + action: () => alert('Export to CSV'), + }, + { + command: 'export-pdf', + title: 'Export as PDF', + iconCssClass: 'mdi mdi-file-pdf-outline text-danger', + action: () => alert('Export to PDF'), + }, + ], + }, + { divider: true, command: '' }, + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: () => alert('Delete row'), + }, + ] as Array; + }, + // Demo: Menu-level default renderer for context menu items + defaultMenuItemRenderer: (cmdItem) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
+ `; + }, + }, + + // Grid Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) + enableGridMenu: true, + gridMenu: { + // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) + defaultMenuItemRenderer: (cmdItem) => { + return ` +
+ ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
+ `; + }, + commandListBuilder: (builtInItems) => { + return [ + ...builtInItems, + { divider: true, command: '' }, + { + command: 'export-excel', + title: 'Export to Excel', + iconCssClass: 'mdi mdi-file-excel-outline', + action: () => alert('Export to Excel'), + }, + { + command: 'export-csv', + title: 'Export to CSV', + iconCssClass: 'mdi mdi-download', + // Individual slotRenderer overrides the defaultMenuItemRenderer for this item + slotRenderer: (cmdItem) => ` +
+ + ${cmdItem.title || ''} + CUSTOM +
+ `, + action: () => alert('Export to CSV'), + }, + { + command: 'refresh-data', + title: 'Refresh Data', + iconCssClass: 'mdi mdi-refresh', + // Demo: slotRenderer with keyboard shortcut + slotRenderer: (cmdItem) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const menuItemElm = createDomElement('div', { className: 'menu-item' }); + const iconElm = createDomElement('i', { className: `${cmdItem.iconCssClass} menu-item-icon` }); + const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: cmdItem.title || '' }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'F5' }); + menuItemElm.appendChild(iconElm); + menuItemElm.appendChild(menuItemLabelElm); + menuItemElm.appendChild(kbdElm); + return menuItemElm; + }, + action: () => alert('Refresh data'), + }, + ] as Array; + }, + }, + + // tooltip plugin + externalResources: [new SlickCustomTooltip()], + customTooltip: { + observeAllTooltips: true, + }, + }; + + setColumnDefinitions(columnDefinitions); + setGridOptions(gridOptions); + } + + function clearGrouping() { + reactGridRef.current?.dataView?.setGrouping([]); + } + + function collapseAllGroups() { + reactGridRef.current?.dataView?.collapseAllGroups(); + } + + function expandAllGroups() { + reactGridRef.current?.dataView?.expandAllGroups(); + } + + function groupByDuration() { + // you need to manually add the sort icon(s) in UI + reactGridRef.current?.slickGrid?.setSortColumns([{ columnId: 'duration', sortAsc: true }]); + reactGridRef.current?.dataView?.setGrouping({ + getter: 'duration', + formatter: (g) => `Duration: ${g.value} (${g.count} items)`, + comparer: (a, b) => SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc), + aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')], + aggregateCollapsed: false, + lazyTotalsCalculation: true, + } as Grouping); + reactGridRef.current?.slickGrid?.invalidate(); // invalidate all rows and re-render + } + + function loadData(count: number): ReportItem[] { + const tmpData: ReportItem[] = []; + for (let i = 0; i < count; i++) { + const randomDuration = Math.round(Math.random() * 100); + const randomYear = 2000 + Math.floor(Math.random() * 10); + const randomMonth = Math.floor(Math.random() * 11); + const randomDay = Math.floor(Math.random() * 29); + const randomPercent = Math.round(Math.random() * 100); + + tmpData[i] = { + id: i, + title: 'Task ' + i, + duration: randomDuration, + cost: Math.round(Math.random() * 10000) / 100, + percentComplete: randomPercent, + start: new Date(randomYear, randomMonth, randomDay), + finish: new Date(randomYear, randomMonth + 1, randomDay), + }; + } + return tmpData; + } + + function toggleSubTitle() { + const newHideSubTitle = !hideSubTitle; + setHideSubTitle(newHideSubTitle); + const action = newHideSubTitle ? 'add' : 'remove'; + document.querySelector('.subtitle')?.classList[action]('hidden'); + reactGridRef.current?.resizerService.resizeGrid(0); + } + + return !gridOptions ? ( + '' + ) : ( +
+

+ Example 51: Menus with Slots + + see  + + code + + + +

+ +
+
+ + Menu Slots Demo with Custom Renderer +
+

+ Click on the menu buttons to see the new single slot functionality working across all menu types (Header Menu, + Cell Menu, Context Menu, Grid Menu): +

+

+ + Note: The demo focuses on the custom rendering capability via slotRenderer and + defaultMenuItemRenderer, which work across all menu plugins (SlickHeaderMenu, SlickCellMenu, SlickContextMenu, + SlickGridMenu). Also note that the keyboard shortcuts displayed in the menus (e.g., Alt+↑, F5) are for + demo purposes only and do not actually trigger any actions. + +

+
+ +
+
+ + + + +
+
+ +
+ reactGridReady($event.detail)} + /> +
+
+ ); +}; + +export default Example51; diff --git a/demos/react/src/examples/slickgrid/example51.scss b/demos/react/src/examples/slickgrid/example51.scss new file mode 100644 index 0000000000..539ad2ecd2 --- /dev/null +++ b/demos/react/src/examples/slickgrid/example51.scss @@ -0,0 +1,144 @@ +body { + --slick-menu-item-height: 30px; + --slick-menu-line-height: 30px; + --slick-column-picker-item-height: 28px; + --slick-column-picker-line-height: 28px; + --slick-menu-item-border-radius: 4px; + --slick-menu-item-hover-border: 1px solid #148dff; + --slick-column-picker-item-hover-color: #fff; + --slick-column-picker-item-border-radius: 4px; + --slick-column-picker-item-hover-border: 1px solid #148dff; + --slick-menu-item-hover-color: #fff; + --slick-tooltip-background-color: #4c4c4c; + --slick-tooltip-color: #fff; + --slick-tooltip-font-size: 14px; + .slick-cell-menu, + .slick-context-menu, + .slick-grid-menu, + .slick-header-menu { + .slick-menu-item:hover:not(.slick-menu-item-disabled) { + color: #0a34b5; + } + } + .slick-menu-footer { + padding: 4px 6px; + border-top: 1px solid #c0c0c0; + } +} + +kbd { + background-color: #eee; + color: #202020; +} +.key-hint { + background: #eee; + border: 1px solid #ccc; + border-radius: 2px; + padding: 2px 4px; + font-size: 10px; + margin-left: 10px; + white-space: nowrap; + display: inline-flex; + align-items: center; + height: 20px; + + &.beta, + &.danger, + &.warn { + color: white; + font-size: 8px; + font-weight: bold; + } + &.beta { + background: #4444ff; + border: 1px solid #5454ff; + } + + &.danger { + background: #ff4444; + border: 1px solid #fb5a5a; + } + + &.warn { + background: #ff9800; + border: 1px solid #fba321; + } +} + +.edit-cell { + // background: #eee; + border: 1px solid #ccc; + border-radius: 2px; + padding: 2px 4px; + font-size: 10px; + margin-left: 10px; + display: inline-flex; + align-items: center; + height: 18px; +} + +.export-timestamp { + background-color: #4c4c4c; + color: #fff; + padding: 8px; + border-radius: 4px; + position: absolute; + z-index: 999999; +} + +.advanced-export-icon, +.edit-cell-icon, +.recalc-icon { + width: 20px; + height: 20px; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 4px; + transition: transform 0.2s; + color: white; + font-size: 10px; +} +.advanced-export-icon { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} +.edit-cell-icon { + background: linear-gradient(135deg, #00c853 0%, #64dd17 100%); +} +.recalc-icon { + background: linear-gradient(135deg, #c800a3 0%, #a31189 100%); +} + +.round-tag { + width: 6px; + height: 6px; + border-radius: 50%; + display: inline-block; + background: #44ff44; + box-shadow: 0 0 4px #44ff44; + margin-left: 10px; +} + +.menu-item { + display: flex; + align-items: center; + flex: 1; + justify-content: space-between; + + .menu-item-label.warn { + flex: 1; + color: #f09000; + } +} +.menu-item-icon { + margin-right: 4px; + font-size: 18px; + &.warn { + color: #ff9800; + } +} + +.menu-item-label { + flex: 1; +} diff --git a/demos/react/test/cypress/e2e/example51.cy.ts b/demos/react/test/cypress/e2e/example51.cy.ts new file mode 100644 index 0000000000..80e5148c97 --- /dev/null +++ b/demos/react/test/cypress/e2e/example51.cy.ts @@ -0,0 +1,382 @@ +import { format } from '@formkit/tempo'; + +describe('Example 51 - Menus with Slots', () => { + const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Action']; + + it('should display Example title', () => { + cy.visit(`${Cypress.config('baseUrl')}/example51`); + cy.get('h2').should('contain', 'Example 51: Menus with Slots'); + }); + + it('should have exact column titles in the grid', () => { + cy.get('#grid51') + .find('.slick-header-columns') + .children() + .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); + }); + + it('should open Context Menu hover "Duration" column and expect built-in and custom items listed in specific order', () => { + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick({ force: true }); + + // 1st item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.edit-cell-icon').contains('✎'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Edit Cell'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('kbd.edit-cell').contains('F2'); + + // icon should rotate while hovering + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseover'); + cy.wait(175); // wait for rotation + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item .edit-cell-icon') + .invoke('css', 'transform') // Get the transform property + .then((cssTransform) => { + const transformValue = cssTransform as unknown as string; // Cast to string + cy.getTransformValue(transformValue, true, 'rotate').then((rotationAngle) => { + expect(rotationAngle).to.approximately(13, 15); // 15 degrees rotation + }); + }); + + // 2nd item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item').find('i.mdi-content-copy').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item').find('span.menu-item-label').contains('Copy'); + + // 3rd item - divider + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(2)').should('have.class', 'slick-menu-item-divider'); + + // 4th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Clear all Grouping'); + + // 5th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item').find('i.mdi-arrow-collapse').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item') + .find('span.menu-item-label') + .contains('Collapse all Groups'); + + // 6th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('i.mdi-arrow-expand').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Expand all Groups'); + + // 7th item - divider + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(6)').should('have.class', 'slick-menu-item-divider'); + + // 8th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-download').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Export'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7)').find('.sub-item-chevron').should('exist'); + + // 9th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(8)').should('have.class', 'slick-menu-item-divider'); + + // 10th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(9) .menu-item') + .find('i.mdi-delete.text-danger') + .should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(9) .menu-item') + .find('span.menu-item-label') + .contains('Delete Row'); + }); + + it('should open Export->Excel context sub-menu', () => { + const subCommands1 = ['Export as Excel', 'Export as CSV', 'Export as PDF']; + + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('[data-row="0"] > .slick-cell:nth(2)').should('contain', '0'); + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick({ force: true }); + + cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains(/^Export$/) + .trigger('mouseover'); + + cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-command-list') + .should('exist') + .find('.slick-menu-item .menu-item') + .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); + + // click different sub-menu + cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains('Export as Excel') + .should('exist') + .click() + .then(() => expect(stub.getCall(0)).to.be.calledWith('Export to Excel')); + + cy.get('.slick-submenu').should('have.length', 0); + }); + + it('should open Header Menu from the "Title" column and expect some commands to have keyboard hints on the right side', () => { + cy.get('.slick-header-column:nth(0)').trigger('mouseover', { force: true }); + cy.get('.slick-header-column:nth(0)').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('i.mdi-arrow-expand-horizontal') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('span.menu-item-label') + .contains('Resize by Content'); + + // 2nd item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('i.mdi-sort-ascending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('span.menu-item-label') + .contains('Sort Ascending'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('kbd.key-hint').contains('Alt+↑'); + + // 4th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-sort-descending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Sort Descending'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('kbd.key-hint').contains('Alt+↓'); + + // 5th item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('i.mdi-filter-remove-outline') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Remove Filter'); + + // 7th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('i.mdi-sort-variant-off').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('span.menu-item-label') + .contains('Remove Sort'); + + // 8th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Hide Column'); + }); + + it('should open Header Menu from the "Duration" column and expect some commands to have tags on the right side', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover', { force: true }); + cy.get('.slick-header-column:nth(1)').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('i.mdi-arrow-expand-horizontal') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('span.menu-item-label') + .contains('Resize by Content'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('span.key-hint.danger').contains('NEW'); + + // 2nd item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('i.mdi-sort-ascending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('span.menu-item-label') + .contains('Sort Ascending'); + + // 4th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-sort-descending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Sort Descending'); + + // 5th item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('i.mdi-filter-remove-outline') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Remove Filter'); + + // 7th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('i.mdi-sort-variant-off').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('span.menu-item-label') + .contains('Remove Sort'); + + // 8th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Hide Column'); + }); + + it('should open Header Menu from the "Cost" column and expect first item to have a dynamic tooltip timestamp when hovering', () => { + cy.get('#grid51').find('.slick-header-column:nth(4)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.advanced-export-icon').contains('📊'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').contains('Advanced Export'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('kbd.key-hint').contains('Ctrl+E'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').should( + 'have.css', + 'background-color', + 'rgba(0, 0, 0, 0)' + ); + + // icon should scale up + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseover'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item .advanced-export-icon') + .invoke('css', 'transform') + .then((cssTransform) => { + const transformValue = cssTransform as unknown as string; // Cast to string + cy.getTransformValue(transformValue, true, 'scale').then((scaleValue) => { + expect(scaleValue).to.be.approximately(1.1, 1.15); // Check the scale value if applied + }); + }); + + const today = format(new Date(), 'YYYY-MM-DD'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').should( + 'have.css', + 'background-color', + 'rgb(133, 70, 133)' + ); + cy.get('.slick-custom-tooltip').contains(`📈 Export timestamp: ${today}`); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseout'); + cy.get('.slick-custom-tooltip').should('not.exist'); + cy.get('body').click(); + }); + + it('should open Action Menu from last column "Action" column and expect custom items listed in specific order', () => { + cy.get('[data-row="1"] > .slick-cell:nth(6)').click(); + cy.get('.slick-command-header.with-title.with-close').contains('Cell Actions'); + + // 1st item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.mdi-content-copy').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Copy Cell Value'); + + // 2nd item - divider + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('.mdi-download').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item span').contains('Export Row'); + + // 4th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-download').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('span.menu-item-label').contains('Export'); + + // 5th item - divider + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('.edit-cell-icon').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item .edit-cell-icon').contains('✎'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5)').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)'); + + // 7th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('.mdi-delete.text-danger').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Delete Row'); + }); + + it('should open Export->Excel cell sub-menu', () => { + const subCommands1 = ['Export as Excel', 'Export as CSV', 'Export as PDF']; + + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('.slick-cell-menu.slick-menu-level-0 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains(/^Export$/) + .trigger('mouseover'); + + cy.get('.slick-cell-menu.slick-menu-level-1 .slick-menu-command-list') + .should('exist') + .find('.slick-menu-item .menu-item') + .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); + + // click different sub-menu + cy.get('.slick-cell-menu.slick-menu-level-1 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains('Export as Excel') + .should('exist') + .click() + .then(() => expect(stub.getCall(0)).to.be.calledWith('Export row #1 to Excel')); + + cy.get('.slick-submenu').should('have.length', 0); + }); + + it('should open Grid Menu and expect built-in commands first then custom items listed in specific order', () => { + cy.get('.slick-grid-menu-button.mdi-menu').click(); + + // 1st item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('.mdi-filter-remove-outline.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Clear all Filters'); + + // 2nd item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item') + .find('.mdi-sort-variant-off.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item span').contains('Clear all Sorting'); + + // 3rd item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('.mdi-flip-vertical.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item span').contains('Toggle Filter Row'); + + // 4th item - divider + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(3)').should('have.class', 'slick-menu-item-divider'); + + // 5th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item') + .find('.mdi-file-excel-outline.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item span').contains('Export to Excel'); + + // 6th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('.mdi-download.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item span').contains('Export to CSV'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('span.key-hint.warn').contains('CUSTOM'); + + // 7th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('.mdi-refresh.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Refresh Data'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('kbd.key-hint').contains('F5'); + }); + + it('should sort ascending "Duration" even though the header menu item was override without an action callback', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').should('contain', 'Sort Ascending').click(); + + cy.get('[data-row=0]').children('.slick-cell:nth(1)').should('contain', '0'); + cy.get('[data-row=1]').children('.slick-cell:nth(1)').should('contain', '0'); + cy.get('[data-row=2]').children('.slick-cell:nth(1)').should('contain', '0'); + }); + + it('should sort descending "Duration" even though the header menu item was override without an action callback', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').should('contain', 'Sort Descending').click(); + + cy.get('[data-row=0]').children('.slick-cell:nth(1)').should('contain', '100'); + cy.get('[data-row=1]').children('.slick-cell:nth(1)').should('contain', '100'); + cy.get('[data-row=2]').children('.slick-cell:nth(1)').should('contain', '100'); + }); +}); diff --git a/demos/vanilla/src/examples/example40.ts b/demos/vanilla/src/examples/example40.ts index 5fd7644823..368e018012 100644 --- a/demos/vanilla/src/examples/example40.ts +++ b/demos/vanilla/src/examples/example40.ts @@ -10,6 +10,7 @@ import { type Column, type GridOption, type Grouping, + type MenuCommandItem, } from '@slickgrid-universal/common'; import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle'; @@ -197,11 +198,11 @@ export default class Example40 { command: 'custom-action', title: 'Advanced Export', // Demo: Native HTMLElement with event listeners using slotRenderer (full DOM control) - slotRenderer: (cmdItem, _args) => { + slotRenderer: (cmdItem) => { // you can use `createDomElement()` from Slickgrid for easier DOM element creation const containerDiv = createDomElement('div', { className: 'menu-item' }); const iconDiv = createDomElement('div', { className: 'advanced-export-icon', textContent: '📊' }); - const textSpan = createDomElement('span', { textContent: cmdItem.title, style: { flex: '1' } }); + const textSpan = createDomElement('span', { textContent: cmdItem.title || '', style: { flex: '1' } }); const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'Ctrl+E' }); containerDiv.appendChild(iconDiv); containerDiv.appendChild(textSpan); @@ -226,7 +227,7 @@ export default class Example40 { return containerDiv; }, - action: (_e, _args) => { + action: () => { alert('Custom export action triggered!'); }, }, @@ -289,7 +290,7 @@ export default class Example40 { hideCloseButton: false, commandTitle: 'Cell Actions', // Demo: Menu-level default renderer that applies to all items unless overridden - defaultMenuItemRenderer: (cmdItem, _args) => { + defaultMenuItemRenderer: (cmdItem) => { return `
${cmdItem.iconCssClass ? `` : '◦'} @@ -395,7 +396,7 @@ export default class Example40 { headerMenu: { hideColumnHideCommand: false, // Demo: Menu-level default renderer for all header menu items - defaultMenuItemRenderer: (cmdItem, _args) => { + defaultMenuItemRenderer: (cmdItem) => { return `
${cmdItem.iconCssClass ? `` : ''} @@ -422,11 +423,11 @@ export default class Example40 { command: 'edit-cell', title: 'Edit Cell', // Demo: Individual slotRenderer overrides the menu's defaultMenuItemRenderer - slotRenderer: (cmdItem, _args) => { + slotRenderer: (cmdItem) => { // you can use `createDomElement()` from Slickgrid for easier DOM element creation const containerDiv = createDomElement('div', { className: 'menu-item' }); const iconDiv = createDomElement('div', { className: 'edit-cell-icon', textContent: '✎' }); - const textSpan = createDomElement('span', { textContent: cmdItem.title, style: { flex: '1' } }); + const textSpan = createDomElement('span', { textContent: cmdItem.title || '', style: { flex: '1' } }); const kbdElm = createDomElement('kbd', { className: 'edit-cell', textContent: 'F2' }); containerDiv.appendChild(iconDiv); containerDiv.appendChild(textSpan); @@ -480,10 +481,10 @@ export default class Example40 { iconCssClass: 'mdi mdi-delete text-danger', action: () => alert('Delete row'), }, - ]; + ] as Array; }, // Demo: Menu-level default renderer for context menu items - defaultMenuItemRenderer: (cmdItem, _args) => { + defaultMenuItemRenderer: (cmdItem) => { return `
${cmdItem.iconCssClass ? `` : ''} @@ -497,7 +498,7 @@ export default class Example40 { enableGridMenu: true, gridMenu: { // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) - defaultMenuItemRenderer: (cmdItem, _args) => { + defaultMenuItemRenderer: (cmdItem) => { return `
${cmdItem.iconCssClass ? `` : ''} @@ -520,7 +521,7 @@ export default class Example40 { title: 'Export to CSV', iconCssClass: 'mdi mdi-download', // Individual slotRenderer overrides the defaultMenuItemRenderer for this item - slotRenderer: (cmdItem, _args) => ` + slotRenderer: (cmdItem) => `
${cmdItem.title} @@ -538,7 +539,7 @@ export default class Example40 { // you can use `createDomElement()` from Slickgrid for easier DOM element creation const menuItemElm = createDomElement('div', { className: 'menu-item' }); const iconElm = createDomElement('i', { className: `${cmdItem.iconCssClass} menu-item-icon` }); - const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: cmdItem.title }); + const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: cmdItem.title || '' }); const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'F5' }); menuItemElm.appendChild(iconElm); menuItemElm.appendChild(menuItemLabelElm); @@ -547,7 +548,7 @@ export default class Example40 { }, action: () => alert('Refresh data'), }, - ]; + ] as Array; }, }, diff --git a/demos/vue/src/components/Example51.vue b/demos/vue/src/components/Example51.vue new file mode 100644 index 0000000000..917385e041 --- /dev/null +++ b/demos/vue/src/components/Example51.vue @@ -0,0 +1,813 @@ + + + + diff --git a/demos/vue/src/router/index.ts b/demos/vue/src/router/index.ts index 9b49903f2c..4b171af7f6 100644 --- a/demos/vue/src/router/index.ts +++ b/demos/vue/src/router/index.ts @@ -1,110 +1,60 @@ import type { RouteRecordRaw } from 'vue-router'; import { createRouter, createWebHashHistory } from 'vue-router'; -import Example1 from '../components/Example01.vue'; -import Example2 from '../components/Example02.vue'; -import Example3 from '../components/Example03.vue'; -import Example4 from '../components/Example04.vue'; -import Example5 from '../components/Example05.vue'; -import Example6 from '../components/Example06.vue'; -import Example7 from '../components/Example07.vue'; -import Example8 from '../components/Example08.vue'; -import Example9 from '../components/Example09.vue'; -import Example10 from '../components/Example10.vue'; -import Example11 from '../components/Example11.vue'; -import Example12 from '../components/Example12.vue'; -import Example13 from '../components/Example13.vue'; -import Example14 from '../components/Example14.vue'; -import Example15 from '../components/Example15.vue'; -import Example16 from '../components/Example16.vue'; -import Example17 from '../components/Example17.vue'; -import Example18 from '../components/Example18.vue'; -import Example19 from '../components/Example19.vue'; -import Example20 from '../components/Example20.vue'; -import Example21 from '../components/Example21.vue'; -import Example22 from '../components/Example22.vue'; -import Example23 from '../components/Example23.vue'; -import Example24 from '../components/Example24.vue'; -import Example25 from '../components/Example25.vue'; -import Example26 from '../components/Example26.vue'; -import Example27 from '../components/Example27.vue'; -import Example28 from '../components/Example28.vue'; -import Example29 from '../components/Example29.vue'; -import Example30 from '../components/Example30.vue'; -import Example31 from '../components/Example31.vue'; -import Example32 from '../components/Example32.vue'; -import Example33 from '../components/Example33.vue'; -import Example34 from '../components/Example34.vue'; -import Example35 from '../components/Example35.vue'; -import Example36 from '../components/Example36.vue'; -import Example37 from '../components/Example37.vue'; -import Example38 from '../components/Example38.vue'; -import Example39 from '../components/Example39.vue'; -import Example40 from '../components/Example40.vue'; -import Example41 from '../components/Example41.vue'; -import Example42 from '../components/Example42.vue'; -import Example43 from '../components/Example43.vue'; -import Example44 from '../components/Example44.vue'; -import Example45 from '../components/Example45.vue'; -import Example46 from '../components/Example46.vue'; -import Example47 from '../components/Example47.vue'; -import Example48 from '../components/Example48.vue'; -import Example49 from '../components/Example49.vue'; -import Example50 from '../components/Example50.vue'; -import Home from '../Home.vue'; export const routes: RouteRecordRaw[] = [ { path: '/', name: 'root', redirect: '/example1' }, - { path: '/home', name: 'home', component: Home }, - { path: '/example1', name: '1- Basic Grid / 2 Grids', component: Example1 }, - { path: '/example2', name: '2- Formatters', component: Example2 }, - { path: '/example3', name: '3- Editors / Delete', component: Example3 }, - { path: '/example4', name: '4- Client Side Sort/Filter', component: Example4 }, - { path: '/example5', name: '5- Backend OData Service', component: Example5 }, - { path: '/example6', name: '6- Backend GraphQL Service', component: Example6 }, - { path: '/example7', name: '7- Header Button Plugin', component: Example7 }, - { path: '/example8', name: '8- Header Menu Plugin', component: Example8 }, - { path: '/example9', name: '9- Grid Menu Control', component: Example9 }, - { path: '/example10', name: '10- Row Selection / 2 Grids', component: Example10 }, - { path: '/example11', name: '11- Add/Update Grid Item', component: Example11 }, - { path: '/example12', name: '12- Localization (i18n)', component: Example12 }, - { path: '/example13', name: '13- Grouping & Aggregators', component: Example13 }, - { path: '/example14', name: '14- Column Span & Header Grouping', component: Example14 }, - { path: '/example15', name: '15- Grid State & Local Storage', component: Example15 }, - { path: '/example16', name: '16- Row Move Plugin', component: Example16 }, - { path: '/example17', name: '17- Create Grid from CSV', component: Example17 }, - { path: '/example18', name: '18- Draggable Grouping', component: Example18 }, - { path: '/example19', name: '19- Row Detail View', component: Example19 }, - { path: '/example20', name: '20- Pinned Columns / Rows', component: Example20 }, - { path: '/example21', name: '21- Grid AutoHeight (full height)', component: Example21 }, - { path: '/example22', name: '22- with Bootstrap Tabs', component: Example22 }, - { path: '/example23', name: '23- Filter by Range of Values', component: Example23 }, - { path: '/example24', name: '24- Cell & Context Menu', component: Example24 }, - { path: '/example25', name: '25- GraphQL without Pagination', component: Example25 }, - { path: '/example26', name: '26- Use of Vue Components', component: Example26 }, - { path: '/example27', name: '27- Tree Data (Parent/Child)', component: Example27 }, - { path: '/example28', name: '28- Tree Data (Hierarchical set)', component: Example28 }, - { path: '/example29', name: '29- Grid Header & Footer Slots', component: Example29 }, - { path: '/example30', name: '30- Composite Editor Model', component: Example30 }, - { path: '/example31', name: '31- Backend OData with RxJS', component: Example31 }, - { path: '/example32', name: '32- Columns Resize by Content', component: Example32 }, - { path: '/example33', name: '33- Regular & Custom Tooltip', component: Example33 }, - { path: '/example34', name: '34- Real-Time Trading Platform', component: Example34 }, - { path: '/example35', name: '35- Row Based Editing', component: Example35 }, - { path: '/example36', name: '36- Excel Export Formulas', component: Example36 }, - { path: '/example37', name: '37- Footer Totals Row', component: Example37 }, - { path: '/example38', name: '38- Infinite Scroll with OData', component: Example38 }, - { path: '/example39', name: '39- Infinite Scroll with GraphQL', component: Example39 }, - { path: '/example40', name: '40- Infinite Scroll from JSON data', component: Example40 }, - { path: '/example41', name: '41- Drag & Drop', component: Example41 }, - { path: '/example42', name: '42- Custom Pagination', component: Example42 }, - { path: '/example43', name: '43- Colspan/Rowspan (timesheets)', component: Example43 }, - { path: '/example44', name: '44- Colspan/Rowspan (large data)', component: Example44 }, - { path: '/example45', name: '45- Row Detail with inner Grid', component: Example45 }, - { path: '/example46', name: '46- Tree Data with Lazy Loading', component: Example46 }, - { path: '/example47', name: '47- Row Detail + Grouping', component: Example47 }, - { path: '/example48', name: '48- Hybrid Selection Model', component: Example48 }, - { path: '/example49', name: '49- Spreadsheet Drag-Fill', component: Example49 }, - { path: '/example50', name: '50- Master/Detail Grids', component: Example50 }, + { path: '/home', name: 'home', component: () => import('../Home.vue') }, + { path: '/example1', name: '1- Basic Grid / 2 Grids', component: () => import('../components/Example01.vue') }, + { path: '/example2', name: '2- Formatters', component: () => import('../components/Example02.vue') }, + { path: '/example3', name: '3- Editors / Delete', component: () => import('../components/Example03.vue') }, + { path: '/example4', name: '4- Client Side Sort/Filter', component: () => import('../components/Example04.vue') }, + { path: '/example5', name: '5- Backend OData Service', component: () => import('../components/Example05.vue') }, + { path: '/example6', name: '6- Backend GraphQL Service', component: () => import('../components/Example06.vue') }, + { path: '/example7', name: '7- Header Button Plugin', component: () => import('../components/Example07.vue') }, + { path: '/example8', name: '8- Header Menu Plugin', component: () => import('../components/Example08.vue') }, + { path: '/example9', name: '9- Grid Menu Control', component: () => import('../components/Example09.vue') }, + { path: '/example10', name: '10- Row Selection / 2 Grids', component: () => import('../components/Example10.vue') }, + { path: '/example11', name: '11- Add/Update Grid Item', component: () => import('../components/Example11.vue') }, + { path: '/example12', name: '12- Localization (i18n)', component: () => import('../components/Example12.vue') }, + { path: '/example13', name: '13- Grouping & Aggregators', component: () => import('../components/Example13.vue') }, + { path: '/example14', name: '14- Column Span & Header Grouping', component: () => import('../components/Example14.vue') }, + { path: '/example15', name: '15- Grid State & Local Storage', component: () => import('../components/Example15.vue') }, + { path: '/example16', name: '16- Row Move Plugin', component: () => import('../components/Example16.vue') }, + { path: '/example17', name: '17- Create Grid from CSV', component: () => import('../components/Example17.vue') }, + { path: '/example18', name: '18- Draggable Grouping', component: () => import('../components/Example18.vue') }, + { path: '/example19', name: '19- Row Detail View', component: () => import('../components/Example19.vue') }, + { path: '/example20', name: '20- Pinned Columns / Rows', component: () => import('../components/Example20.vue') }, + { path: '/example21', name: '21- Grid AutoHeight (full height)', component: () => import('../components/Example21.vue') }, + { path: '/example22', name: '22- with Bootstrap Tabs', component: () => import('../components/Example22.vue') }, + { path: '/example23', name: '23- Filter by Range of Values', component: () => import('../components/Example23.vue') }, + { path: '/example24', name: '24- Cell & Context Menu', component: () => import('../components/Example24.vue') }, + { path: '/example25', name: '25- GraphQL without Pagination', component: () => import('../components/Example25.vue') }, + { path: '/example26', name: '26- Use of Vue Components', component: () => import('../components/Example26.vue') }, + { path: '/example27', name: '27- Tree Data (Parent/Child)', component: () => import('../components/Example27.vue') }, + { path: '/example28', name: '28- Tree Data (Hierarchical set)', component: () => import('../components/Example28.vue') }, + { path: '/example29', name: '29- Grid Header & Footer Slots', component: () => import('../components/Example29.vue') }, + { path: '/example30', name: '30- Composite Editor Model', component: () => import('../components/Example30.vue') }, + { path: '/example31', name: '31- Backend OData with RxJS', component: () => import('../components/Example31.vue') }, + { path: '/example32', name: '32- Columns Resize by Content', component: () => import('../components/Example32.vue') }, + { path: '/example33', name: '33- Regular & Custom Tooltip', component: () => import('../components/Example33.vue') }, + { path: '/example34', name: '34- Real-Time Trading Platform', component: () => import('../components/Example34.vue') }, + { path: '/example35', name: '35- Row Based Editing', component: () => import('../components/Example35.vue') }, + { path: '/example36', name: '36- Excel Export Formulas', component: () => import('../components/Example36.vue') }, + { path: '/example37', name: '37- Footer Totals Row', component: () => import('../components/Example37.vue') }, + { path: '/example38', name: '38- Infinite Scroll with OData', component: () => import('../components/Example38.vue') }, + { path: '/example39', name: '39- Infinite Scroll with GraphQL', component: () => import('../components/Example39.vue') }, + { path: '/example40', name: '40- Infinite Scroll from JSON data', component: () => import('../components/Example40.vue') }, + { path: '/example41', name: '41- Drag & Drop', component: () => import('../components/Example41.vue') }, + { path: '/example42', name: '42- Custom Pagination', component: () => import('../components/Example42.vue') }, + { path: '/example43', name: '43- Colspan/Rowspan (timesheets)', component: () => import('../components/Example43.vue') }, + { path: '/example44', name: '44- Colspan/Rowspan (large data)', component: () => import('../components/Example44.vue') }, + { path: '/example45', name: '45- Row Detail with inner Grid', component: () => import('../components/Example45.vue') }, + { path: '/example46', name: '46- Tree Data with Lazy Loading', component: () => import('../components/Example46.vue') }, + { path: '/example47', name: '47- Row Detail + Grouping', component: () => import('../components/Example47.vue') }, + { path: '/example48', name: '48- Hybrid Selection Model', component: () => import('../components/Example48.vue') }, + { path: '/example49', name: '49- Spreadsheet Drag-Fill', component: () => import('../components/Example49.vue') }, + { path: '/example50', name: '50- Master/Detail Grids', component: () => import('../components/Example50.vue') }, + { path: '/example51', name: '51- Menus with Slots', component: () => import('../components/Example51.vue') }, ]; export const router = createRouter({ diff --git a/demos/vue/test/cypress/e2e/example51.cy.ts b/demos/vue/test/cypress/e2e/example51.cy.ts new file mode 100644 index 0000000000..80e5148c97 --- /dev/null +++ b/demos/vue/test/cypress/e2e/example51.cy.ts @@ -0,0 +1,382 @@ +import { format } from '@formkit/tempo'; + +describe('Example 51 - Menus with Slots', () => { + const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Action']; + + it('should display Example title', () => { + cy.visit(`${Cypress.config('baseUrl')}/example51`); + cy.get('h2').should('contain', 'Example 51: Menus with Slots'); + }); + + it('should have exact column titles in the grid', () => { + cy.get('#grid51') + .find('.slick-header-columns') + .children() + .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); + }); + + it('should open Context Menu hover "Duration" column and expect built-in and custom items listed in specific order', () => { + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick({ force: true }); + + // 1st item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.edit-cell-icon').contains('✎'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Edit Cell'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('kbd.edit-cell').contains('F2'); + + // icon should rotate while hovering + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseover'); + cy.wait(175); // wait for rotation + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item .edit-cell-icon') + .invoke('css', 'transform') // Get the transform property + .then((cssTransform) => { + const transformValue = cssTransform as unknown as string; // Cast to string + cy.getTransformValue(transformValue, true, 'rotate').then((rotationAngle) => { + expect(rotationAngle).to.approximately(13, 15); // 15 degrees rotation + }); + }); + + // 2nd item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item').find('i.mdi-content-copy').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item').find('span.menu-item-label').contains('Copy'); + + // 3rd item - divider + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(2)').should('have.class', 'slick-menu-item-divider'); + + // 4th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Clear all Grouping'); + + // 5th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item').find('i.mdi-arrow-collapse').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item') + .find('span.menu-item-label') + .contains('Collapse all Groups'); + + // 6th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('i.mdi-arrow-expand').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Expand all Groups'); + + // 7th item - divider + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(6)').should('have.class', 'slick-menu-item-divider'); + + // 8th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-download').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Export'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7)').find('.sub-item-chevron').should('exist'); + + // 9th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(8)').should('have.class', 'slick-menu-item-divider'); + + // 10th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(9) .menu-item') + .find('i.mdi-delete.text-danger') + .should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(9) .menu-item') + .find('span.menu-item-label') + .contains('Delete Row'); + }); + + it('should open Export->Excel context sub-menu', () => { + const subCommands1 = ['Export as Excel', 'Export as CSV', 'Export as PDF']; + + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('[data-row="0"] > .slick-cell:nth(2)').should('contain', '0'); + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick({ force: true }); + + cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains(/^Export$/) + .trigger('mouseover'); + + cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-command-list') + .should('exist') + .find('.slick-menu-item .menu-item') + .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); + + // click different sub-menu + cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains('Export as Excel') + .should('exist') + .click() + .then(() => expect(stub.getCall(0)).to.be.calledWith('Export to Excel')); + + cy.get('.slick-submenu').should('have.length', 0); + }); + + it('should open Header Menu from the "Title" column and expect some commands to have keyboard hints on the right side', () => { + cy.get('.slick-header-column:nth(0)').trigger('mouseover', { force: true }); + cy.get('.slick-header-column:nth(0)').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('i.mdi-arrow-expand-horizontal') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('span.menu-item-label') + .contains('Resize by Content'); + + // 2nd item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('i.mdi-sort-ascending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('span.menu-item-label') + .contains('Sort Ascending'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('kbd.key-hint').contains('Alt+↑'); + + // 4th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-sort-descending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Sort Descending'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('kbd.key-hint').contains('Alt+↓'); + + // 5th item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('i.mdi-filter-remove-outline') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Remove Filter'); + + // 7th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('i.mdi-sort-variant-off').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('span.menu-item-label') + .contains('Remove Sort'); + + // 8th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Hide Column'); + }); + + it('should open Header Menu from the "Duration" column and expect some commands to have tags on the right side', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover', { force: true }); + cy.get('.slick-header-column:nth(1)').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('i.mdi-arrow-expand-horizontal') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('span.menu-item-label') + .contains('Resize by Content'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('span.key-hint.danger').contains('NEW'); + + // 2nd item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('i.mdi-sort-ascending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('span.menu-item-label') + .contains('Sort Ascending'); + + // 4th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-sort-descending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Sort Descending'); + + // 5th item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('i.mdi-filter-remove-outline') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Remove Filter'); + + // 7th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('i.mdi-sort-variant-off').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('span.menu-item-label') + .contains('Remove Sort'); + + // 8th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Hide Column'); + }); + + it('should open Header Menu from the "Cost" column and expect first item to have a dynamic tooltip timestamp when hovering', () => { + cy.get('#grid51').find('.slick-header-column:nth(4)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.advanced-export-icon').contains('📊'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').contains('Advanced Export'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('kbd.key-hint').contains('Ctrl+E'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').should( + 'have.css', + 'background-color', + 'rgba(0, 0, 0, 0)' + ); + + // icon should scale up + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseover'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item .advanced-export-icon') + .invoke('css', 'transform') + .then((cssTransform) => { + const transformValue = cssTransform as unknown as string; // Cast to string + cy.getTransformValue(transformValue, true, 'scale').then((scaleValue) => { + expect(scaleValue).to.be.approximately(1.1, 1.15); // Check the scale value if applied + }); + }); + + const today = format(new Date(), 'YYYY-MM-DD'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').should( + 'have.css', + 'background-color', + 'rgb(133, 70, 133)' + ); + cy.get('.slick-custom-tooltip').contains(`📈 Export timestamp: ${today}`); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseout'); + cy.get('.slick-custom-tooltip').should('not.exist'); + cy.get('body').click(); + }); + + it('should open Action Menu from last column "Action" column and expect custom items listed in specific order', () => { + cy.get('[data-row="1"] > .slick-cell:nth(6)').click(); + cy.get('.slick-command-header.with-title.with-close').contains('Cell Actions'); + + // 1st item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.mdi-content-copy').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Copy Cell Value'); + + // 2nd item - divider + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('.mdi-download').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item span').contains('Export Row'); + + // 4th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-download').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('span.menu-item-label').contains('Export'); + + // 5th item - divider + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('.edit-cell-icon').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item .edit-cell-icon').contains('✎'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5)').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)'); + + // 7th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('.mdi-delete.text-danger').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Delete Row'); + }); + + it('should open Export->Excel cell sub-menu', () => { + const subCommands1 = ['Export as Excel', 'Export as CSV', 'Export as PDF']; + + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('.slick-cell-menu.slick-menu-level-0 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains(/^Export$/) + .trigger('mouseover'); + + cy.get('.slick-cell-menu.slick-menu-level-1 .slick-menu-command-list') + .should('exist') + .find('.slick-menu-item .menu-item') + .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); + + // click different sub-menu + cy.get('.slick-cell-menu.slick-menu-level-1 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains('Export as Excel') + .should('exist') + .click() + .then(() => expect(stub.getCall(0)).to.be.calledWith('Export row #1 to Excel')); + + cy.get('.slick-submenu').should('have.length', 0); + }); + + it('should open Grid Menu and expect built-in commands first then custom items listed in specific order', () => { + cy.get('.slick-grid-menu-button.mdi-menu').click(); + + // 1st item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('.mdi-filter-remove-outline.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Clear all Filters'); + + // 2nd item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item') + .find('.mdi-sort-variant-off.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item span').contains('Clear all Sorting'); + + // 3rd item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('.mdi-flip-vertical.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item span').contains('Toggle Filter Row'); + + // 4th item - divider + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(3)').should('have.class', 'slick-menu-item-divider'); + + // 5th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item') + .find('.mdi-file-excel-outline.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item span').contains('Export to Excel'); + + // 6th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('.mdi-download.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item span').contains('Export to CSV'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('span.key-hint.warn').contains('CUSTOM'); + + // 7th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('.mdi-refresh.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Refresh Data'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('kbd.key-hint').contains('F5'); + }); + + it('should sort ascending "Duration" even though the header menu item was override without an action callback', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').should('contain', 'Sort Ascending').click(); + + cy.get('[data-row=0]').children('.slick-cell:nth(1)').should('contain', '0'); + cy.get('[data-row=1]').children('.slick-cell:nth(1)').should('contain', '0'); + cy.get('[data-row=2]').children('.slick-cell:nth(1)').should('contain', '0'); + }); + + it('should sort descending "Duration" even though the header menu item was override without an action callback', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').should('contain', 'Sort Descending').click(); + + cy.get('[data-row=0]').children('.slick-cell:nth(1)').should('contain', '100'); + cy.get('[data-row=1]').children('.slick-cell:nth(1)').should('contain', '100'); + cy.get('[data-row=2]').children('.slick-cell:nth(1)').should('contain', '100'); + }); +}); diff --git a/docs/menu-slots.md b/docs/menu-slots.md index 61f036b738..14b9f9bb47 100644 --- a/docs/menu-slots.md +++ b/docs/menu-slots.md @@ -4,6 +4,31 @@ All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cro > **Note:** This documentation covers **how menu items are rendered** (visual presentation). If you need to **dynamically modify which commands appear** in the menu (filtering, sorting, adding/removing items), see the `commandListBuilder` callback documented in [Grid Menu](grid-functionalities/grid-menu.md), [Context Menu](grid-functionalities/context-menu.md), or [Header Menu](grid-functionalities/header-menu-header-buttons.md). +### TypeScript Tip: Type Inference with commandListBuilder + +When using `commandListBuilder` to add custom menu items with slotRenderer callbacks, **cast the return value to the appropriate type** to enable proper type parameters in callbacks: + +```typescript +contextMenu: { + commandListBuilder: (builtInItems) => { + return [ + ...builtInItems, + { + command: 'custom-action', + title: 'My Action', + slotRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + } + ] as Array; + } +} +``` + +Alternatively, if you only have built-in items and dividers, you can use the simpler cast: + +```typescript +return [...] as Array; +``` + ### Core Concept Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. @@ -11,7 +36,7 @@ Each menu item can define a `slotRenderer` callback function that receives the i ### Slot Renderer Callback ```typescript -slotRenderer?: (cmdItem: any, args: any, event?: Event) => string | HTMLElement +slotRenderer?: (cmdItem: MenuItem, args: MenuCallbackArgs, event?: Event) => string | HTMLElement ``` - **cmdItem** - The menu cmdItem object containing command, title, iconCssClass, etc. diff --git a/frameworks/angular-slickgrid/docs/menu-slots.md b/frameworks/angular-slickgrid/docs/menu-slots.md index 61f036b738..14b9f9bb47 100644 --- a/frameworks/angular-slickgrid/docs/menu-slots.md +++ b/frameworks/angular-slickgrid/docs/menu-slots.md @@ -4,6 +4,31 @@ All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cro > **Note:** This documentation covers **how menu items are rendered** (visual presentation). If you need to **dynamically modify which commands appear** in the menu (filtering, sorting, adding/removing items), see the `commandListBuilder` callback documented in [Grid Menu](grid-functionalities/grid-menu.md), [Context Menu](grid-functionalities/context-menu.md), or [Header Menu](grid-functionalities/header-menu-header-buttons.md). +### TypeScript Tip: Type Inference with commandListBuilder + +When using `commandListBuilder` to add custom menu items with slotRenderer callbacks, **cast the return value to the appropriate type** to enable proper type parameters in callbacks: + +```typescript +contextMenu: { + commandListBuilder: (builtInItems) => { + return [ + ...builtInItems, + { + command: 'custom-action', + title: 'My Action', + slotRenderer: (cmdItem, args) => `
${cmdItem.title}
`, + } + ] as Array; + } +} +``` + +Alternatively, if you only have built-in items and dividers, you can use the simpler cast: + +```typescript +return [...] as Array; +``` + ### Core Concept Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. @@ -11,7 +36,7 @@ Each menu item can define a `slotRenderer` callback function that receives the i ### Slot Renderer Callback ```typescript -slotRenderer?: (cmdItem: any, args: any, event?: Event) => string | HTMLElement +slotRenderer?: (cmdItem: MenuItem, args: MenuCallbackArgs, event?: Event) => string | HTMLElement ``` - **cmdItem** - The menu cmdItem object containing command, title, iconCssClass, etc. diff --git a/frameworks/angular-slickgrid/src/demos/app-routing.module.ts b/frameworks/angular-slickgrid/src/demos/app-routing.module.ts index 817be2f5b4..7b1d88e1bf 100644 --- a/frameworks/angular-slickgrid/src/demos/app-routing.module.ts +++ b/frameworks/angular-slickgrid/src/demos/app-routing.module.ts @@ -52,6 +52,7 @@ export const routes: Routes = [ { path: 'example48', loadComponent: () => import('./examples/example48.component').then((m) => m.Example48Component) }, { path: 'example49', loadComponent: () => import('./examples/example49.component').then((m) => m.Example49Component) }, { path: 'example50', loadComponent: () => import('./examples/example50.component').then((m) => m.Example50Component) }, + { path: 'example51', loadComponent: () => import('./examples/example51.component').then((m) => m.Example51Component) }, { path: '', redirectTo: '/example34', pathMatch: 'full' }, { path: '**', redirectTo: '/example34', pathMatch: 'full' }, ]; diff --git a/frameworks/angular-slickgrid/src/demos/app.component.html b/frameworks/angular-slickgrid/src/demos/app.component.html index 65cf5ad3ab..d952e76aba 100644 --- a/frameworks/angular-slickgrid/src/demos/app.component.html +++ b/frameworks/angular-slickgrid/src/demos/app.component.html @@ -190,6 +190,9 @@
  • 50- Master/Detail Grids
    • +
  • + 51- Menus with Slots +
    • diff --git a/frameworks/angular-slickgrid/src/demos/examples/example51.component.html b/frameworks/angular-slickgrid/src/demos/examples/example51.component.html new file mode 100644 index 0000000000..6d57c9cbcf --- /dev/null +++ b/frameworks/angular-slickgrid/src/demos/examples/example51.component.html @@ -0,0 +1,62 @@ +

    + Example 51: Menus with Slots + + + code + + + +

    + +
    +
    + + Menu Slots Demo with Custom Renderer +
    +

    + Click on the menu buttons to see the new single slot functionality working across all menu types (Header Menu, Cell + Menu, Context Menu, Grid Menu): +

    +

    + Note: The demo focuses on the custom rendering capability via slotRenderer and + defaultMenuItemRenderer, which work across all menu plugins (SlickHeaderMenu, SlickCellMenu, SlickContextMenu, + SlickGridMenu). Also note that the keyboard shortcuts displayed in the menus (e.g., Alt+↑, F5) are for demo + purposes only and do not actually trigger any actions. + +

    +
    + +
    +
    + + + + +
    +
    + + + diff --git a/frameworks/angular-slickgrid/src/demos/examples/example51.component.scss b/frameworks/angular-slickgrid/src/demos/examples/example51.component.scss new file mode 100644 index 0000000000..539ad2ecd2 --- /dev/null +++ b/frameworks/angular-slickgrid/src/demos/examples/example51.component.scss @@ -0,0 +1,144 @@ +body { + --slick-menu-item-height: 30px; + --slick-menu-line-height: 30px; + --slick-column-picker-item-height: 28px; + --slick-column-picker-line-height: 28px; + --slick-menu-item-border-radius: 4px; + --slick-menu-item-hover-border: 1px solid #148dff; + --slick-column-picker-item-hover-color: #fff; + --slick-column-picker-item-border-radius: 4px; + --slick-column-picker-item-hover-border: 1px solid #148dff; + --slick-menu-item-hover-color: #fff; + --slick-tooltip-background-color: #4c4c4c; + --slick-tooltip-color: #fff; + --slick-tooltip-font-size: 14px; + .slick-cell-menu, + .slick-context-menu, + .slick-grid-menu, + .slick-header-menu { + .slick-menu-item:hover:not(.slick-menu-item-disabled) { + color: #0a34b5; + } + } + .slick-menu-footer { + padding: 4px 6px; + border-top: 1px solid #c0c0c0; + } +} + +kbd { + background-color: #eee; + color: #202020; +} +.key-hint { + background: #eee; + border: 1px solid #ccc; + border-radius: 2px; + padding: 2px 4px; + font-size: 10px; + margin-left: 10px; + white-space: nowrap; + display: inline-flex; + align-items: center; + height: 20px; + + &.beta, + &.danger, + &.warn { + color: white; + font-size: 8px; + font-weight: bold; + } + &.beta { + background: #4444ff; + border: 1px solid #5454ff; + } + + &.danger { + background: #ff4444; + border: 1px solid #fb5a5a; + } + + &.warn { + background: #ff9800; + border: 1px solid #fba321; + } +} + +.edit-cell { + // background: #eee; + border: 1px solid #ccc; + border-radius: 2px; + padding: 2px 4px; + font-size: 10px; + margin-left: 10px; + display: inline-flex; + align-items: center; + height: 18px; +} + +.export-timestamp { + background-color: #4c4c4c; + color: #fff; + padding: 8px; + border-radius: 4px; + position: absolute; + z-index: 999999; +} + +.advanced-export-icon, +.edit-cell-icon, +.recalc-icon { + width: 20px; + height: 20px; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 4px; + transition: transform 0.2s; + color: white; + font-size: 10px; +} +.advanced-export-icon { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} +.edit-cell-icon { + background: linear-gradient(135deg, #00c853 0%, #64dd17 100%); +} +.recalc-icon { + background: linear-gradient(135deg, #c800a3 0%, #a31189 100%); +} + +.round-tag { + width: 6px; + height: 6px; + border-radius: 50%; + display: inline-block; + background: #44ff44; + box-shadow: 0 0 4px #44ff44; + margin-left: 10px; +} + +.menu-item { + display: flex; + align-items: center; + flex: 1; + justify-content: space-between; + + .menu-item-label.warn { + flex: 1; + color: #f09000; + } +} +.menu-item-icon { + margin-right: 4px; + font-size: 18px; + &.warn { + color: #ff9800; + } +} + +.menu-item-label { + flex: 1; +} diff --git a/frameworks/angular-slickgrid/src/demos/examples/example51.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example51.component.ts new file mode 100644 index 0000000000..43a425b5ee --- /dev/null +++ b/frameworks/angular-slickgrid/src/demos/examples/example51.component.ts @@ -0,0 +1,609 @@ +import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; +import { format as tempoFormat } from '@formkit/tempo'; +import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; +import { + Aggregators, + AngularSlickgridComponent, + createDomElement, + Filters, + Formatters, + SortComparers, + SortDirectionNumber, + type AngularGridInstance, + type Column, + type GridOption, + type Grouping, + type MenuCommandItem, +} from '../../library'; + +const NB_ITEMS = 2000; + +interface ReportItem { + id: number; + title: string; + duration: number; + cost: number; + percentComplete: number; + start: Date; + finish: Date; + action?: string; +} + +@Component({ + templateUrl: './example51.component.html', + styleUrls: ['example51.component.scss'], + imports: [AngularSlickgridComponent], + encapsulation: ViewEncapsulation.None, +}) +export class Example51Component implements OnInit { + angularGrid!: AngularGridInstance; + columnDefinitions: Column[] = []; + gridOptions!: GridOption; + dataset: ReportItem[] = []; + hideSubTitle = false; + + angularGridReady(angularGrid: AngularGridInstance) { + this.angularGrid = angularGrid; + } + + ngOnInit(): void { + this.prepareGrid(); + // mock some data (different in each dataset) + this.dataset = this.loadData(NB_ITEMS); + } + + prepareGrid() { + this.columnDefinitions = [ + { + id: 'title', + name: 'Title', + field: 'title', + sortable: true, + filterable: true, + minWidth: 100, + // Demo: Header Menu with Slot - complete custom HTML with keyboard shortcuts + header: { + menu: { + commandItems: [ + { + command: 'sort-asc', + title: 'Sort Ascending', + positionOrder: 50, + // Slot renderer replaces entire menu item content (can be HTML string or native DOM elements) + slotRenderer: (cmdItem) => ` +
    + + ${cmdItem.title} + Alt+↑ +
    + `, + }, + { + command: 'sort-desc', + title: 'Sort Descending', + positionOrder: 51, + // Slot renderer using native DOM elements + slotRenderer: () => { + const menuItemElm = createDomElement('div', { className: 'menu-item' }); + const iconElm = createDomElement('i', { className: 'mdi mdi-sort-descending menu-item-icon' }); + const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: 'Sort Descending' }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'Alt+↓' }); + menuItemElm.appendChild(iconElm); + menuItemElm.appendChild(menuItemLabelElm); + menuItemElm.appendChild(kbdElm); + return menuItemElm; + }, + }, + ], + }, + }, + }, + { + id: 'duration', + name: 'Duration', + field: 'duration', + sortable: true, + filterable: true, + minWidth: 100, + // Demo: Header Menu with Slot - showing badge and status dot + header: { + menu: { + commandItems: [ + { + command: 'column-resize-by-content', + title: 'Resize by Content', + positionOrder: 47, + // Slot renderer with badge + slotRenderer: () => ` +
    + + Resize by Content + NEW +
    + `, + }, + { divider: true, command: '', positionOrder: 48 }, + { + command: 'sort-asc', + title: 'Sort Ascending', + iconCssClass: 'mdi mdi-sort-ascending', + positionOrder: 50, + }, + { + command: 'sort-desc', + title: 'Sort Descending', + iconCssClass: 'mdi mdi-sort-descending', + positionOrder: 51, + }, + { divider: true, command: '', positionOrder: 52 }, + { + command: 'clear-sort', + title: 'Remove Sort', + positionOrder: 58, + // Slot renderer with status indicator + slotRenderer: () => ` +
    + + Remove Sort + +
    + `, + }, + ], + }, + }, + }, + { + id: 'start', + name: 'Start', + field: 'start', + sortable: true, + formatter: Formatters.dateIso, + filterable: true, + filter: { model: Filters.compoundDate }, + minWidth: 100, + }, + { + id: 'finish', + name: 'Finish', + field: 'finish', + sortable: true, + formatter: Formatters.dateIso, + filterable: true, + filter: { model: Filters.dateRange }, + minWidth: 100, + }, + { + id: 'cost', + name: 'Cost', + field: 'cost', + width: 90, + sortable: true, + filterable: true, + formatter: Formatters.dollar, + // Demo: Header Menu with Slot - showing slotRenderer with callback (item, args) + header: { + menu: { + commandItems: [ + { + command: 'custom-action', + title: 'Advanced Export', + // Demo: Native HTMLElement with event listeners using slotRenderer (full DOM control) + slotRenderer: (cmdItem) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const containerDiv = createDomElement('div', { className: 'menu-item' }); + const iconDiv = createDomElement('div', { className: 'advanced-export-icon', textContent: '📊' }); + const textSpan = createDomElement('span', { textContent: cmdItem.title || '', style: { flex: '1' } }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'Ctrl+E' }); + containerDiv.appendChild(iconDiv); + containerDiv.appendChild(textSpan); + containerDiv.appendChild(kbdElm); + + // Add native event listeners for hover effects + containerDiv.addEventListener('mouseover', () => { + iconDiv.style.transform = 'scale(1.15)'; + iconDiv.style.background = 'linear-gradient(135deg, #d8dcef 0%, #ffffff 100%)'; + containerDiv.parentElement!.style.backgroundColor = '#854685'; + containerDiv.parentElement!.title = `📈 Export timestamp: ${tempoFormat(new Date(), 'YYYY-MM-DD hh:mm:ss a')}`; + containerDiv.style.color = 'white'; + containerDiv.querySelector('.key-hint')!.style.color = 'black'; + }); + containerDiv.addEventListener('mouseout', () => { + iconDiv.style.transform = 'scale(1)'; + iconDiv.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; + containerDiv.parentElement!.style.backgroundColor = 'white'; + containerDiv.style.color = 'black'; + document.querySelector('.export-timestamp')?.remove(); + }); + + return containerDiv; + }, + action: () => { + alert('Custom export action triggered!'); + }, + }, + { divider: true, command: '' }, + { + command: 'filter-column', + title: 'Filter Column', + // Slot renderer with status indicator and beta badge + slotRenderer: () => ` +
    + + Filter Column + BETA +
    + `, + }, + ], + }, + }, + }, + { + id: 'percentComplete', + name: '% Complete', + field: 'percentComplete', + sortable: true, + filterable: true, + type: 'number', + filter: { model: Filters.slider, operator: '>=' }, + // Demo: Header Menu with Slot - showing interactive element (checkbox) + header: { + menu: { + commandItems: [ + { + command: 'recalc', + title: 'Recalculate', + iconCssClass: 'mdi mdi-refresh', + slotRenderer: () => ` +
    +
    %
    + Recalculate +
    + `, + }, + ], + }, + }, + }, + { + id: 'action', + name: 'Action', + field: 'action', + width: 70, + minWidth: 70, + maxWidth: 70, + cssClass: 'justify-center flex', + formatter: () => + `
    `, + excludeFromExport: true, + // Demo: Cell Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) + cellMenu: { + hideCloseButton: false, + commandTitle: 'Cell Actions', + // Demo: Menu-level default renderer that applies to all items unless overridden + defaultMenuItemRenderer: (cmdItem) => { + return ` +
    + ${cmdItem.iconCssClass ? `` : '◦'} + ${cmdItem.title} +
    + `; + }, + commandItems: [ + { + command: 'copy-cell', + title: 'Copy Cell Value', + iconCssClass: 'mdi mdi-content-copy', + action: (_e, args) => { + console.log('Copy cell value:', args.dataContext[args.column.field]); + alert(`Copied: ${args.dataContext[args.column.field]}`); + }, + }, + 'divider', + { + command: 'export-row', + title: 'Export Row', + iconCssClass: 'mdi mdi-download', + action: (_e, args) => { + console.log('Export row:', args.dataContext); + alert(`Export row #${args.dataContext.id}`); + }, + }, + { + command: 'export', + title: 'Export', + iconCssClass: 'mdi mdi-download', + commandItems: [ + { + command: 'export-excel', + title: 'Export as Excel', + iconCssClass: 'mdi mdi-file-excel-outline text-success', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to Excel`); + }, + }, + { + command: 'export-csv', + title: 'Export as CSV', + iconCssClass: 'mdi mdi-file-document-outline', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to CSV`); + }, + }, + { + command: 'export-pdf', + title: 'Export as PDF', + iconCssClass: 'mdi mdi-file-pdf-outline text-red', + action: (_e, args) => { + alert(`Export row #${args.dataContext.id} to PDF`); + }, + }, + ], + }, + { divider: true, command: '' }, + { + command: 'edit-row', + title: 'Edit Row', + // Individual slotRenderer overrides the defaultMenuItemRenderer + slotRenderer: (_item, args) => ` +
    +
    ✎
    + Edit Row #${args.dataContext.id} +
    + `, + action: (_e, args) => { + console.log('Edit row:', args.dataContext); + alert(`Edit row #${args.dataContext.id}`); + }, + }, + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: (_event, args) => { + const dataContext = args.dataContext; + if (confirm(`Do you really want to delete row (${args.row! + 1}) with "${dataContext.title}"`)) { + this.angularGrid?.gridService.deleteItemById(dataContext.id); + } + }, + }, + ], + }, + }, + ]; + + this.gridOptions = { + autoResize: { + container: '#demo-container', + }, + enableAutoResize: true, + enableCellNavigation: true, + enableFiltering: true, + enableSorting: true, + enableGrouping: true, + + // Header Menu with slots (already configured in columns above) + enableHeaderMenu: true, + headerMenu: { + hideColumnHideCommand: false, + // Demo: Menu-level default renderer for all header menu items + defaultMenuItemRenderer: (cmdItem) => { + return ` +
    + ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
    + `; + }, + }, + + // Cell Menu with slots (configured in the Action column above) + enableCellMenu: true, + + // Context Menu with slot examples + enableContextMenu: true, + contextMenu: { + // build your command items list + // spread built-in commands and optionally filter/sort them however you want + commandListBuilder: (builtInItems) => { + // commandItems.sort((a, b) => (a === 'divider' || b === 'divider' ? 0 : a.title! > b.title! ? -1 : 1)); + return [ + // filter commands if you want + // ...builtInItems.filter((x) => x !== 'divider' && x.command !== 'copy' && x.command !== 'clear-grouping'), + { + command: 'edit-cell', + title: 'Edit Cell', + // Demo: Individual slotRenderer overrides the menu's defaultMenuItemRenderer + slotRenderer: (cmdItem) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const containerDiv = createDomElement('div', { className: 'menu-item' }); + const iconDiv = createDomElement('div', { className: 'edit-cell-icon', textContent: '✎' }); + const textSpan = createDomElement('span', { textContent: cmdItem.title || '', style: { flex: '1' } }); + const kbdElm = createDomElement('kbd', { className: 'edit-cell', textContent: 'F2' }); + containerDiv.appendChild(iconDiv); + containerDiv.appendChild(textSpan); + containerDiv.appendChild(kbdElm); + + // Native event listeners for interactive effects + containerDiv.addEventListener('mouseover', () => { + iconDiv.style.transform = 'rotate(15deg) scale(1.1)'; + iconDiv.style.boxShadow = '0 2px 8px rgba(0,200,83,0.4)'; + }); + containerDiv.addEventListener('mouseout', () => { + iconDiv.style.transform = 'rotate(0deg) scale(1)'; + iconDiv.style.boxShadow = 'none'; + }); + + return containerDiv; + }, + action: () => alert('Edit cell'), + }, + ...builtInItems, + { divider: true, command: '' }, + { + command: 'export', + title: 'Export', + iconCssClass: 'mdi mdi-download', + commandItems: [ + { + command: 'export-excel', + title: 'Export as Excel', + iconCssClass: 'mdi mdi-file-excel-outline text-success', + action: () => alert('Export to Excel'), + }, + { + command: 'export-csv', + title: 'Export as CSV', + iconCssClass: 'mdi mdi-file-document-outline', + action: () => alert('Export to CSV'), + }, + { + command: 'export-pdf', + title: 'Export as PDF', + iconCssClass: 'mdi mdi-file-pdf-outline text-danger', + action: () => alert('Export to PDF'), + }, + ], + }, + { divider: true, command: '' }, + { + command: 'delete-row', + title: 'Delete Row', + iconCssClass: 'mdi mdi-delete text-danger', + action: () => alert('Delete row'), + }, + ] as Array; + }, + // Demo: Menu-level default renderer for context menu items + defaultMenuItemRenderer: (cmdItem) => { + return ` +
    + ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
    + `; + }, + }, + + // Grid Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) + enableGridMenu: true, + gridMenu: { + // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) + defaultMenuItemRenderer: (cmdItem) => { + return ` +
    + ${cmdItem.iconCssClass ? `` : ''} + ${cmdItem.title} +
    + `; + }, + commandListBuilder: (builtInItems) => { + return [ + ...builtInItems, + { divider: true, command: '' }, + { + command: 'export-excel', + title: 'Export to Excel', + iconCssClass: 'mdi mdi-file-excel-outline', + action: () => alert('Export to Excel'), + }, + { + command: 'export-csv', + title: 'Export to CSV', + iconCssClass: 'mdi mdi-download', + // Individual slotRenderer overrides the defaultMenuItemRenderer for this item + slotRenderer: (cmdItem) => ` +
    + + ${cmdItem.title} + CUSTOM +
    + `, + action: () => alert('Export to CSV'), + }, + { + command: 'refresh-data', + title: 'Refresh Data', + iconCssClass: 'mdi mdi-refresh', + // Demo: slotRenderer with keyboard shortcut + slotRenderer: (cmdItem) => { + // you can use `createDomElement()` from Slickgrid for easier DOM element creation + const menuItemElm = createDomElement('div', { className: 'menu-item' }); + const iconElm = createDomElement('i', { className: `${cmdItem.iconCssClass} menu-item-icon` }); + const menuItemLabelElm = createDomElement('span', { className: 'menu-item-label', textContent: cmdItem.title || '' }); + const kbdElm = createDomElement('kbd', { className: 'key-hint', textContent: 'F5' }); + menuItemElm.appendChild(iconElm); + menuItemElm.appendChild(menuItemLabelElm); + menuItemElm.appendChild(kbdElm); + return menuItemElm; + }, + action: () => alert('Refresh data'), + }, + ] as Array; + }, + }, + + // tooltip plugin + externalResources: [new SlickCustomTooltip()], + customTooltip: { + observeAllTooltips: true, + }, + }; + } + + clearGrouping() { + this.angularGrid?.dataView?.setGrouping([]); + } + + collapseAllGroups() { + this.angularGrid?.dataView?.collapseAllGroups(); + } + + expandAllGroups() { + this.angularGrid?.dataView?.expandAllGroups(); + } + + groupByDuration() { + // you need to manually add the sort icon(s) in UI + this.angularGrid?.slickGrid?.setSortColumns([{ columnId: 'duration', sortAsc: true }]); + this.angularGrid?.dataView?.setGrouping({ + getter: 'duration', + formatter: (g) => `Duration: ${g.value} (${g.count} items)`, + comparer: (a, b) => SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc), + aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')], + aggregateCollapsed: false, + lazyTotalsCalculation: true, + } as Grouping); + this.angularGrid?.slickGrid?.invalidate(); // invalidate all rows and re-render + } + + loadData(count: number): ReportItem[] { + const tmpData: ReportItem[] = []; + for (let i = 0; i < count; i++) { + const randomDuration = Math.round(Math.random() * 100); + const randomYear = 2000 + Math.floor(Math.random() * 10); + const randomMonth = Math.floor(Math.random() * 11); + const randomDay = Math.floor(Math.random() * 29); + const randomPercent = Math.round(Math.random() * 100); + + tmpData[i] = { + id: i, + title: 'Task ' + i, + duration: randomDuration, + cost: Math.round(Math.random() * 10000) / 100, + percentComplete: randomPercent, + start: new Date(randomYear, randomMonth, randomDay), + finish: new Date(randomYear, randomMonth + 1, randomDay), + }; + } + return tmpData; + } + + toggleSubTitle() { + this.hideSubTitle = !this.hideSubTitle; + const action = this.hideSubTitle ? 'add' : 'remove'; + document.querySelector('.subtitle')?.classList[action]('hidden'); + this.angularGrid.resizerService.resizeGrid(0); + } +} diff --git a/frameworks/angular-slickgrid/test/cypress/e2e/example51.cy.ts b/frameworks/angular-slickgrid/test/cypress/e2e/example51.cy.ts new file mode 100644 index 0000000000..80e5148c97 --- /dev/null +++ b/frameworks/angular-slickgrid/test/cypress/e2e/example51.cy.ts @@ -0,0 +1,382 @@ +import { format } from '@formkit/tempo'; + +describe('Example 51 - Menus with Slots', () => { + const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Action']; + + it('should display Example title', () => { + cy.visit(`${Cypress.config('baseUrl')}/example51`); + cy.get('h2').should('contain', 'Example 51: Menus with Slots'); + }); + + it('should have exact column titles in the grid', () => { + cy.get('#grid51') + .find('.slick-header-columns') + .children() + .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); + }); + + it('should open Context Menu hover "Duration" column and expect built-in and custom items listed in specific order', () => { + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick({ force: true }); + + // 1st item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.edit-cell-icon').contains('✎'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Edit Cell'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('kbd.edit-cell').contains('F2'); + + // icon should rotate while hovering + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseover'); + cy.wait(175); // wait for rotation + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item .edit-cell-icon') + .invoke('css', 'transform') // Get the transform property + .then((cssTransform) => { + const transformValue = cssTransform as unknown as string; // Cast to string + cy.getTransformValue(transformValue, true, 'rotate').then((rotationAngle) => { + expect(rotationAngle).to.approximately(13, 15); // 15 degrees rotation + }); + }); + + // 2nd item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item').find('i.mdi-content-copy').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item').find('span.menu-item-label').contains('Copy'); + + // 3rd item - divider + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(2)').should('have.class', 'slick-menu-item-divider'); + + // 4th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Clear all Grouping'); + + // 5th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item').find('i.mdi-arrow-collapse').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item') + .find('span.menu-item-label') + .contains('Collapse all Groups'); + + // 6th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5)').should('have.class', 'slick-menu-item-disabled'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('i.mdi-arrow-expand').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Expand all Groups'); + + // 7th item - divider + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(6)').should('have.class', 'slick-menu-item-divider'); + + // 8th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-download').should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Export'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(7)').find('.sub-item-chevron').should('exist'); + + // 9th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(8)').should('have.class', 'slick-menu-item-divider'); + + // 10th item + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(9) .menu-item') + .find('i.mdi-delete.text-danger') + .should('exist'); + cy.get('.slick-context-menu .slick-menu-command-list .slick-menu-item:nth(9) .menu-item') + .find('span.menu-item-label') + .contains('Delete Row'); + }); + + it('should open Export->Excel context sub-menu', () => { + const subCommands1 = ['Export as Excel', 'Export as CSV', 'Export as PDF']; + + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('[data-row="0"] > .slick-cell:nth(2)').should('contain', '0'); + cy.get('[data-row="0"] > .slick-cell:nth(2)').rightclick({ force: true }); + + cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains(/^Export$/) + .trigger('mouseover'); + + cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-command-list') + .should('exist') + .find('.slick-menu-item .menu-item') + .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); + + // click different sub-menu + cy.get('.slick-context-menu.slick-menu-level-1 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains('Export as Excel') + .should('exist') + .click() + .then(() => expect(stub.getCall(0)).to.be.calledWith('Export to Excel')); + + cy.get('.slick-submenu').should('have.length', 0); + }); + + it('should open Header Menu from the "Title" column and expect some commands to have keyboard hints on the right side', () => { + cy.get('.slick-header-column:nth(0)').trigger('mouseover', { force: true }); + cy.get('.slick-header-column:nth(0)').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('i.mdi-arrow-expand-horizontal') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('span.menu-item-label') + .contains('Resize by Content'); + + // 2nd item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('i.mdi-sort-ascending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('span.menu-item-label') + .contains('Sort Ascending'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('kbd.key-hint').contains('Alt+↑'); + + // 4th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-sort-descending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Sort Descending'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('kbd.key-hint').contains('Alt+↓'); + + // 5th item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('i.mdi-filter-remove-outline') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Remove Filter'); + + // 7th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('i.mdi-sort-variant-off').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('span.menu-item-label') + .contains('Remove Sort'); + + // 8th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Hide Column'); + }); + + it('should open Header Menu from the "Duration" column and expect some commands to have tags on the right side', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover', { force: true }); + cy.get('.slick-header-column:nth(1)').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('i.mdi-arrow-expand-horizontal') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('span.menu-item-label') + .contains('Resize by Content'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('span.key-hint.danger').contains('NEW'); + + // 2nd item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('i.mdi-sort-ascending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('span.menu-item-label') + .contains('Sort Ascending'); + + // 4th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-sort-descending').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item') + .find('span.menu-item-label') + .contains('Sort Descending'); + + // 5th item - divider + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('i.mdi-filter-remove-outline') + .should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('span.menu-item-label') + .contains('Remove Filter'); + + // 7th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('i.mdi-sort-variant-off').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('span.menu-item-label') + .contains('Remove Sort'); + + // 8th item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item').find('i.mdi-close').should('exist'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(7) .menu-item') + .find('span.menu-item-label') + .contains('Hide Column'); + }); + + it('should open Header Menu from the "Cost" column and expect first item to have a dynamic tooltip timestamp when hovering', () => { + cy.get('#grid51').find('.slick-header-column:nth(4)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + // 1st item + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.advanced-export-icon').contains('📊'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').contains('Advanced Export'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('kbd.key-hint').contains('Ctrl+E'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').should( + 'have.css', + 'background-color', + 'rgba(0, 0, 0, 0)' + ); + + // icon should scale up + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseover'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item .advanced-export-icon') + .invoke('css', 'transform') + .then((cssTransform) => { + const transformValue = cssTransform as unknown as string; // Cast to string + cy.getTransformValue(transformValue, true, 'scale').then((scaleValue) => { + expect(scaleValue).to.be.approximately(1.1, 1.15); // Check the scale value if applied + }); + }); + + const today = format(new Date(), 'YYYY-MM-DD'); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').should( + 'have.css', + 'background-color', + 'rgb(133, 70, 133)' + ); + cy.get('.slick-custom-tooltip').contains(`📈 Export timestamp: ${today}`); + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0)').trigger('mouseout'); + cy.get('.slick-custom-tooltip').should('not.exist'); + cy.get('body').click(); + }); + + it('should open Action Menu from last column "Action" column and expect custom items listed in specific order', () => { + cy.get('[data-row="1"] > .slick-cell:nth(6)').click(); + cy.get('.slick-command-header.with-title.with-close').contains('Cell Actions'); + + // 1st item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item').find('.mdi-content-copy').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Copy Cell Value'); + + // 2nd item - divider + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(1)').should('have.class', 'slick-menu-item-divider'); + + // 3rd item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').find('.mdi-download').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item span').contains('Export Row'); + + // 4th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('i.mdi-download').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').find('span.menu-item-label').contains('Export'); + + // 5th item - divider + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(4)').should('have.class', 'slick-menu-item-divider'); + + // 6th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('.edit-cell-icon').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item .edit-cell-icon').contains('✎'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(5)').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)'); + + // 7th item + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('.mdi-delete.text-danger').should('exist'); + cy.get('.slick-cell-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Delete Row'); + }); + + it('should open Export->Excel cell sub-menu', () => { + const subCommands1 = ['Export as Excel', 'Export as CSV', 'Export as PDF']; + + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.get('.slick-cell-menu.slick-menu-level-0 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains(/^Export$/) + .trigger('mouseover'); + + cy.get('.slick-cell-menu.slick-menu-level-1 .slick-menu-command-list') + .should('exist') + .find('.slick-menu-item .menu-item') + .each(($command, index) => expect($command.text()).to.contain(subCommands1[index])); + + // click different sub-menu + cy.get('.slick-cell-menu.slick-menu-level-1 .slick-menu-command-list') + .find('.slick-menu-item .menu-item') + .contains('Export as Excel') + .should('exist') + .click() + .then(() => expect(stub.getCall(0)).to.be.calledWith('Export row #1 to Excel')); + + cy.get('.slick-submenu').should('have.length', 0); + }); + + it('should open Grid Menu and expect built-in commands first then custom items listed in specific order', () => { + cy.get('.slick-grid-menu-button.mdi-menu').click(); + + // 1st item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') + .find('.mdi-filter-remove-outline.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item span').contains('Clear all Filters'); + + // 2nd item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item') + .find('.mdi-sort-variant-off.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(1) .menu-item span').contains('Clear all Sorting'); + + // 3rd item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item') + .find('.mdi-flip-vertical.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item span').contains('Toggle Filter Row'); + + // 4th item - divider + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(3)').should('have.class', 'slick-menu-item-divider'); + + // 5th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item') + .find('.mdi-file-excel-outline.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(4) .menu-item span').contains('Export to Excel'); + + // 6th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item') + .find('.mdi-download.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item span').contains('Export to CSV'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(5) .menu-item').find('span.key-hint.warn').contains('CUSTOM'); + + // 7th item + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item') + .find('.mdi-refresh.menu-item-icon') + .should('exist'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item span').contains('Refresh Data'); + cy.get('.slick-grid-menu .slick-menu-command-list .slick-menu-item:nth(6) .menu-item').find('kbd.key-hint').contains('F5'); + }); + + it('should sort ascending "Duration" even though the header menu item was override without an action callback', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(2) .menu-item').should('contain', 'Sort Ascending').click(); + + cy.get('[data-row=0]').children('.slick-cell:nth(1)').should('contain', '0'); + cy.get('[data-row=1]').children('.slick-cell:nth(1)').should('contain', '0'); + cy.get('[data-row=2]').children('.slick-cell:nth(1)').should('contain', '0'); + }); + + it('should sort descending "Duration" even though the header menu item was override without an action callback', () => { + cy.get('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + + cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(3) .menu-item').should('contain', 'Sort Descending').click(); + + cy.get('[data-row=0]').children('.slick-cell:nth(1)').should('contain', '100'); + cy.get('[data-row=1]').children('.slick-cell:nth(1)').should('contain', '100'); + cy.get('[data-row=2]').children('.slick-cell:nth(1)').should('contain', '100'); + }); +}); diff --git a/frameworks/aurelia-slickgrid/docs/menu-slots.md b/frameworks/aurelia-slickgrid/docs/menu-slots.md index 61f036b738..14b9f9bb47 100644 --- a/frameworks/aurelia-slickgrid/docs/menu-slots.md +++ b/frameworks/aurelia-slickgrid/docs/menu-slots.md @@ -4,6 +4,31 @@ All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cro > **Note:** This documentation covers **how menu items are rendered** (visual presentation). If you need to **dynamically modify which commands appear** in the menu (filtering, sorting, adding/removing items), see the `commandListBuilder` callback documented in [Grid Menu](grid-functionalities/grid-menu.md), [Context Menu](grid-functionalities/context-menu.md), or [Header Menu](grid-functionalities/header-menu-header-buttons.md). +### TypeScript Tip: Type Inference with commandListBuilder + +When using `commandListBuilder` to add custom menu items with slotRenderer callbacks, **cast the return value to the appropriate type** to enable proper type parameters in callbacks: + +```typescript +contextMenu: { + commandListBuilder: (builtInItems) => { + return [ + ...builtInItems, + { + command: 'custom-action', + title: 'My Action', + slotRenderer: (cmdItem, args) => `
    ${cmdItem.title}
    `, + } + ] as Array; + } +} +``` + +Alternatively, if you only have built-in items and dividers, you can use the simpler cast: + +```typescript +return [...] as Array; +``` + ### Core Concept Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. @@ -11,7 +36,7 @@ Each menu item can define a `slotRenderer` callback function that receives the i ### Slot Renderer Callback ```typescript -slotRenderer?: (cmdItem: any, args: any, event?: Event) => string | HTMLElement +slotRenderer?: (cmdItem: MenuItem, args: MenuCallbackArgs, event?: Event) => string | HTMLElement ``` - **cmdItem** - The menu cmdItem object containing command, title, iconCssClass, etc. diff --git a/frameworks/slickgrid-react/docs/menu-slots.md b/frameworks/slickgrid-react/docs/menu-slots.md index 61f036b738..14b9f9bb47 100644 --- a/frameworks/slickgrid-react/docs/menu-slots.md +++ b/frameworks/slickgrid-react/docs/menu-slots.md @@ -4,6 +4,31 @@ All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cro > **Note:** This documentation covers **how menu items are rendered** (visual presentation). If you need to **dynamically modify which commands appear** in the menu (filtering, sorting, adding/removing items), see the `commandListBuilder` callback documented in [Grid Menu](grid-functionalities/grid-menu.md), [Context Menu](grid-functionalities/context-menu.md), or [Header Menu](grid-functionalities/header-menu-header-buttons.md). +### TypeScript Tip: Type Inference with commandListBuilder + +When using `commandListBuilder` to add custom menu items with slotRenderer callbacks, **cast the return value to the appropriate type** to enable proper type parameters in callbacks: + +```typescript +contextMenu: { + commandListBuilder: (builtInItems) => { + return [ + ...builtInItems, + { + command: 'custom-action', + title: 'My Action', + slotRenderer: (cmdItem, args) => `
    ${cmdItem.title}
    `, + } + ] as Array; + } +} +``` + +Alternatively, if you only have built-in items and dividers, you can use the simpler cast: + +```typescript +return [...] as Array; +``` + ### Core Concept Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. @@ -11,7 +36,7 @@ Each menu item can define a `slotRenderer` callback function that receives the i ### Slot Renderer Callback ```typescript -slotRenderer?: (cmdItem: any, args: any, event?: Event) => string | HTMLElement +slotRenderer?: (cmdItem: MenuItem, args: MenuCallbackArgs, event?: Event) => string | HTMLElement ``` - **cmdItem** - The menu cmdItem object containing command, title, iconCssClass, etc. diff --git a/frameworks/slickgrid-vue/docs/menu-slots.md b/frameworks/slickgrid-vue/docs/menu-slots.md index 61f036b738..14b9f9bb47 100644 --- a/frameworks/slickgrid-vue/docs/menu-slots.md +++ b/frameworks/slickgrid-vue/docs/menu-slots.md @@ -4,6 +4,31 @@ All menu plugins (Header Menu, Cell Menu, Context Menu, Grid Menu) support **cro > **Note:** This documentation covers **how menu items are rendered** (visual presentation). If you need to **dynamically modify which commands appear** in the menu (filtering, sorting, adding/removing items), see the `commandListBuilder` callback documented in [Grid Menu](grid-functionalities/grid-menu.md), [Context Menu](grid-functionalities/context-menu.md), or [Header Menu](grid-functionalities/header-menu-header-buttons.md). +### TypeScript Tip: Type Inference with commandListBuilder + +When using `commandListBuilder` to add custom menu items with slotRenderer callbacks, **cast the return value to the appropriate type** to enable proper type parameters in callbacks: + +```typescript +contextMenu: { + commandListBuilder: (builtInItems) => { + return [ + ...builtInItems, + { + command: 'custom-action', + title: 'My Action', + slotRenderer: (cmdItem, args) => `
    ${cmdItem.title}
    `, + } + ] as Array; + } +} +``` + +Alternatively, if you only have built-in items and dividers, you can use the simpler cast: + +```typescript +return [...] as Array; +``` + ### Core Concept Each menu item can define a `slotRenderer` callback function that receives the item and args, and returns either an HTML string or an HTMLElement. This single API works uniformly across all menu plugins. @@ -11,7 +36,7 @@ Each menu item can define a `slotRenderer` callback function that receives the i ### Slot Renderer Callback ```typescript -slotRenderer?: (cmdItem: any, args: any, event?: Event) => string | HTMLElement +slotRenderer?: (cmdItem: MenuItem, args: MenuCallbackArgs, event?: Event) => string | HTMLElement ``` - **cmdItem** - The menu cmdItem object containing command, title, iconCssClass, etc. diff --git a/packages/common/src/interfaces/menuItem.interface.ts b/packages/common/src/interfaces/menuItem.interface.ts index 75a3ed6374..bb858b5e97 100644 --- a/packages/common/src/interfaces/menuItem.interface.ts +++ b/packages/common/src/interfaces/menuItem.interface.ts @@ -68,7 +68,7 @@ export interface MenuItem { * return div; * } */ - slotRenderer?: (cmdItem: any, args: O, event?: Event) => string | HTMLElement; + slotRenderer?: (cmdItem: MenuItem, args: O, event?: Event) => string | HTMLElement; // -- // action/override callbacks diff --git a/packages/common/src/interfaces/menuOption.interface.ts b/packages/common/src/interfaces/menuOption.interface.ts index 092641520d..4d2ab4c87d 100644 --- a/packages/common/src/interfaces/menuOption.interface.ts +++ b/packages/common/src/interfaces/menuOption.interface.ts @@ -4,6 +4,7 @@ import type { HeaderMenuCommandItemCallbackArgs, MenuCommandItem, MenuFromCellCallbackArgs, + MenuItem, } from './index.js'; export interface MenuOption { @@ -55,7 +56,7 @@ export interface MenuOption string | HTMLElement; + defaultMenuItemRenderer?: (cmdItem: MenuItem, args: T) => string | HTMLElement; /** Callback method that user can override the default behavior of enabling/disabling an item from the list. */ menuUsabilityOverride?: (args: T) => boolean; diff --git a/test/cypress/e2e/example40.cy.ts b/test/cypress/e2e/example40.cy.ts index 3e9259b90e..b1db4adef0 100644 --- a/test/cypress/e2e/example40.cy.ts +++ b/test/cypress/e2e/example40.cy.ts @@ -116,7 +116,8 @@ describe('Example 40 - Menus with Slots', () => { }); it('should open Header Menu from the "Title" column and expect some commands to have keyboard hints on the right side', () => { - cy.get('.grid40').find('.slick-header-column:nth(0)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + cy.get('.slick-header-column:nth(0)').trigger('mouseover', { force: true }); + cy.get('.slick-header-column:nth(0)').children('.slick-header-menu-button').invoke('show').click(); // 1st item cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') @@ -168,7 +169,8 @@ describe('Example 40 - Menus with Slots', () => { }); it('should open Header Menu from the "Duration" column and expect some commands to have tags on the right side', () => { - cy.get('.grid40').find('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + cy.get('.slick-header-column:nth(1)').trigger('mouseover', { force: true }); + cy.get('.slick-header-column:nth(1)').children('.slick-header-menu-button').invoke('show').click(); // 1st item cy.get('.slick-header-menu .slick-menu-command-list .slick-menu-item:nth(0) .menu-item') From 0e268f3e6e419444ec6f1770a708f2a79df04d5d Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 22:26:58 -0500 Subject: [PATCH 17/24] chore: add `hideCommands` and deprecate all hide props --- demos/vanilla/src/examples/example40.ts | 4 +- .../__tests__/slickContextMenu.spec.ts | 3 +- .../__tests__/slickGridMenu.spec.ts | 32 +++++++ .../__tests__/slickHeaderMenu.spec.ts | 91 +++++++++++++++---- .../common/src/extensions/menuBaseClass.ts | 17 +++- .../common/src/extensions/slickContextMenu.ts | 26 ++++-- .../common/src/extensions/slickGridMenu.ts | 33 ++++--- .../common/src/extensions/slickHeaderMenu.ts | 60 +++++++++--- .../src/interfaces/contextMenu.interface.ts | 14 +++ .../interfaces/contextMenuOption.interface.ts | 22 ++--- .../src/interfaces/gridMenu.interface.ts | 16 ++++ .../interfaces/gridMenuOption.interface.ts | 22 ++--- .../src/interfaces/headerMenu.interface.ts | 16 ++++ .../interfaces/headerMenuOption.interface.ts | 16 ++-- 14 files changed, 286 insertions(+), 86 deletions(-) diff --git a/demos/vanilla/src/examples/example40.ts b/demos/vanilla/src/examples/example40.ts index 15f60bf9f5..5545f8c47b 100644 --- a/demos/vanilla/src/examples/example40.ts +++ b/demos/vanilla/src/examples/example40.ts @@ -396,7 +396,7 @@ export default class Example40 { // Header Menu with slots (already configured in columns above) enableHeaderMenu: true, headerMenu: { - hideColumnHideCommand: false, + // hideCommands: ['column-resize-by-content', 'clear-sort'], // Demo: Menu-level default renderer for all header menu items defaultMenuItemRenderer: (cmdItem, _args) => { return ` @@ -414,6 +414,7 @@ export default class Example40 { // Context Menu with slot examples enableContextMenu: true, contextMenu: { + // hideCommands: ['clear-grouping', 'copy'], // build your command items list // spread built-in commands and optionally filter/sort them however you want commandListBuilder: (builtInItems) => { @@ -499,6 +500,7 @@ export default class Example40 { // Grid Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) enableGridMenu: true, gridMenu: { + // hideCommands: ['toggle-preheader', 'toggle-filter'], // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) defaultMenuItemRenderer: (cmdItem, _args) => { return ` diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts index a3b29ae990..fbc69b4810 100644 --- a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts @@ -1433,7 +1433,8 @@ describe('ContextMenu Plugin', () => { ...gridOptionsMock, enableExcelExport: true, enableTextExport: false, - contextMenu: { hideCopyCellValueCommand: true, hideExportCsvCommand: true, hideExportExcelCommand: false }, + contextMenu: { hideCommands: ['copy', 'export-csv'] }, + // contextMenu: { hideCopyCellValueCommand: true, hideExportCsvCommand: true, hideExportExcelCommand: false }, } as GridOption; vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock); vi.spyOn(gridStub, 'getOptions').mockReturnValue(copyGridOptionsMock); diff --git a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts index 23242374ef..e681f14280 100644 --- a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts @@ -1529,6 +1529,35 @@ describe('GridMenuControl', () => { ]); }); + it('should have only 1 menu "clear-filter" when all other menus are set in `hideCommands` with "enableFilering" is set', () => { + const copyGridOptionsMock: GridOption = { + ...gridOptionsMock, + enableFiltering: true, + showHeaderRow: true, + gridMenu: { + hideCommands: ['clear-pinning', 'refresh-dataset', 'toggle-filter', 'toggle-dark-mode'], + commandLabels: gridOptionsMock.gridMenu!.commandLabels, + }, + }; + vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock); + vi.spyOn(gridStub, 'getOptions').mockReturnValue(copyGridOptionsMock); + control.columns = columnsMock; + control.init(); + control.init(); // calling 2x register to make sure it doesn't duplicate commands + expect(SharedService.prototype.gridOptions.gridMenu!.commandItems).toEqual([ + { + _orgTitle: '', + iconCssClass: 'mdi mdi-filter-remove-outline', + titleKey: 'CLEAR_ALL_FILTERS', + title: 'Supprimer tous les filtres', + disabled: false, + command: 'clear-filter', + positionOrder: 50, + action: expect.any(Function), + }, + ]); + }); + it('should have only 1 menu "clear-filter" when all other menus are defined as hidden & when "enableFilering" is set', () => { const copyGridOptionsMock = { ...gridOptionsMock, @@ -1568,6 +1597,7 @@ describe('GridMenuControl', () => { showHeaderRow: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu!.commandLabels, + // @deprecated `hideXYZ`, replace by `hideCommands` in next major hideClearFrozenColumnsCommand: true, hideClearAllFiltersCommand: true, hideToggleDarkModeCommand: true, @@ -1598,6 +1628,7 @@ describe('GridMenuControl', () => { ...gridOptionsMock, gridMenu: { commandLabels: gridOptionsMock.gridMenu!.commandLabels, + // @deprecated `hideXYZ`, replace by `hideCommands` in next major hideClearFrozenColumnsCommand: true, hideClearAllFiltersCommand: true, hideToggleFilterCommand: true, @@ -1631,6 +1662,7 @@ describe('GridMenuControl', () => { showHeaderRow: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu!.commandLabels, + // @deprecated `hideXYZ`, replace by `hideCommands` in next major hideClearFrozenColumnsCommand: true, hideClearAllFiltersCommand: true, hideToggleDarkModeCommand: true, diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts index bcad77d7a8..2318e36c3d 100644 --- a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts @@ -1081,6 +1081,61 @@ describe('HeaderMenu Plugin', () => { vi.clearAllMocks(); }); + it('should expect menu related to Freeze Columns when "hideFreezeColumnsCommand" is disabled and also expect grid "setOptions" method to be called with current column position', async () => { + vi.spyOn(gridStub, 'validateColumnFreezeWidth').mockReturnValue(true); + const setOptionsSpy = vi.spyOn(gridStub, 'setOptions'); + vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue({ + ...gridOptionsMock, + headerMenu: { + hideCommands: ['column-resize-by-content', 'hide-column'], + }, + }); + + // calling `onBeforeSetColumns` 2x times shouldn't duplicate clear sort menu + gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData as any, gridStub); + gridStub.onBeforeSetColumns.notify({ previousColumns: [], newColumns: columnsMock, grid: gridStub }, eventData as any, gridStub); + gridStub.onHeaderCellRendered.notify({ column: columnsMock[1], node: headerDiv, grid: gridStub }, eventData as any, gridStub); + const headerButtonElm = headerDiv.querySelector('.slick-header-menu-button') as HTMLDivElement; + headerButtonElm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false })); + + const commandDivElm = gridContainerDiv.querySelector('[data-command="freeze-columns"]') as HTMLDivElement; + const commandIconElm = commandDivElm.querySelector('.slick-menu-icon') as HTMLDivElement; + const commandLabelElm = commandDivElm.querySelector('.slick-menu-content') as HTMLDivElement; + expect(columnsMock[1].header!.menu!.commandItems!).toEqual([ + { + _orgTitle: '', + iconCssClass: 'mdi mdi-pin-outline', + title: 'Freeze Columns', + titleKey: 'FREEZE_COLUMNS', + command: 'freeze-columns', + positionOrder: 45, + action: expect.any(Function), + }, + { divider: true, command: 'divider-1', positionOrder: 48 }, + ]); + expect(commandIconElm.classList.contains('mdi-pin-outline')).toBeTruthy(); + expect(commandLabelElm.textContent).toBe('Freeze Columns'); + + await translateService.use('fr'); + plugin.translateHeaderMenu(); + expect(columnsMock[1].header!.menu!.commandItems!).toEqual([ + { + _orgTitle: '', + iconCssClass: 'mdi mdi-pin-outline', + title: 'Geler les colonnes', + titleKey: 'FREEZE_COLUMNS', + command: 'freeze-columns', + positionOrder: 45, + action: expect.any(Function), + }, + { divider: true, command: 'divider-1', positionOrder: 48 }, + ]); + + commandDivElm.dispatchEvent(new Event('click')); // execute command + expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: 1, enableMouseWheelScrollHandler: true }, false, true); + expect(gridStub.setColumns).toHaveBeenCalledWith(columnsMock); + }); + it('should expect menu related to Freeze Columns when "hideFreezeColumnsCommand" is disabled and also expect grid "setOptions" method to be called with current column position', async () => { vi.spyOn(gridStub, 'validateColumnFreezeWidth').mockReturnValue(true); const setOptionsSpy = vi.spyOn(gridStub, 'setOptions'); @@ -1109,7 +1164,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 45, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, ]); expect(commandIconElm.classList.contains('mdi-pin-outline')).toBeTruthy(); expect(commandLabelElm.textContent).toBe('Freeze Columns'); @@ -1126,7 +1181,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 45, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, ]); commandDivElm.dispatchEvent(new Event('click')); // execute command @@ -1139,6 +1194,7 @@ describe('HeaderMenu Plugin', () => { const setOptionsSpy = vi.spyOn(gridStub, 'setOptions'); vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue({ ...gridOptionsMock, + // @deprecated `hideXYZ`, replace by `hideCommands` in next major headerMenu: { hideFreezeColumnsCommand: false, hideColumnHideCommand: true, hideColumnResizeByContentCommand: true }, frozenColumn: 1, }); @@ -1163,7 +1219,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 45, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, ]); expect(commandIconElm.classList.contains('mdi-pin-off-outline')).toBeTruthy(); expect(commandLabelElm.textContent).toBe('Unfreeze Columns'); @@ -1180,7 +1236,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 45, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, ]); commandDivElm.dispatchEvent(new Event('click')); // execute command @@ -1195,6 +1251,7 @@ describe('HeaderMenu Plugin', () => { vi.spyOn(gridStub, 'validateColumnFreezeWidth').mockReturnValue(true); vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue({ ...gridOptionsMock, + // @deprecated `hideXYZ`, replace by `hideCommands` in next major headerMenu: { hideFreezeColumnsCommand: false, hideColumnHideCommand: true, hideColumnResizeByContentCommand: true }, }); vi.spyOn(gridStub, 'getOptions').mockReturnValueOnce({ frozenColumn: -1 } as GridOption); @@ -1215,7 +1272,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 45, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, ]); commandDivElm.dispatchEvent(new Event('click')); // execute command @@ -1233,6 +1290,7 @@ describe('HeaderMenu Plugin', () => { sharedService.hasColumnsReordered = true; vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue({ ...gridOptionsMock, + // @deprecated `hideXYZ`, replace by `hideCommands` in next major headerMenu: { hideFreezeColumnsCommand: false, hideColumnHideCommand: true, @@ -1257,7 +1315,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 45, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, ]); expect(commandDivElm).toBeFalsy(); }); @@ -1267,6 +1325,7 @@ describe('HeaderMenu Plugin', () => { vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue({ ...gridOptionsMock, enableFiltering: true, + // @deprecated `hideXYZ`, replace by `hideCommands` in next major headerMenu: { hideFilterCommand: false, hideFreezeColumnsCommand: true, hideColumnHideCommand: true, hideColumnResizeByContentCommand: true }, }); @@ -1334,7 +1393,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 47, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, { _orgTitle: '', iconCssClass: 'mdi mdi-close', @@ -1398,7 +1457,7 @@ describe('HeaderMenu Plugin', () => { titleKey: 'COLUMN_RESIZE_BY_CONTENT', action: expect.any(Function), }, - { command: '', divider: true, positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, { _orgTitle: '', command: 'filter-shortcuts-root-menu', @@ -1425,7 +1484,7 @@ describe('HeaderMenu Plugin', () => { title: 'Filter Shortcuts', titleKey: 'FILTER_SHORTCUTS', }, - { command: '', divider: true, positionOrder: 56 }, + { divider: true, command: 'divider-3', positionOrder: 56 }, { _orgTitle: '', command: 'hide-column', @@ -1480,7 +1539,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 45, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, { _orgTitle: '', iconCssClass: 'mdi mdi-close', @@ -1577,7 +1636,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 51, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 52 }, + { divider: true, command: 'divider-2', positionOrder: 52 }, { _orgTitle: '', iconCssClass: 'mdi mdi-sort-variant-off', @@ -1612,7 +1671,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 51, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 52 }, + { divider: true, command: 'divider-2', positionOrder: 52 }, { _orgTitle: '', iconCssClass: 'mdi mdi-sort-variant-off', @@ -1662,7 +1721,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 45, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, ]); commandDivElm.dispatchEvent(new Event('click')); // execute command @@ -1707,7 +1766,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 45, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 48 }, + { divider: true, command: 'divider-1', positionOrder: 48 }, ]); commandDivElm.dispatchEvent(new Event('click')); // execute command @@ -1757,7 +1816,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 51, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 52 }, + { divider: true, command: 'divider-2', positionOrder: 52 }, { _orgTitle: '', iconCssClass: 'mdi mdi-sort-variant-off', @@ -1819,7 +1878,7 @@ describe('HeaderMenu Plugin', () => { positionOrder: 51, action: expect.any(Function), }, - { divider: true, command: '', positionOrder: 52 }, + { divider: true, command: 'divider-2', positionOrder: 52 }, { _orgTitle: '', iconCssClass: 'mdi mdi-sort-variant-off', diff --git a/packages/common/src/extensions/menuBaseClass.ts b/packages/common/src/extensions/menuBaseClass.ts index c3feeb0b5b..86a480dd20 100644 --- a/packages/common/src/extensions/menuBaseClass.ts +++ b/packages/common/src/extensions/menuBaseClass.ts @@ -145,23 +145,34 @@ export class MenuBaseClass { * @param originalMenuItems * @param builtInMenuItem * @param showCommand - is command hidden from menu option (deprecated) + * @returns - returns true when added to the commands array */ protected addMissingCommandOrAction( builtInMenuItem: T | 'divider', targetMenuItems: Array, - originalMenuItems?: Array - ): void { - if (builtInMenuItem !== 'divider') { + originalMenuItems: Array | undefined, + hideCommands: string[] | undefined + ): boolean { + // remove any commands that the user doesn't want + let skip = false; + if (hideCommands) { + skip = builtInMenuItem !== 'divider' && new Set(hideCommands).has(builtInMenuItem.command); + } + + if (builtInMenuItem !== 'divider' && !skip) { const cmdName = builtInMenuItem.command; const cmd = (originalMenuItems ?? targetMenuItems).find((item) => item !== 'divider' && item.command === cmdName); if (!cmd) { targetMenuItems.push(builtInMenuItem); + return true; } else if (!(cmd as T).action) { // action might be missing (custom menu items), if so copy over from built-in (cmd as T).action = builtInMenuItem.action; } } + + return false; } /** diff --git a/packages/common/src/extensions/slickContextMenu.ts b/packages/common/src/extensions/slickContextMenu.ts index 9f436f0bc8..8508628b7b 100644 --- a/packages/common/src/extensions/slickContextMenu.ts +++ b/packages/common/src/extensions/slickContextMenu.ts @@ -211,7 +211,8 @@ export class SlickContextMenu extends MenuFromCellBaseClass { }, }, menuCommandItems, - originalCommandItems + originalCommandItems, + contextMenu.hideCommands ); } @@ -243,7 +244,8 @@ export class SlickContextMenu extends MenuFromCellBaseClass { }, }, menuCommandItems, - originalCommandItems + originalCommandItems, + contextMenu.hideCommands ); } @@ -270,7 +272,8 @@ export class SlickContextMenu extends MenuFromCellBaseClass { }, }, menuCommandItems, - originalCommandItems + originalCommandItems, + contextMenu.hideCommands ); } @@ -299,7 +302,8 @@ export class SlickContextMenu extends MenuFromCellBaseClass { }, }, menuCommandItems, - originalCommandItems + originalCommandItems, + contextMenu.hideCommands ); } @@ -331,14 +335,15 @@ export class SlickContextMenu extends MenuFromCellBaseClass { }, }, menuCommandItems, - originalCommandItems + originalCommandItems, + contextMenu.hideCommands ); } // -- Grouping Commands if (gridOptions && (gridOptions.enableGrouping || gridOptions.enableDraggableGrouping || gridOptions.enableTreeData)) { // add a divider (separator) between the top sort commands and the other clear commands - if (contextMenu && !contextMenu.hideCopyCellValueCommand) { + if (contextMenu && !contextMenu.hideCopyCellValueCommand && !contextMenu.hideCommands?.includes('copy')) { menuCommandItems.push({ divider: true, command: 'divider-1', positionOrder: 54 }); } @@ -363,7 +368,8 @@ export class SlickContextMenu extends MenuFromCellBaseClass { }, }, menuCommandItems, - originalCommandItems + originalCommandItems, + contextMenu.hideCommands ); } @@ -395,7 +401,8 @@ export class SlickContextMenu extends MenuFromCellBaseClass { }, }, menuCommandItems, - originalCommandItems + originalCommandItems, + contextMenu.hideCommands ); } @@ -427,7 +434,8 @@ export class SlickContextMenu extends MenuFromCellBaseClass { }, }, menuCommandItems, - originalCommandItems + originalCommandItems, + contextMenu.hideCommands ); } } diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts index d81a9a04d9..37f56165c3 100644 --- a/packages/common/src/extensions/slickGridMenu.ts +++ b/packages/common/src/extensions/slickGridMenu.ts @@ -559,7 +559,8 @@ export class SlickGridMenu extends MenuBaseClass { action: this.clearPinning.bind(this), }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } @@ -577,7 +578,8 @@ export class SlickGridMenu extends MenuBaseClass { action: this.clearFilters.bind(this), }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } @@ -594,7 +596,8 @@ export class SlickGridMenu extends MenuBaseClass { action: this.toggleFilterBar.bind(this), }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } @@ -611,7 +614,8 @@ export class SlickGridMenu extends MenuBaseClass { action: () => this.extensionUtility.refreshBackendDataset(), }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } } @@ -629,7 +633,8 @@ export class SlickGridMenu extends MenuBaseClass { action: this.toggleDarkMode.bind(this), }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } @@ -650,7 +655,8 @@ export class SlickGridMenu extends MenuBaseClass { }, }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } } @@ -669,7 +675,8 @@ export class SlickGridMenu extends MenuBaseClass { action: this.clearSorting.bind(this), }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } } @@ -687,7 +694,8 @@ export class SlickGridMenu extends MenuBaseClass { action: this.exportCsv.bind(this), }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } @@ -704,7 +712,8 @@ export class SlickGridMenu extends MenuBaseClass { action: this.exportExcel.bind(this), }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } @@ -721,7 +730,8 @@ export class SlickGridMenu extends MenuBaseClass { action: this.exportPdf.bind(this), }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } @@ -738,7 +748,8 @@ export class SlickGridMenu extends MenuBaseClass { action: this.exportTextDelimited.bind(this), }, gridMenuCommandItems, - originalCommandItems + originalCommandItems, + this._addonOptions.hideCommands ); } diff --git a/packages/common/src/extensions/slickHeaderMenu.ts b/packages/common/src/extensions/slickHeaderMenu.ts index bc74e1228e..18a3a41888 100644 --- a/packages/common/src/extensions/slickHeaderMenu.ts +++ b/packages/common/src/extensions/slickHeaderMenu.ts @@ -291,7 +291,7 @@ export class SlickHeaderMenu extends MenuBaseClass { columnDef.header.menu = { commandItems: [] }; } - const columnHeaderMenuItems: Array = columnDef?.header?.menu?.commandItems ?? []; + let columnHeaderMenuItems: Array = columnDef?.header?.menu?.commandItems ?? []; // Freeze Column (pinning) let hasFrozenOrResizeCommand = false; @@ -312,7 +312,9 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 45, action: (_e, args) => this.freezeOrUnfreezeColumns(args.column, cmdUnfreeze), }, - columnHeaderMenuItems + columnHeaderMenuItems, + undefined, + headerMenuOptions.hideCommands ); } else { // make sure the "unfreeze-columns" doesn't exist before adding the "freeze-columns" @@ -329,7 +331,9 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 45, action: (_e, args) => this.freezeOrUnfreezeColumns(args.column, cmdFreeze), }, - columnHeaderMenuItems + columnHeaderMenuItems, + undefined, + headerMenuOptions.hideCommands ); } } @@ -338,6 +342,7 @@ export class SlickHeaderMenu extends MenuBaseClass { if ( headerMenuOptions && !headerMenuOptions.hideColumnResizeByContentCommand && + !headerMenuOptions.hideCommands?.includes('column-resize-by-content') && this.sharedService.gridOptions.enableColumnResizeOnDoubleClick ) { hasFrozenOrResizeCommand = true; @@ -350,17 +355,26 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 47, action: (_e, args) => this.pubSubService.publish('onHeaderMenuColumnResizeByContent', { columnId: args.column.id }), }, - columnHeaderMenuItems + columnHeaderMenuItems, + undefined, + headerMenuOptions.hideCommands ); } // add a divider (separator) between the top freeze columns commands and the rest of the commands if (hasFrozenOrResizeCommand && !columnHeaderMenuItems.some((item) => item !== 'divider' && item.positionOrder === 48)) { - columnHeaderMenuItems.push({ divider: true, command: '', positionOrder: 48 }); + columnHeaderMenuItems.push({ divider: true, command: 'divider-1', positionOrder: 48 }); } // Sorting Commands - if (gridOptions.enableSorting && columnDef.sortable && headerMenuOptions && !headerMenuOptions.hideSortCommands) { + if ( + gridOptions.enableSorting && + columnDef.sortable && + headerMenuOptions && + !headerMenuOptions.hideSortCommands && + // @deprecated use boolean value of addMissingCommandOrAction() in next major instead + !(headerMenuOptions.hideCommands?.includes('sort-asc') && headerMenuOptions.hideCommands?.includes('sort-desc')) + ) { // sort ascending command this.addMissingCommandOrAction( { @@ -371,7 +385,9 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 50, action: (e, args) => this.sortColumn(e, args, true), }, - columnHeaderMenuItems + columnHeaderMenuItems, + undefined, + headerMenuOptions.hideCommands ); // sort descending command @@ -384,12 +400,14 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 51, action: (e, args) => this.sortColumn(e, args, false), }, - columnHeaderMenuItems + columnHeaderMenuItems, + undefined, + headerMenuOptions.hideCommands ); // add a divider (separator) between the top sort commands and the other clear commands if (!columnHeaderMenuItems.some((item) => item !== 'divider' && item.positionOrder === 52)) { - columnHeaderMenuItems.push({ divider: true, command: '', positionOrder: 52 }); + columnHeaderMenuItems.push({ divider: true, command: 'divider-2', positionOrder: 52 }); } if (!headerMenuOptions.hideClearSortCommand) { @@ -402,7 +420,9 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 58, action: (e, args) => this.clearColumnSort(e, args), }, - columnHeaderMenuItems + columnHeaderMenuItems, + undefined, + headerMenuOptions.hideCommands ); } } @@ -444,12 +464,18 @@ export class SlickHeaderMenu extends MenuBaseClass { hasFrozenOrResizeCommand && !columnHeaderMenuItems.some((item) => item !== 'divider' && item.positionOrder === filterShortcutsPositionOrder + 1) ) { - columnHeaderMenuItems.push({ divider: true, command: '', positionOrder: filterShortcutsPositionOrder + 1 }); + columnHeaderMenuItems.push({ divider: true, command: 'divider-3', positionOrder: filterShortcutsPositionOrder + 1 }); } } // Filtering Commands - if (gridOptions.enableFiltering && columnDef.filterable && headerMenuOptions && !headerMenuOptions.hideFilterCommand) { + if ( + gridOptions.enableFiltering && + columnDef.filterable && + headerMenuOptions && + !headerMenuOptions.hideFilterCommand && + !headerMenuOptions.hideCommands?.includes('clear-filter') + ) { if (!headerMenuOptions.hideClearFilterCommand) { this.addMissingCommandOrAction( { @@ -462,13 +488,15 @@ export class SlickHeaderMenu extends MenuBaseClass { this.clearColumnFilter(e, args); }, }, - columnHeaderMenuItems + columnHeaderMenuItems, + undefined, + headerMenuOptions.hideCommands ); } } // Hide Column Command - if (headerMenuOptions && !headerMenuOptions.hideColumnHideCommand) { + if (headerMenuOptions && !headerMenuOptions.hideColumnHideCommand && !headerMenuOptions.hideCommands?.includes('hide-column')) { this.addMissingCommandOrAction( { _orgTitle: commandLabels?.hideColumnCommand || '', @@ -483,7 +511,9 @@ export class SlickHeaderMenu extends MenuBaseClass { } }, }, - columnHeaderMenuItems + columnHeaderMenuItems, + undefined, + headerMenuOptions.hideCommands ); } diff --git a/packages/common/src/interfaces/contextMenu.interface.ts b/packages/common/src/interfaces/contextMenu.interface.ts index 4fb7337c70..aebd1f8909 100644 --- a/packages/common/src/interfaces/contextMenu.interface.ts +++ b/packages/common/src/interfaces/contextMenu.interface.ts @@ -2,10 +2,24 @@ import type { SlickEventData } from '../core/slickCore.js'; import type { SlickContextMenu } from '../extensions/slickContextMenu.js'; import type { ContextMenuOption, MenuCommandItemCallbackArgs, MenuFromCellCallbackArgs, MenuOptionItemCallbackArgs } from './index.js'; +export type BuiltInContextMenuCommand = + | 'clear-grouping' + | 'collapse-all-groups' + | 'copy' + | 'divider-1' + | 'expand-all-groups' + | 'export-csv' + | 'export-excel' + | 'export-pdf' + | 'export-text-delimited'; + export interface ContextMenu extends ContextMenuOption { // -- // Events + /** hide any built-in command from the context menu */ + hideCommands?: Array; + /** Fired after extension (control) is registered by SlickGrid */ onExtensionRegistered?: (plugin: SlickContextMenu) => void; diff --git a/packages/common/src/interfaces/contextMenuOption.interface.ts b/packages/common/src/interfaces/contextMenuOption.interface.ts index 94bf2c264d..1ef3583ed8 100644 --- a/packages/common/src/interfaces/contextMenuOption.interface.ts +++ b/packages/common/src/interfaces/contextMenuOption.interface.ts @@ -38,40 +38,40 @@ export interface ContextMenuOption extends MenuOption /** Defaults to "right", user can optionally force the Cell Menu drop to be aligned to the left or right. */ dropSide?: 'left' | 'right'; - /** Defaults to false, hide the "Clear Grouping" command in the menu (Grid Option "enableGrouping: true" has to be enabled) */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, hide the "Clear Grouping" command in the menu (Grid Option "enableGrouping: true" has to be enabled) */ hideClearAllGrouping?: boolean; /** Defaults to false, hide the Close button on top right */ hideCloseButton?: boolean; - /** Defaults to false, hide the "Collapse all Groups" command in the menu (Grid Option "enableGrouping: true" has to be enabled) */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, hide the "Collapse all Groups" command in the menu (Grid Option "enableGrouping: true" has to be enabled) */ hideCollapseAllGroups?: boolean; - /** Defaults to false, hide the Commands section even when the commandItems array is filled */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, hide the Commands section even when the commandItems array is filled */ hideCommandSection?: boolean; - /** Defaults to false, which will hide the "Copy Cell Value" command in the menu */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, which will hide the "Copy Cell Value" command in the menu */ hideCopyCellValueCommand?: boolean; - /** Defaults to false, hide the "Expand all Groups" command in the menu (Grid Option "enableGrouping: true" has to be enabled) */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, hide the "Expand all Groups" command in the menu (Grid Option "enableGrouping: true" has to be enabled) */ hideExpandAllGroups?: boolean; - /** Defaults to false, which will hide the "Export to CSV" command in the menu (Grid Option "enableTextExport: true" has to be enabled) */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, which will hide the "Export to CSV" command in the menu (Grid Option "enableTextExport: true" has to be enabled) */ hideExportCsvCommand?: boolean; - /** Defaults to false, which will hide the "Export to Excel" command in the menu (Grid Option "enableExcelExport: true" has to be enabled) */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, which will hide the "Export to Excel" command in the menu (Grid Option "enableExcelExport: true" has to be enabled) */ hideExportExcelCommand?: boolean; - /** Defaults to false, which will hide the "Export to PDF" command in the menu (Grid Option "enablePdfExport: true" has to be enabled) */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, which will hide the "Export to PDF" command in the menu (Grid Option "enablePdfExport: true" has to be enabled) */ hideExportPdfCommand?: boolean; - /** Defaults to false, which will hide the "Export to Text Delimited" command in the menu (Grid Option "enableTextExport: true" has to be enabled) */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, which will hide the "Export to Text Delimited" command in the menu (Grid Option "enableTextExport: true" has to be enabled) */ hideExportTextDelimitedCommand?: boolean; - /** Defaults to true, do we want to hide the Cell Menu when a scrolling event occurs? */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to true, do we want to hide the Cell Menu when a scrolling event occurs? */ hideMenuOnScroll?: boolean; - /** Defaults to false, Hide the Options section even when the optionItems array is filled */ + /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, Hide the Options section even when the optionItems array is filled */ hideOptionSection?: boolean; /** icon for the "Clear Grouping" command (Grid Option "enableGrouping: true" has to be enabled) */ diff --git a/packages/common/src/interfaces/gridMenu.interface.ts b/packages/common/src/interfaces/gridMenu.interface.ts index 529e2f0bfe..b8922165c9 100644 --- a/packages/common/src/interfaces/gridMenu.interface.ts +++ b/packages/common/src/interfaces/gridMenu.interface.ts @@ -2,10 +2,26 @@ import type { SlickGrid } from '../core/index.js'; import type { SlickGridMenu } from '../extensions/slickGridMenu.js'; import type { Column, GridMenuCommandItemCallbackArgs, GridMenuOption } from './index.js'; +export type BuiltInGridMenuCommand = + | 'clear-filter' + | 'clear-pinning' + | 'clear-sorting' + | 'export-csv' + | 'export-excel' + | 'export-pdf' + | 'export-text-delimited' + | 'refresh-dataset' + | 'toggle-dark-mode' + | 'toggle-filter' + | 'toggle-preheader'; + export interface GridMenu extends GridMenuOption { // -- // Events + /** hide any built-in command from the grid menu */ + hideCommands?: Array; + /** Fired after extension (control) is registered by SlickGrid */ onExtensionRegistered?: (plugin: SlickGridMenu) => void; diff --git a/packages/common/src/interfaces/gridMenuOption.interface.ts b/packages/common/src/interfaces/gridMenuOption.interface.ts index e246ab4c15..de867680e8 100644 --- a/packages/common/src/interfaces/gridMenuOption.interface.ts +++ b/packages/common/src/interfaces/gridMenuOption.interface.ts @@ -57,46 +57,46 @@ export interface GridMenuOption extends MenuOption; + // -- // Events // ------------ diff --git a/packages/common/src/interfaces/headerMenuOption.interface.ts b/packages/common/src/interfaces/headerMenuOption.interface.ts index e9482a3bab..594a2d2a23 100644 --- a/packages/common/src/interfaces/headerMenuOption.interface.ts +++ b/packages/common/src/interfaces/headerMenuOption.interface.ts @@ -19,31 +19,31 @@ export interface HeaderMenuOption extends MenuOption Date: Fri, 13 Feb 2026 22:57:54 -0500 Subject: [PATCH 18/24] chore: add some hideCommands to demos as comments --- demos/aurelia/src/examples/slickgrid/example51.ts | 7 ++++++- demos/react/src/examples/slickgrid/Example51.tsx | 7 ++++++- demos/vanilla/src/examples/example40.ts | 3 +++ demos/vue/src/components/Example51.vue | 7 ++++++- .../src/demos/examples/example51.component.ts | 7 ++++++- 5 files changed, 27 insertions(+), 4 deletions(-) diff --git a/demos/aurelia/src/examples/slickgrid/example51.ts b/demos/aurelia/src/examples/slickgrid/example51.ts index 693f2be89b..32e54a15de 100644 --- a/demos/aurelia/src/examples/slickgrid/example51.ts +++ b/demos/aurelia/src/examples/slickgrid/example51.ts @@ -383,7 +383,8 @@ export class Example51 { // Header Menu with slots (already configured in columns above) enableHeaderMenu: true, headerMenu: { - hideColumnHideCommand: false, + // hideCommands: ['column-resize-by-content', 'clear-sort'], + // Demo: Menu-level default renderer for all header menu items defaultMenuItemRenderer: (cmdItem) => { return ` @@ -401,6 +402,8 @@ export class Example51 { // Context Menu with slot examples enableContextMenu: true, contextMenu: { + // hideCommands: ['clear-grouping', 'copy'], + // build your command items list // spread built-in commands and optionally filter/sort them however you want commandListBuilder: (builtInItems) => { @@ -486,6 +489,8 @@ export class Example51 { // Grid Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) enableGridMenu: true, gridMenu: { + // hideCommands: ['toggle-preheader', 'toggle-filter'], + // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) defaultMenuItemRenderer: (cmdItem) => { return ` diff --git a/demos/react/src/examples/slickgrid/Example51.tsx b/demos/react/src/examples/slickgrid/Example51.tsx index 6f1583af32..28c4504a7e 100644 --- a/demos/react/src/examples/slickgrid/Example51.tsx +++ b/demos/react/src/examples/slickgrid/Example51.tsx @@ -381,7 +381,8 @@ const Example51: React.FC = () => { // Header Menu with slots (already configured in columns above) enableHeaderMenu: true, headerMenu: { - hideColumnHideCommand: false, + // hideCommands: ['column-resize-by-content', 'clear-sort'], + // Demo: Menu-level default renderer for all header menu items defaultMenuItemRenderer: (cmdItem) => { return ` @@ -399,6 +400,8 @@ const Example51: React.FC = () => { // Context Menu with slot examples enableContextMenu: true, contextMenu: { + // hideCommands: ['clear-grouping', 'copy'], + // build your command items list // spread built-in commands and optionally filter/sort them however you want commandListBuilder: (builtInItems) => { @@ -484,6 +487,8 @@ const Example51: React.FC = () => { // Grid Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) enableGridMenu: true, gridMenu: { + // hideCommands: ['toggle-preheader', 'toggle-filter'], + // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) defaultMenuItemRenderer: (cmdItem) => { return ` diff --git a/demos/vanilla/src/examples/example40.ts b/demos/vanilla/src/examples/example40.ts index 62d0991603..4106ba23d2 100644 --- a/demos/vanilla/src/examples/example40.ts +++ b/demos/vanilla/src/examples/example40.ts @@ -395,6 +395,7 @@ export default class Example40 { enableHeaderMenu: true, headerMenu: { // hideCommands: ['column-resize-by-content', 'clear-sort'], + // Demo: Menu-level default renderer for all header menu items defaultMenuItemRenderer: (cmdItem) => { return ` @@ -413,6 +414,7 @@ export default class Example40 { enableContextMenu: true, contextMenu: { // hideCommands: ['clear-grouping', 'copy'], + // build your command items list // spread built-in commands and optionally filter/sort them however you want commandListBuilder: (builtInItems) => { @@ -499,6 +501,7 @@ export default class Example40 { enableGridMenu: true, gridMenu: { // hideCommands: ['toggle-preheader', 'toggle-filter'], + // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) defaultMenuItemRenderer: (cmdItem) => { return ` diff --git a/demos/vue/src/components/Example51.vue b/demos/vue/src/components/Example51.vue index 917385e041..c1a5389ea2 100644 --- a/demos/vue/src/components/Example51.vue +++ b/demos/vue/src/components/Example51.vue @@ -378,7 +378,8 @@ function defineGrid() { // Header Menu with slots (already configured in columns above) enableHeaderMenu: true, headerMenu: { - hideColumnHideCommand: false, + // hideCommands: ['column-resize-by-content', 'clear-sort'], + // Demo: Menu-level default renderer for all header menu items defaultMenuItemRenderer: (cmdItem) => { return ` @@ -396,6 +397,8 @@ function defineGrid() { // Context Menu with slot examples enableContextMenu: true, contextMenu: { + // hideCommands: ['clear-grouping', 'copy'], + // build your command items list // spread built-in commands and optionally filter/sort them however you want commandListBuilder: (builtInItems) => { @@ -481,6 +484,8 @@ function defineGrid() { // Grid Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) enableGridMenu: true, gridMenu: { + // hideCommands: ['toggle-preheader', 'toggle-filter'], + // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) defaultMenuItemRenderer: (cmdItem) => { return ` diff --git a/frameworks/angular-slickgrid/src/demos/examples/example51.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example51.component.ts index 43a425b5ee..6d3d2dc823 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example51.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example51.component.ts @@ -386,7 +386,8 @@ export class Example51Component implements OnInit { // Header Menu with slots (already configured in columns above) enableHeaderMenu: true, headerMenu: { - hideColumnHideCommand: false, + // hideCommands: ['column-resize-by-content', 'clear-sort'], + // Demo: Menu-level default renderer for all header menu items defaultMenuItemRenderer: (cmdItem) => { return ` @@ -404,6 +405,8 @@ export class Example51Component implements OnInit { // Context Menu with slot examples enableContextMenu: true, contextMenu: { + // hideCommands: ['clear-grouping', 'copy'], + // build your command items list // spread built-in commands and optionally filter/sort them however you want commandListBuilder: (builtInItems) => { @@ -489,6 +492,8 @@ export class Example51Component implements OnInit { // Grid Menu with slot examples (demonstrating defaultMenuItemRenderer at menu level) enableGridMenu: true, gridMenu: { + // hideCommands: ['toggle-preheader', 'toggle-filter'], + // Demo: Menu-level default renderer that applies to all items (can be overridden per item with slotRenderer) defaultMenuItemRenderer: (cmdItem) => { return ` From 8500768f22ccc1dcfc6c0507b1fe0d83ec5cdc56 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 23:02:33 -0500 Subject: [PATCH 19/24] chore: revert React lazy route --- demos/react/src/examples/slickgrid/App.tsx | 168 +++++++++++++-------- 1 file changed, 108 insertions(+), 60 deletions(-) diff --git a/demos/react/src/examples/slickgrid/App.tsx b/demos/react/src/examples/slickgrid/App.tsx index b18c83f16e..b7fb17f03d 100644 --- a/demos/react/src/examples/slickgrid/App.tsx +++ b/demos/react/src/examples/slickgrid/App.tsx @@ -1,58 +1,109 @@ -import { Suspense, lazy, useEffect } from 'react'; +import { useEffect } from 'react'; import { Routes as BaseRoutes, Link, Navigate, Route, useLocation } from 'react-router'; import { NavBar } from '../../NavBar.js'; -const routes: Array<{ path: string; route: string; component: React.ComponentType; title: string }> = [ - { path: 'example1', route: '/example1', component: lazy(() => import('./Example1.js')), title: '1- Basic Grid / 2 Grids' }, - { path: 'example2', route: '/example2', component: lazy(() => import('./Example2.js')), title: '2- Formatters' }, - { path: 'example3', route: '/example3', component: lazy(() => import('./Example3.js')), title: '3- Editors / Delete' }, - { path: 'example4', route: '/example4', component: lazy(() => import('./Example4.js')), title: '4- Client Side Sort/Filter' }, - { path: 'example5', route: '/example5', component: lazy(() => import('./Example5.js')), title: '5- Backend OData Service' }, - { path: 'example6', route: '/example6', component: lazy(() => import('./Example6.js')), title: '6- Backend GraphQL Service' }, - { path: 'example7', route: '/example7', component: lazy(() => import('./Example7.js')), title: '7- Header Button Plugin' }, - { path: 'example8', route: '/example8', component: lazy(() => import('./Example8.js')), title: '8- Header Menu Plugin' }, - { path: 'example9', route: '/example9', component: lazy(() => import('./Example9.js')), title: '9- Grid Menu Control' }, - { path: 'example10', route: '/example10', component: lazy(() => import('./Example10.js')), title: '10- Row Selection / 2 Grids' }, - { path: 'example11', route: '/example11', component: lazy(() => import('./Example11.js')), title: '11- Add/Update Grid Item' }, - { path: 'example12', route: '/example12', component: lazy(() => import('./Example12.js')), title: '12- Localization (i18n)' }, - { path: 'example13', route: '/example13', component: lazy(() => import('./Example13.js')), title: '13- Grouping & Aggregators' }, - { path: 'example14', route: '/example14', component: lazy(() => import('./Example14.js')), title: '14- Column Span & Header Grouping' }, - { path: 'example15', route: '/example15', component: lazy(() => import('./Example15.js')), title: '15- Grid State & Local Storage' }, - { path: 'example16', route: '/example16', component: lazy(() => import('./Example16.js')), title: '16- Row Move Plugin' }, - { path: 'example17', route: '/example17', component: lazy(() => import('./Example17.js')), title: '17- Create Grid from CSV' }, - { path: 'example18', route: '/example18', component: lazy(() => import('./Example18.js')), title: '18- Draggable Grouping' }, - { path: 'example19', route: '/example19', component: lazy(() => import('./Example19.js')), title: '19- Row Detail View' }, - { path: 'example20', route: '/example20', component: lazy(() => import('./Example20.js')), title: '20- Pinned Columns/Rows' }, - { path: 'example21', route: '/example21', component: lazy(() => import('./Example21.js')), title: '21- Grid AutoHeight (full height)' }, - { path: 'example22', route: '/example22', component: lazy(() => import('./Example22.js')), title: '22- with Bootstrap Tabs' }, - { path: 'example23', route: '/example23', component: lazy(() => import('./Example23.js')), title: '23- Filter by Range of Values' }, - { path: 'example24', route: '/example24', component: lazy(() => import('./Example24.js')), title: '24- Cell & Context Menu' }, - { path: 'example25', route: '/example25', component: lazy(() => import('./Example25.js')), title: '25- GraphQL without Pagination' }, - { path: 'example27', route: '/example27', component: lazy(() => import('./Example27.js')), title: '27- Tree Data (Parent/Child)' }, - { path: 'example28', route: '/example28', component: lazy(() => import('./Example28.js')), title: '28- Tree Data (Hierarchical set)' }, - { path: 'example29', route: '/example29', component: lazy(() => import('./Example29.js')), title: '29- Grid with header and footer slots' }, - { path: 'example30', route: '/example30', component: lazy(() => import('./Example30.js')), title: '30- Composite Editor Modal' }, - { path: 'example31', route: '/example31', component: lazy(() => import('./Example31.js')), title: '31- Backend OData with RxJS' }, - { path: 'example32', route: '/example32', component: lazy(() => import('./Example32.js')), title: '32- Columns Resize by Content' }, - { path: 'example33', route: '/example33', component: lazy(() => import('./Example33.js')), title: '33- Regular & Custom Tooltip' }, - { path: 'example34', route: '/example34', component: lazy(() => import('./Example34.js')), title: '34- Real-Time Trading Platform' }, - { path: 'example35', route: '/example35', component: lazy(() => import('./Example35.js')), title: '35- Row Based Editing' }, - { path: 'example36', route: '/example36', component: lazy(() => import('./Example36.js')), title: '36- Excel Export Formulas' }, - { path: 'example37', route: '/example37', component: lazy(() => import('./Example37.js')), title: '37- Footer Totals Row' }, - { path: 'example38', route: '/example38', component: lazy(() => import('./Example38.js')), title: '38- Infinite Scroll with OData' }, - { path: 'example39', route: '/example39', component: lazy(() => import('./Example39.js')), title: '39- Infinite Scroll with GraphQL' }, - { path: 'example40', route: '/example40', component: lazy(() => import('./Example40.js')), title: '40- Infinite Scroll from JSON data' }, - { path: 'example41', route: '/example41', component: lazy(() => import('./Example41.js')), title: '41- Drag & Drop' }, - { path: 'example42', route: '/example42', component: lazy(() => import('./Example42.js')), title: '42- Custom Pagination' }, - { path: 'example43', route: '/example43', component: lazy(() => import('./Example43.js')), title: '43- Colspan/Rowspan (timesheets)' }, - { path: 'example44', route: '/example44', component: lazy(() => import('./Example44.js')), title: '44- Colspan/Rowspan (large data)' }, - { path: 'example45', route: '/example45', component: lazy(() => import('./Example45.js')), title: '45- Row Detail with inner Grid' }, - { path: 'example46', route: '/example46', component: lazy(() => import('./Example46.js')), title: '46- Tree Data with Lazy Loading' }, - { path: 'example47', route: '/example47', component: lazy(() => import('./Example47.js')), title: '47- Row Detail + Grouping' }, - { path: 'example48', route: '/example48', component: lazy(() => import('./Example48.js')), title: '48- Hybrid Selection Model' }, - { path: 'example49', route: '/example49', component: lazy(() => import('./Example49.js')), title: '49- Spreadsheet Drag-Fill' }, - { path: 'example50', route: '/example50', component: lazy(() => import('./Example50.js')), title: '50- Master/Detail Grids' }, - { path: 'example51', route: '/example51', component: lazy(() => import('./Example51.js')), title: '51- Menus with Slots' }, +import Example1 from './Example1.js'; +import Example2 from './Example2.js'; +import Example3 from './Example3.js'; +import Example4 from './Example4.js'; +import Example5 from './Example5.js'; +import Example6 from './Example6.js'; +import Example7 from './Example7.js'; +import Example8 from './Example8.js'; +import Example9 from './Example9.js'; +import Example10 from './Example10.js'; +import Example11 from './Example11.js'; +import Example12 from './Example12.js'; +import Example13 from './Example13.js'; +import Example14 from './Example14.js'; +import Example15 from './Example15.js'; +import Example16 from './Example16.js'; +import Example17 from './Example17.js'; +import Example18 from './Example18.js'; +import Example19 from './Example19.js'; +import Example20 from './Example20.js'; +import Example21 from './Example21.js'; +import Example22 from './Example22.js'; +import Example23 from './Example23.js'; +import Example24 from './Example24.js'; +import Example25 from './Example25.js'; +import Example27 from './Example27.js'; +import Example28 from './Example28.js'; +import Example29 from './Example29.js'; +import Example30 from './Example30.js'; +import Example31 from './Example31.js'; +import Example32 from './Example32.js'; +import Example33 from './Example33.js'; +import Example34 from './Example34.js'; +import Example35 from './Example35.js'; +import Example36 from './Example36.js'; +import Example37 from './Example37.js'; +import Example38 from './Example38.js'; +import Example39 from './Example39.js'; +import Example40 from './Example40.js'; +import Example41 from './Example41.js'; +import Example42 from './Example42.js'; +import Example43 from './Example43.js'; +import Example44 from './Example44.js'; +import Example45 from './Example45.js'; +import Example46 from './Example46.js'; +import Example47 from './Example47.js'; +import Example48 from './Example48.js'; +import Example49 from './Example49.js'; +import Example50 from './Example50.js'; +import Example51 from './Example51.js'; + +const routes: Array<{ path: string; route: string; component: any; title: string }> = [ + { path: 'example1', route: '/example1', component: , title: '1- Basic Grid / 2 Grids' }, + { path: 'example2', route: '/example2', component: , title: '2- Formatters' }, + { path: 'example3', route: '/example3', component: , title: '3- Editors / Delete' }, + { path: 'example4', route: '/example4', component: , title: '4- Client Side Sort/Filter' }, + { path: 'example5', route: '/example5', component: , title: '5- Backend OData Service' }, + { path: 'example6', route: '/example6', component: , title: '6- Backend GraphQL Service' }, + { path: 'example7', route: '/example7', component: , title: '7- Header Button Plugin' }, + { path: 'example8', route: '/example8', component: , title: '8- Header Menu Plugin' }, + { path: 'example9', route: '/example9', component: , title: '9- Grid Menu Control' }, + { path: 'example10', route: '/example10', component: , title: '10- Row Selection / 2 Grids' }, + { path: 'example11', route: '/example11', component: , title: '11- Add/Update Grid Item' }, + { path: 'example12', route: '/example12', component: , title: '12- Localization (i18n)' }, + { path: 'example13', route: '/example13', component: , title: '13- Grouping & Aggregators' }, + { path: 'example14', route: '/example14', component: , title: '14- Column Span & Header Grouping' }, + { path: 'example15', route: '/example15', component: , title: '15- Grid State & Local Storage' }, + { path: 'example16', route: '/example16', component: , title: '16- Row Move Plugin' }, + { path: 'example17', route: '/example17', component: , title: '17- Create Grid from CSV' }, + { path: 'example18', route: '/example18', component: , title: '18- Draggable Grouping' }, + { path: 'example19', route: '/example19', component: , title: '19- Row Detail View' }, + { path: 'example20', route: '/example20', component: , title: '20- Pinned Columns/Rows' }, + { path: 'example21', route: '/example21', component: , title: '21- Grid AutoHeight (full height)' }, + { path: 'example22', route: '/example22', component: , title: '22- with Bootstrap Tabs' }, + { path: 'example23', route: '/example23', component: , title: '23- Filter by Range of Values' }, + { path: 'example24', route: '/example24', component: , title: '24- Cell & Context Menu' }, + { path: 'example25', route: '/example25', component: , title: '25- GraphQL without Pagination' }, + { path: 'example27', route: '/example27', component: , title: '27- Tree Data (Parent/Child)' }, + { path: 'example28', route: '/example28', component: , title: '28- Tree Data (Hierarchical set)' }, + { path: 'example29', route: '/example29', component: , title: '29- Grid with header and footer slots' }, + { path: 'example30', route: '/example30', component: , title: '30- Composite Editor Modal' }, + { path: 'example31', route: '/example31', component: , title: '31- Backend OData with RxJS' }, + { path: 'example32', route: '/example32', component: , title: '32- Columns Resize by Content' }, + { path: 'example33', route: '/example33', component: , title: '33- Regular & Custom Tooltip' }, + { path: 'example34', route: '/example34', component: , title: '34- Real-Time Trading Platform' }, + { path: 'example35', route: '/example35', component: , title: '35- Row Based Editing' }, + { path: 'example36', route: '/example36', component: , title: '36- Excel Export Formulas' }, + { path: 'example37', route: '/example37', component: , title: '37- Footer Totals Row' }, + { path: 'example38', route: '/example38', component: , title: '38- Infinite Scroll with OData' }, + { path: 'example39', route: '/example39', component: , title: '39- Infinite Scroll with GraphQL' }, + { path: 'example40', route: '/example40', component: , title: '40- Infinite Scroll from JSON data' }, + { path: 'example41', route: '/example41', component: , title: '41- Drag & Drop' }, + { path: 'example42', route: '/example42', component: , title: '42- Custom Pagination' }, + { path: 'example43', route: '/example43', component: , title: '43- Colspan/Rowspan (timesheets)' }, + { path: 'example44', route: '/example44', component: , title: '44- Colspan/Rowspan (large data)' }, + { path: 'example45', route: '/example45', component: , title: '45- Row Detail with inner Grid' }, + { path: 'example46', route: '/example46', component: , title: '46- Tree Data with Lazy Loading' }, + { path: 'example47', route: '/example47', component: , title: '47- Row Detail + Grouping' }, + { path: 'example48', route: '/example48', component: , title: '48- Hybrid Selection Model' }, + { path: 'example49', route: '/example49', component: , title: '49- Spreadsheet Drag-Fill' }, + { path: 'example50', route: '/example50', component: , title: '50- Master/Detail Grids' }, + { path: 'example51', route: '/example51', component: , title: '51- Menus with Slots' }, ]; export default function Routes() { @@ -90,14 +141,11 @@ export default function Routes() {
    - {routes.map((row) => { - const Component = row.component; - return ( - - Loading...
    }>} /> - - ); - })} + {routes.map((row) => ( + + + + ))} } />
    From 8f03dac8d3da5f48276022383ae2d13d87b53316 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 23:07:06 -0500 Subject: [PATCH 20/24] chore: revert Vue lazy route --- demos/vue/src/router/index.ts | 157 +++++++++++++++++++++++----------- 1 file changed, 105 insertions(+), 52 deletions(-) diff --git a/demos/vue/src/router/index.ts b/demos/vue/src/router/index.ts index 4b171af7f6..5afc6d5637 100644 --- a/demos/vue/src/router/index.ts +++ b/demos/vue/src/router/index.ts @@ -1,60 +1,113 @@ import type { RouteRecordRaw } from 'vue-router'; import { createRouter, createWebHashHistory } from 'vue-router'; +import Example1 from '../components/Example01.vue'; +import Example2 from '../components/Example02.vue'; +import Example3 from '../components/Example03.vue'; +import Example4 from '../components/Example04.vue'; +import Example5 from '../components/Example05.vue'; +import Example6 from '../components/Example06.vue'; +import Example7 from '../components/Example07.vue'; +import Example8 from '../components/Example08.vue'; +import Example9 from '../components/Example09.vue'; +import Example10 from '../components/Example10.vue'; +import Example11 from '../components/Example11.vue'; +import Example12 from '../components/Example12.vue'; +import Example13 from '../components/Example13.vue'; +import Example14 from '../components/Example14.vue'; +import Example15 from '../components/Example15.vue'; +import Example16 from '../components/Example16.vue'; +import Example17 from '../components/Example17.vue'; +import Example18 from '../components/Example18.vue'; +import Example19 from '../components/Example19.vue'; +import Example20 from '../components/Example20.vue'; +import Example21 from '../components/Example21.vue'; +import Example22 from '../components/Example22.vue'; +import Example23 from '../components/Example23.vue'; +import Example24 from '../components/Example24.vue'; +import Example25 from '../components/Example25.vue'; +import Example26 from '../components/Example26.vue'; +import Example27 from '../components/Example27.vue'; +import Example28 from '../components/Example28.vue'; +import Example29 from '../components/Example29.vue'; +import Example30 from '../components/Example30.vue'; +import Example31 from '../components/Example31.vue'; +import Example32 from '../components/Example32.vue'; +import Example33 from '../components/Example33.vue'; +import Example34 from '../components/Example34.vue'; +import Example35 from '../components/Example35.vue'; +import Example36 from '../components/Example36.vue'; +import Example37 from '../components/Example37.vue'; +import Example38 from '../components/Example38.vue'; +import Example39 from '../components/Example39.vue'; +import Example40 from '../components/Example40.vue'; +import Example41 from '../components/Example41.vue'; +import Example42 from '../components/Example42.vue'; +import Example43 from '../components/Example43.vue'; +import Example44 from '../components/Example44.vue'; +import Example45 from '../components/Example45.vue'; +import Example46 from '../components/Example46.vue'; +import Example47 from '../components/Example47.vue'; +import Example48 from '../components/Example48.vue'; +import Example49 from '../components/Example49.vue'; +import Example50 from '../components/Example50.vue'; +import Example51 from '../components/Example51.vue'; +import Home from '../Home.vue'; + export const routes: RouteRecordRaw[] = [ { path: '/', name: 'root', redirect: '/example1' }, - { path: '/home', name: 'home', component: () => import('../Home.vue') }, - { path: '/example1', name: '1- Basic Grid / 2 Grids', component: () => import('../components/Example01.vue') }, - { path: '/example2', name: '2- Formatters', component: () => import('../components/Example02.vue') }, - { path: '/example3', name: '3- Editors / Delete', component: () => import('../components/Example03.vue') }, - { path: '/example4', name: '4- Client Side Sort/Filter', component: () => import('../components/Example04.vue') }, - { path: '/example5', name: '5- Backend OData Service', component: () => import('../components/Example05.vue') }, - { path: '/example6', name: '6- Backend GraphQL Service', component: () => import('../components/Example06.vue') }, - { path: '/example7', name: '7- Header Button Plugin', component: () => import('../components/Example07.vue') }, - { path: '/example8', name: '8- Header Menu Plugin', component: () => import('../components/Example08.vue') }, - { path: '/example9', name: '9- Grid Menu Control', component: () => import('../components/Example09.vue') }, - { path: '/example10', name: '10- Row Selection / 2 Grids', component: () => import('../components/Example10.vue') }, - { path: '/example11', name: '11- Add/Update Grid Item', component: () => import('../components/Example11.vue') }, - { path: '/example12', name: '12- Localization (i18n)', component: () => import('../components/Example12.vue') }, - { path: '/example13', name: '13- Grouping & Aggregators', component: () => import('../components/Example13.vue') }, - { path: '/example14', name: '14- Column Span & Header Grouping', component: () => import('../components/Example14.vue') }, - { path: '/example15', name: '15- Grid State & Local Storage', component: () => import('../components/Example15.vue') }, - { path: '/example16', name: '16- Row Move Plugin', component: () => import('../components/Example16.vue') }, - { path: '/example17', name: '17- Create Grid from CSV', component: () => import('../components/Example17.vue') }, - { path: '/example18', name: '18- Draggable Grouping', component: () => import('../components/Example18.vue') }, - { path: '/example19', name: '19- Row Detail View', component: () => import('../components/Example19.vue') }, - { path: '/example20', name: '20- Pinned Columns / Rows', component: () => import('../components/Example20.vue') }, - { path: '/example21', name: '21- Grid AutoHeight (full height)', component: () => import('../components/Example21.vue') }, - { path: '/example22', name: '22- with Bootstrap Tabs', component: () => import('../components/Example22.vue') }, - { path: '/example23', name: '23- Filter by Range of Values', component: () => import('../components/Example23.vue') }, - { path: '/example24', name: '24- Cell & Context Menu', component: () => import('../components/Example24.vue') }, - { path: '/example25', name: '25- GraphQL without Pagination', component: () => import('../components/Example25.vue') }, - { path: '/example26', name: '26- Use of Vue Components', component: () => import('../components/Example26.vue') }, - { path: '/example27', name: '27- Tree Data (Parent/Child)', component: () => import('../components/Example27.vue') }, - { path: '/example28', name: '28- Tree Data (Hierarchical set)', component: () => import('../components/Example28.vue') }, - { path: '/example29', name: '29- Grid Header & Footer Slots', component: () => import('../components/Example29.vue') }, - { path: '/example30', name: '30- Composite Editor Model', component: () => import('../components/Example30.vue') }, - { path: '/example31', name: '31- Backend OData with RxJS', component: () => import('../components/Example31.vue') }, - { path: '/example32', name: '32- Columns Resize by Content', component: () => import('../components/Example32.vue') }, - { path: '/example33', name: '33- Regular & Custom Tooltip', component: () => import('../components/Example33.vue') }, - { path: '/example34', name: '34- Real-Time Trading Platform', component: () => import('../components/Example34.vue') }, - { path: '/example35', name: '35- Row Based Editing', component: () => import('../components/Example35.vue') }, - { path: '/example36', name: '36- Excel Export Formulas', component: () => import('../components/Example36.vue') }, - { path: '/example37', name: '37- Footer Totals Row', component: () => import('../components/Example37.vue') }, - { path: '/example38', name: '38- Infinite Scroll with OData', component: () => import('../components/Example38.vue') }, - { path: '/example39', name: '39- Infinite Scroll with GraphQL', component: () => import('../components/Example39.vue') }, - { path: '/example40', name: '40- Infinite Scroll from JSON data', component: () => import('../components/Example40.vue') }, - { path: '/example41', name: '41- Drag & Drop', component: () => import('../components/Example41.vue') }, - { path: '/example42', name: '42- Custom Pagination', component: () => import('../components/Example42.vue') }, - { path: '/example43', name: '43- Colspan/Rowspan (timesheets)', component: () => import('../components/Example43.vue') }, - { path: '/example44', name: '44- Colspan/Rowspan (large data)', component: () => import('../components/Example44.vue') }, - { path: '/example45', name: '45- Row Detail with inner Grid', component: () => import('../components/Example45.vue') }, - { path: '/example46', name: '46- Tree Data with Lazy Loading', component: () => import('../components/Example46.vue') }, - { path: '/example47', name: '47- Row Detail + Grouping', component: () => import('../components/Example47.vue') }, - { path: '/example48', name: '48- Hybrid Selection Model', component: () => import('../components/Example48.vue') }, - { path: '/example49', name: '49- Spreadsheet Drag-Fill', component: () => import('../components/Example49.vue') }, - { path: '/example50', name: '50- Master/Detail Grids', component: () => import('../components/Example50.vue') }, - { path: '/example51', name: '51- Menus with Slots', component: () => import('../components/Example51.vue') }, + { path: '/home', name: 'home', component: Home }, + { path: '/example1', name: '1- Basic Grid / 2 Grids', component: Example1 }, + { path: '/example2', name: '2- Formatters', component: Example2 }, + { path: '/example3', name: '3- Editors / Delete', component: Example3 }, + { path: '/example4', name: '4- Client Side Sort/Filter', component: Example4 }, + { path: '/example5', name: '5- Backend OData Service', component: Example5 }, + { path: '/example6', name: '6- Backend GraphQL Service', component: Example6 }, + { path: '/example7', name: '7- Header Button Plugin', component: Example7 }, + { path: '/example8', name: '8- Header Menu Plugin', component: Example8 }, + { path: '/example9', name: '9- Grid Menu Control', component: Example9 }, + { path: '/example10', name: '10- Row Selection / 2 Grids', component: Example10 }, + { path: '/example11', name: '11- Add/Update Grid Item', component: Example11 }, + { path: '/example12', name: '12- Localization (i18n)', component: Example12 }, + { path: '/example13', name: '13- Grouping & Aggregators', component: Example13 }, + { path: '/example14', name: '14- Column Span & Header Grouping', component: Example14 }, + { path: '/example15', name: '15- Grid State & Local Storage', component: Example15 }, + { path: '/example16', name: '16- Row Move Plugin', component: Example16 }, + { path: '/example17', name: '17- Create Grid from CSV', component: Example17 }, + { path: '/example18', name: '18- Draggable Grouping', component: Example18 }, + { path: '/example19', name: '19- Row Detail View', component: Example19 }, + { path: '/example20', name: '20- Pinned Columns / Rows', component: Example20 }, + { path: '/example21', name: '21- Grid AutoHeight (full height)', component: Example21 }, + { path: '/example22', name: '22- with Bootstrap Tabs', component: Example22 }, + { path: '/example23', name: '23- Filter by Range of Values', component: Example23 }, + { path: '/example24', name: '24- Cell & Context Menu', component: Example24 }, + { path: '/example25', name: '25- GraphQL without Pagination', component: Example25 }, + { path: '/example26', name: '26- Use of Vue Components', component: Example26 }, + { path: '/example27', name: '27- Tree Data (Parent/Child)', component: Example27 }, + { path: '/example28', name: '28- Tree Data (Hierarchical set)', component: Example28 }, + { path: '/example29', name: '29- Grid Header & Footer Slots', component: Example29 }, + { path: '/example30', name: '30- Composite Editor Model', component: Example30 }, + { path: '/example31', name: '31- Backend OData with RxJS', component: Example31 }, + { path: '/example32', name: '32- Columns Resize by Content', component: Example32 }, + { path: '/example33', name: '33- Regular & Custom Tooltip', component: Example33 }, + { path: '/example34', name: '34- Real-Time Trading Platform', component: Example34 }, + { path: '/example35', name: '35- Row Based Editing', component: Example35 }, + { path: '/example36', name: '36- Excel Export Formulas', component: Example36 }, + { path: '/example37', name: '37- Footer Totals Row', component: Example37 }, + { path: '/example38', name: '38- Infinite Scroll with OData', component: Example38 }, + { path: '/example39', name: '39- Infinite Scroll with GraphQL', component: Example39 }, + { path: '/example40', name: '40- Infinite Scroll from JSON data', component: Example40 }, + { path: '/example41', name: '41- Drag & Drop', component: Example41 }, + { path: '/example42', name: '42- Custom Pagination', component: Example42 }, + { path: '/example43', name: '43- Colspan/Rowspan (timesheets)', component: Example43 }, + { path: '/example44', name: '44- Colspan/Rowspan (large data)', component: Example44 }, + { path: '/example45', name: '45- Row Detail with inner Grid', component: Example45 }, + { path: '/example46', name: '46- Tree Data with Lazy Loading', component: Example46 }, + { path: '/example47', name: '47- Row Detail + Grouping', component: Example47 }, + { path: '/example48', name: '48- Hybrid Selection Model', component: Example48 }, + { path: '/example49', name: '49- Spreadsheet Drag-Fill', component: Example49 }, + { path: '/example50', name: '50- Master/Detail Grids', component: Example50 }, + { path: '/example51', name: '51- Menus with Slots', component: Example51 }, ]; export const router = createRouter({ From c065cc644395e963d040a2f43ed637adb50ee201 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 13 Feb 2026 23:23:29 -0500 Subject: [PATCH 21/24] chore: merge router imports --- demos/vue/src/router/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/demos/vue/src/router/index.ts b/demos/vue/src/router/index.ts index 5afc6d5637..c699a3ecd2 100644 --- a/demos/vue/src/router/index.ts +++ b/demos/vue/src/router/index.ts @@ -1,5 +1,4 @@ -import type { RouteRecordRaw } from 'vue-router'; -import { createRouter, createWebHashHistory } from 'vue-router'; +import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'; import Example1 from '../components/Example01.vue'; import Example2 from '../components/Example02.vue'; From 6c806921d5874f67736acd700608fd4c00b46ced Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Sat, 14 Feb 2026 00:26:09 -0500 Subject: [PATCH 22/24] chore: simplify code a bit more --- .../common/src/extensions/menuBaseClass.ts | 11 ++--- .../common/src/extensions/slickContextMenu.ts | 32 +++++++------- .../common/src/extensions/slickGridMenu.ts | 44 +++++++++---------- .../common/src/extensions/slickHeaderMenu.ts | 40 +++++++---------- 4 files changed, 58 insertions(+), 69 deletions(-) diff --git a/packages/common/src/extensions/menuBaseClass.ts b/packages/common/src/extensions/menuBaseClass.ts index 86a480dd20..31ef4e5bc1 100644 --- a/packages/common/src/extensions/menuBaseClass.ts +++ b/packages/common/src/extensions/menuBaseClass.ts @@ -149,13 +149,13 @@ export class MenuBaseClass { */ protected addMissingCommandOrAction( builtInMenuItem: T | 'divider', + hideCommands: string[] = [], targetMenuItems: Array, - originalMenuItems: Array | undefined, - hideCommands: string[] | undefined - ): boolean { + originalMenuItems?: Array + ): void { // remove any commands that the user doesn't want let skip = false; - if (hideCommands) { + if (hideCommands.length) { skip = builtInMenuItem !== 'divider' && new Set(hideCommands).has(builtInMenuItem.command); } @@ -165,14 +165,11 @@ export class MenuBaseClass { if (!cmd) { targetMenuItems.push(builtInMenuItem); - return true; } else if (!(cmd as T).action) { // action might be missing (custom menu items), if so copy over from built-in (cmd as T).action = builtInMenuItem.action; } } - - return false; } /** diff --git a/packages/common/src/extensions/slickContextMenu.ts b/packages/common/src/extensions/slickContextMenu.ts index 8508628b7b..b10ee8ce70 100644 --- a/packages/common/src/extensions/slickContextMenu.ts +++ b/packages/common/src/extensions/slickContextMenu.ts @@ -210,9 +210,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { return false; }, }, + contextMenu.hideCommands, menuCommandItems, - originalCommandItems, - contextMenu.hideCommands + originalCommandItems ); } @@ -243,9 +243,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { } }, }, + contextMenu.hideCommands, menuCommandItems, - originalCommandItems, - contextMenu.hideCommands + originalCommandItems ); } @@ -271,9 +271,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { } }, }, + contextMenu.hideCommands, menuCommandItems, - originalCommandItems, - contextMenu.hideCommands + originalCommandItems ); } @@ -301,9 +301,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { } }, }, + contextMenu.hideCommands, menuCommandItems, - originalCommandItems, - contextMenu.hideCommands + originalCommandItems ); } @@ -334,9 +334,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { } }, }, + contextMenu.hideCommands, menuCommandItems, - originalCommandItems, - contextMenu.hideCommands + originalCommandItems ); } @@ -367,9 +367,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { return Array.isArray(groupingArray) && groupingArray.length > 0; }, }, + contextMenu.hideCommands, menuCommandItems, - originalCommandItems, - contextMenu.hideCommands + originalCommandItems ); } @@ -400,9 +400,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { return Array.isArray(groupingArray) && groupingArray.length > 0; }, }, + contextMenu.hideCommands, menuCommandItems, - originalCommandItems, - contextMenu.hideCommands + originalCommandItems ); } @@ -433,9 +433,9 @@ export class SlickContextMenu extends MenuFromCellBaseClass { return Array.isArray(groupingArray) && groupingArray.length > 0; }, }, + contextMenu.hideCommands, menuCommandItems, - originalCommandItems, - contextMenu.hideCommands + originalCommandItems ); } } diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts index 37f56165c3..3e49311cd2 100644 --- a/packages/common/src/extensions/slickGridMenu.ts +++ b/packages/common/src/extensions/slickGridMenu.ts @@ -558,9 +558,9 @@ export class SlickGridMenu extends MenuBaseClass { positionOrder: 52, action: this.clearPinning.bind(this), }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } @@ -577,9 +577,9 @@ export class SlickGridMenu extends MenuBaseClass { positionOrder: 50, action: this.clearFilters.bind(this), }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } @@ -595,9 +595,9 @@ export class SlickGridMenu extends MenuBaseClass { positionOrder: 53, action: this.toggleFilterBar.bind(this), }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } @@ -613,9 +613,9 @@ export class SlickGridMenu extends MenuBaseClass { positionOrder: 58, action: () => this.extensionUtility.refreshBackendDataset(), }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } } @@ -632,9 +632,9 @@ export class SlickGridMenu extends MenuBaseClass { positionOrder: 54, action: this.toggleDarkMode.bind(this), }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } @@ -654,9 +654,9 @@ export class SlickGridMenu extends MenuBaseClass { this.grid.setPreHeaderPanelVisibility(!showPreHeaderPanel); }, }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } } @@ -674,9 +674,9 @@ export class SlickGridMenu extends MenuBaseClass { positionOrder: 51, action: this.clearSorting.bind(this), }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } } @@ -693,9 +693,9 @@ export class SlickGridMenu extends MenuBaseClass { positionOrder: 55, action: this.exportCsv.bind(this), }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } @@ -711,9 +711,9 @@ export class SlickGridMenu extends MenuBaseClass { positionOrder: 56, action: this.exportExcel.bind(this), }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } @@ -729,9 +729,9 @@ export class SlickGridMenu extends MenuBaseClass { positionOrder: 57, action: this.exportPdf.bind(this), }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } @@ -747,9 +747,9 @@ export class SlickGridMenu extends MenuBaseClass { positionOrder: 58, action: this.exportTextDelimited.bind(this), }, + this._addonOptions.hideCommands, gridMenuCommandItems, - originalCommandItems, - this._addonOptions.hideCommands + originalCommandItems ); } diff --git a/packages/common/src/extensions/slickHeaderMenu.ts b/packages/common/src/extensions/slickHeaderMenu.ts index 18a3a41888..467c5c8c0c 100644 --- a/packages/common/src/extensions/slickHeaderMenu.ts +++ b/packages/common/src/extensions/slickHeaderMenu.ts @@ -312,9 +312,8 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 45, action: (_e, args) => this.freezeOrUnfreezeColumns(args.column, cmdUnfreeze), }, - columnHeaderMenuItems, - undefined, - headerMenuOptions.hideCommands + headerMenuOptions.hideCommands, + columnHeaderMenuItems ); } else { // make sure the "unfreeze-columns" doesn't exist before adding the "freeze-columns" @@ -331,9 +330,8 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 45, action: (_e, args) => this.freezeOrUnfreezeColumns(args.column, cmdFreeze), }, - columnHeaderMenuItems, - undefined, - headerMenuOptions.hideCommands + headerMenuOptions.hideCommands, + columnHeaderMenuItems ); } } @@ -355,9 +353,8 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 47, action: (_e, args) => this.pubSubService.publish('onHeaderMenuColumnResizeByContent', { columnId: args.column.id }), }, - columnHeaderMenuItems, - undefined, - headerMenuOptions.hideCommands + headerMenuOptions.hideCommands, + columnHeaderMenuItems ); } @@ -385,9 +382,8 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 50, action: (e, args) => this.sortColumn(e, args, true), }, - columnHeaderMenuItems, - undefined, - headerMenuOptions.hideCommands + headerMenuOptions.hideCommands, + columnHeaderMenuItems ); // sort descending command @@ -400,9 +396,8 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 51, action: (e, args) => this.sortColumn(e, args, false), }, - columnHeaderMenuItems, - undefined, - headerMenuOptions.hideCommands + headerMenuOptions.hideCommands, + columnHeaderMenuItems ); // add a divider (separator) between the top sort commands and the other clear commands @@ -420,9 +415,8 @@ export class SlickHeaderMenu extends MenuBaseClass { positionOrder: 58, action: (e, args) => this.clearColumnSort(e, args), }, - columnHeaderMenuItems, - undefined, - headerMenuOptions.hideCommands + headerMenuOptions.hideCommands, + columnHeaderMenuItems ); } } @@ -488,9 +482,8 @@ export class SlickHeaderMenu extends MenuBaseClass { this.clearColumnFilter(e, args); }, }, - columnHeaderMenuItems, - undefined, - headerMenuOptions.hideCommands + headerMenuOptions.hideCommands, + columnHeaderMenuItems ); } } @@ -511,9 +504,8 @@ export class SlickHeaderMenu extends MenuBaseClass { } }, }, - columnHeaderMenuItems, - undefined, - headerMenuOptions.hideCommands + headerMenuOptions.hideCommands, + columnHeaderMenuItems ); } From 466195334d00349829de0cb586203129e2080aea Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Sat, 14 Feb 2026 01:10:07 -0500 Subject: [PATCH 23/24] chore: simplify code a bit more --- .../common/src/extensions/slickContextMenu.ts | 10 +-- .../common/src/extensions/slickGridMenu.ts | 64 ++++++++----------- .../interfaces/contextMenuOption.interface.ts | 6 +- .../interfaces/headerMenuOption.interface.ts | 8 +-- 4 files changed, 34 insertions(+), 54 deletions(-) diff --git a/packages/common/src/extensions/slickContextMenu.ts b/packages/common/src/extensions/slickContextMenu.ts index b10ee8ce70..639e2615fc 100644 --- a/packages/common/src/extensions/slickContextMenu.ts +++ b/packages/common/src/extensions/slickContextMenu.ts @@ -232,10 +232,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { (service: any) => service.className === 'TextExportService' ); if (excelService?.exportToFile) { - excelService.exportToFile({ - delimiter: ',', - format: 'csv', - }); + excelService.exportToFile({ delimiter: ',', format: 'csv' }); } else { throw new Error( `[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Context Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };` @@ -323,10 +320,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass { (service: any) => service.className === 'TextExportService' ); if (excelService?.exportToFile) { - excelService.exportToFile({ - delimiter: '\t', - format: 'txt', - }); + excelService.exportToFile({ delimiter: '\t', format: 'txt' }); } else { throw new Error( `[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Context Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };` diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts index 3e49311cd2..97ac6ef58c 100644 --- a/packages/common/src/extensions/slickGridMenu.ts +++ b/packages/common/src/extensions/slickGridMenu.ts @@ -575,7 +575,11 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: 'clear-filter', positionOrder: 50, - action: this.clearFilters.bind(this), + action: () => { + this.filterService.clearFilters(); + this.sharedService.dataView.refresh(); + this.pubSubService.publish('onGridMenuClearAllFilters'); + }, }, this._addonOptions.hideCommands, gridMenuCommandItems, @@ -630,7 +634,11 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: 'toggle-dark-mode', positionOrder: 54, - action: this.toggleDarkMode.bind(this), + action: () => { + const currentDarkMode = this.sharedService.gridOptions.darkMode; + this.grid.setOptions({ darkMode: !currentDarkMode }); + this.sharedService.gridOptions.darkMode = !currentDarkMode; + }, }, this._addonOptions.hideCommands, gridMenuCommandItems, @@ -672,7 +680,11 @@ export class SlickGridMenu extends MenuBaseClass { disabled: false, command: 'clear-sorting', positionOrder: 51, - action: this.clearSorting.bind(this), + action: () => { + this.sortService.clearSorting(); + this.sharedService.dataView.refresh(); + this.pubSubService.publish('onGridMenuClearAllSorting'); + }, }, this._addonOptions.hideCommands, gridMenuCommandItems, @@ -766,45 +778,34 @@ export class SlickGridMenu extends MenuBaseClass { return gridMenuCommandItems; } - protected clearFilters(): void { - this.filterService.clearFilters(); - this.sharedService.dataView.refresh(); - this.pubSubService.publish('onGridMenuClearAllFilters'); - } - protected clearPinning(): void { - const newGridOptions = { frozenColumn: -1, frozenRow: -1, frozenBottom: false, enableMouseWheelScrollHandler: false }; + // reset frozen props on both SlickGrid options and shared service options + const newGridOptions = { + frozenColumn: -1, + frozenRow: -1, + frozenBottom: false, + enableMouseWheelScrollHandler: false, + } as Partial; this.grid.setOptions(newGridOptions); - this.sharedService.gridOptions.frozenColumn = newGridOptions.frozenColumn; - this.sharedService.gridOptions.frozenRow = newGridOptions.frozenRow; - this.sharedService.gridOptions.frozenBottom = newGridOptions.frozenBottom; - this.sharedService.gridOptions.enableMouseWheelScrollHandler = newGridOptions.enableMouseWheelScrollHandler; + Object.keys(newGridOptions).forEach( + (c) => (this.sharedService.gridOptions[c as keyof GridOption] = newGridOptions[c as keyof GridOption]) + ); // re-update columns to reflect any possible changes this.grid.updateColumns(); // we also need to autosize columns if the option is enabled - const gridOptions = this.gridOptions; - if (gridOptions.enableAutoSizeColumns) { + if (this.gridOptions.enableAutoSizeColumns) { this.grid.autosizeColumns(); } this.pubSubService.publish('onGridMenuClearAllPinning'); } - protected clearSorting(): void { - this.sortService.clearSorting(); - this.sharedService.dataView.refresh(); - this.pubSubService.publish('onGridMenuClearAllSorting'); - } - protected exportCsv(): void { const registeredResources = this.sharedService?.externalRegisteredResources || []; const exportCsvService: TextExportService = registeredResources.find((service: any) => service.className === 'TextExportService'); if (exportCsvService?.exportToFile) { - exportCsvService.exportToFile({ - delimiter: ',', - format: 'csv', - }); + exportCsvService.exportToFile({ delimiter: ',', format: 'csv' }); } else { console.error( `[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };` @@ -844,10 +845,7 @@ export class SlickGridMenu extends MenuBaseClass { (service: any) => service.className === 'TextExportService' ); if (exportTxtService?.exportToFile) { - exportTxtService.exportToFile({ - delimiter: '\t', - format: 'txt', - }); + exportTxtService.exportToFile({ delimiter: '\t', format: 'txt' }); } else { console.error( `[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };` @@ -855,12 +853,6 @@ export class SlickGridMenu extends MenuBaseClass { } } - protected toggleDarkMode(): void { - const currentDarkMode = this.sharedService.gridOptions.darkMode; - this.grid.setOptions({ darkMode: !currentDarkMode }); - this.sharedService.gridOptions.darkMode = !currentDarkMode; - } - protected toggleFilterBar(): void { let showHeaderRow = this.gridOptions?.showHeaderRow ?? false; showHeaderRow = !showHeaderRow; // inverse show header flag diff --git a/packages/common/src/interfaces/contextMenuOption.interface.ts b/packages/common/src/interfaces/contextMenuOption.interface.ts index 1ef3583ed8..253df4edf2 100644 --- a/packages/common/src/interfaces/contextMenuOption.interface.ts +++ b/packages/common/src/interfaces/contextMenuOption.interface.ts @@ -47,7 +47,7 @@ export interface ContextMenuOption extends MenuOption /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, hide the "Collapse all Groups" command in the menu (Grid Option "enableGrouping: true" has to be enabled) */ hideCollapseAllGroups?: boolean; - /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, hide the Commands section even when the commandItems array is filled */ + /** Defaults to false, hide the Commands section even when the commandItems array is filled */ hideCommandSection?: boolean; /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, which will hide the "Copy Cell Value" command in the menu */ @@ -68,10 +68,10 @@ export interface ContextMenuOption extends MenuOption /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, which will hide the "Export to Text Delimited" command in the menu (Grid Option "enableTextExport: true" has to be enabled) */ hideExportTextDelimitedCommand?: boolean; - /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to true, do we want to hide the Cell Menu when a scrolling event occurs? */ + /** Defaults to true, do we want to hide the Cell Menu when a scrolling event occurs? */ hideMenuOnScroll?: boolean; - /** @deprecated @use `hideCommands` or `commandListBuilder` Defaults to false, Hide the Options section even when the optionItems array is filled */ + /** Defaults to false, Hide the Options section even when the optionItems array is filled */ hideOptionSection?: boolean; /** icon for the "Clear Grouping" command (Grid Option "enableGrouping: true" has to be enabled) */ diff --git a/packages/common/src/interfaces/headerMenuOption.interface.ts b/packages/common/src/interfaces/headerMenuOption.interface.ts index 594a2d2a23..6475e7ac3a 100644 --- a/packages/common/src/interfaces/headerMenuOption.interface.ts +++ b/packages/common/src/interfaces/headerMenuOption.interface.ts @@ -16,7 +16,7 @@ export interface HeaderMenuOption extends MenuOption Date: Sat, 14 Feb 2026 01:22:00 -0500 Subject: [PATCH 24/24] chore: use typing instead of casting --- packages/common/src/extensions/slickGridMenu.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts index 97ac6ef58c..c4e0d9522d 100644 --- a/packages/common/src/extensions/slickGridMenu.ts +++ b/packages/common/src/extensions/slickGridMenu.ts @@ -780,12 +780,12 @@ export class SlickGridMenu extends MenuBaseClass { protected clearPinning(): void { // reset frozen props on both SlickGrid options and shared service options - const newGridOptions = { + const newGridOptions: Partial = { frozenColumn: -1, frozenRow: -1, frozenBottom: false, enableMouseWheelScrollHandler: false, - } as Partial; + }; this.grid.setOptions(newGridOptions); Object.keys(newGridOptions).forEach( (c) => (this.sharedService.gridOptions[c as keyof GridOption] = newGridOptions[c as keyof GridOption])