// @ts-ignore import type { SortableEvent, SortableInstance, SortableOptions } from 'sortablejs'; import type { AutoSize, CellPosition, CellViewportRange, Column, ColumnMetadata, ColumnSort, CssStyleHash, CSSStyleDeclarationWritable, CustomDataView, DOMEvent, DragPosition, DragRowMove, Editor, EditorArguments, EditorConstructor, EditController, Formatter, FormatterOverrideCallback, FormatterResultObject, FormatterResultWithHtml, FormatterResultWithText, GridOption as BaseGridOption, InteractionBase, ItemMetadata, MenuCommandItemCallbackArgs, MultiColumnSort, OnActivateChangedOptionsEventArgs, OnActiveCellChangedEventArgs, OnAddNewRowEventArgs, OnAfterSetColumnsEventArgs, OnAutosizeColumnsEventArgs, OnColumnsEventArgs, OnBeforeAppendCellEventArgs, OnBeforeCellEditorDestroyEventArgs, OnBeforeColumnsResizeEventArgs, OnBeforeEditCellEventArgs, OnBeforeHeaderCellDestroyEventArgs, OnBeforeHeaderRowCellDestroyEventArgs, OnBeforeFooterRowCellDestroyEventArgs, OnBeforeSetColumnsEventArgs, OnCellChangeEventArgs, OnCellCssStylesChangedEventArgs, OnClickEventArgs, OnColumnsDragEventArgs, OnColumnsReorderedEventArgs, OnColumnsResizedEventArgs, OnColumnsResizeDblClickEventArgs, OnCompositeEditorChangeEventArgs, OnDblClickEventArgs, OnFooterContextMenuEventArgs, OnFooterRowCellRenderedEventArgs, OnHeaderCellRenderedEventArgs, OnFooterClickEventArgs, OnHeaderClickEventArgs, OnHeaderContextMenuEventArgs, OnHeaderMouseEventArgs, OnHeaderRowCellRenderedEventArgs, OnKeyDownEventArgs, OnPreHeaderContextMenuEventArgs, OnPreHeaderClickEventArgs, OnRenderedEventArgs, OnSelectedRowsChangedEventArgs, OnSetOptionsEventArgs, OnScrollEventArgs, OnValidationErrorEventArgs, OnDragReplaceCellsEventArgs, PagingInfo, RowInfo, SelectionModel, SingleColumnSort, SlickGridModel, SlickPlugin, } from './models/index.js'; import { type BasePubSub, BindingEventService as BindingEventService_, ColAutosizeMode as ColAutosizeMode_, GlobalEditorLock as GlobalEditorLock_, GridAutosizeColsMode as GridAutosizeColsMode_, keyCode as keyCode_, preClickClassName as preClickClassName_, RowSelectionMode as RowSelectionMode_, CellSelectionMode as CellSelectionMode_, type SlickEditorLock, SlickEvent as SlickEvent_, SlickEventData as SlickEventData_, SlickRange as SlickRange_, Utils as Utils_, SelectionUtils as SelectionUtils_, ValueFilterMode as ValueFilterMode_, WidthEvalMode as WidthEvalMode_, DragExtendHandle as DragExtendHandle_, } from './slick.core.js'; import { Draggable as Draggable_, MouseWheel as MouseWheel_, Resizable as Resizable_ } from './slick.interactions.js'; // for (iife) load Slick methods from global Slick object, or use imports for (esm) const BindingEventService = IIFE_ONLY ? Slick.BindingEventService : BindingEventService_; const ColAutosizeMode = IIFE_ONLY ? Slick.ColAutosizeMode : ColAutosizeMode_; const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_; const SlickEventData = IIFE_ONLY ? Slick.EventData : SlickEventData_; const GlobalEditorLock = IIFE_ONLY ? Slick.GlobalEditorLock : GlobalEditorLock_; const GridAutosizeColsMode = IIFE_ONLY ? Slick.GridAutosizeColsMode : GridAutosizeColsMode_; const keyCode = IIFE_ONLY ? Slick.keyCode : keyCode_; const preClickClassName = IIFE_ONLY ? Slick.preClickClassName : preClickClassName_; const SlickRange = IIFE_ONLY ? Slick.Range : SlickRange_; const RowSelectionMode = IIFE_ONLY ? Slick.RowSelectionMode : RowSelectionMode_; const CellSelectionMode = IIFE_ONLY ? Slick.CellSelectionMode : CellSelectionMode_; const ValueFilterMode = IIFE_ONLY ? Slick.ValueFilterMode : ValueFilterMode_; const Utils = IIFE_ONLY ? Slick.Utils : Utils_; const SelectionUtils = IIFE_ONLY ? Slick.SelectionUtils : SelectionUtils_; const WidthEvalMode = IIFE_ONLY ? Slick.WidthEvalMode : WidthEvalMode_; const Draggable = IIFE_ONLY ? Slick.Draggable : Draggable_; const MouseWheel = IIFE_ONLY ? Slick.MouseWheel : MouseWheel_; const Resizable = IIFE_ONLY ? Slick.Resizable : Resizable_; const DragExtendHandle = IIFE_ONLY ? Slick.DragExtendHandle : DragExtendHandle_; /** * @license * (c) 2009-present Michael Leibman * michael{dot}leibman{at}gmail{dot}com * http://github.com/mleibman/slickgrid * * Distributed under MIT license. * All rights reserved. * * SlickGrid v5.18.6 * * NOTES: * Cell/row DOM manipulations are done directly bypassing JS DOM manipulation methods. * This increases the speed dramatically, but can only be done safely because there are no event handlers * or data associated with any cell/row DOM nodes. Cell editors must make sure they implement .destroy() * and do proper cleanup. */ ////////////////////////////////////////////////////////////////////////////////////////////// // SlickGrid class implementation (available as SlickGrid) interface RowCaching { rowNode: HTMLElement[] | null, cellColSpans: Array; cellNodesByColumnIdx: HTMLElement[]; cellRenderQueue: any[]; } export class SlickGrid = Column, O extends BaseGridOption = BaseGridOption> { ////////////////////////////////////////////////////////////////////////////////////////////// // Public API slickGridVersion = '5.18.6'; /** optional grid state clientId */ cid = ''; // Events onActiveCellChanged: SlickEvent_; onActiveCellPositionChanged: SlickEvent_<{ grid: SlickGrid; }>; onAddNewRow: SlickEvent_; onAfterSetColumns: SlickEvent_; onAutosizeColumns: SlickEvent_; onBeforeAppendCell: SlickEvent_; onBeforeCellEditorDestroy: SlickEvent_; onBeforeColumnsResize: SlickEvent_; onBeforeDestroy: SlickEvent_<{ grid: SlickGrid; }>; onBeforeEditCell: SlickEvent_; onBeforeFooterRowCellDestroy: SlickEvent_; onBeforeHeaderCellDestroy: SlickEvent_; onBeforeHeaderRowCellDestroy: SlickEvent_; onBeforeRemoveCachedRow: SlickEvent_<{ row: number; grid: SlickGrid }>; onBeforeSetColumns: SlickEvent_; onBeforeSort: SlickEvent_; onBeforeUpdateColumns: SlickEvent_; onAfterUpdateColumns: SlickEvent_; onCellChange: SlickEvent_; onCellCssStylesChanged: SlickEvent_; onClick: SlickEvent_; onColumnsReordered: SlickEvent_; onColumnsDrag: SlickEvent_; onColumnsResized: SlickEvent_; onColumnsResizeDblClick: SlickEvent_; onCompositeEditorChange: SlickEvent_; onContextMenu: SlickEvent_; onDrag: SlickEvent_; onDblClick: SlickEvent_; onDragInit: SlickEvent_; onDragStart: SlickEvent_; onDragEnd: SlickEvent_; onFooterClick: SlickEvent_; onFooterContextMenu: SlickEvent_; onFooterRowCellRendered: SlickEvent_; onHeaderCellRendered: SlickEvent_; onHeaderClick: SlickEvent_; onHeaderContextMenu: SlickEvent_; onHeaderMouseEnter: SlickEvent_; onHeaderMouseLeave: SlickEvent_; onHeaderRowCellRendered: SlickEvent_; onHeaderRowMouseEnter: SlickEvent_; onHeaderRowMouseLeave: SlickEvent_; onPreHeaderContextMenu: SlickEvent_; onPreHeaderClick: SlickEvent_; onKeyDown: SlickEvent_; onMouseEnter: SlickEvent_; onMouseLeave: SlickEvent_; onRendered: SlickEvent_; onScroll: SlickEvent_; onSelectedRowsChanged: SlickEvent_; onSetOptions: SlickEvent_; onActivateChangedOptions: SlickEvent_; onSort: SlickEvent_; onValidationError: SlickEvent_; onViewportChanged: SlickEvent_<{ grid: SlickGrid; }>; onDragReplaceCells: SlickEvent_; // --- // protected variables // shared across all grids on the page protected scrollbarDimensions?: { height: number; width: number; }; protected maxSupportedCssHeight!: number; // browser's breaking point protected canvas: HTMLCanvasElement | null = null; protected canvas_context: CanvasRenderingContext2D | null = null; // settings protected _options!: O; protected _defaults: BaseGridOption = { invalidColumnFreezePickerCallback: (error) => alert(error), invalidColumnFreezeWidthCallback: (error) => alert(error), invalidColumnFreezeWidthMessage: '[SlickGrid] You are trying to freeze/pin more columns than the grid can support. ' + 'Make sure to have less columns pinned (on the left) than the actual visible grid width.', invalidColumnFreezePickerMessage: '[SlickGrid] Action not allowed and aborted, you need to have at least one or more column on the right section of the column freeze/pining. ' + 'You could alternatively "Unfreeze all the columns" before trying again.', alwaysShowVerticalScroll: false, alwaysAllowHorizontalScroll: false, explicitInitialization: false, rowHeight: 25, defaultColumnWidth: 80, enableHtmlRendering: true, enableAddRow: false, leaveSpaceForNewRows: false, editable: false, autoEdit: true, autoEditNewRow: true, autoCommitEdit: false, suppressActiveCellChangeOnEdit: false, enableCellNavigation: true, enableColumnReorder: true, unorderableColumnCssClass: 'unorderable', asyncEditorLoading: false, asyncEditorLoadDelay: 100, forceFitColumns: false, enableAsyncPostRender: false, asyncPostRenderDelay: 50, enableAsyncPostRenderCleanup: false, asyncPostRenderCleanupDelay: 40, auto: false, nonce: '', editorLock: GlobalEditorLock, showColumnHeader: true, showHeaderRow: false, headerRowHeight: 25, createFooterRow: false, showFooterRow: false, footerRowHeight: 25, createPreHeaderPanel: false, createTopHeaderPanel: false, showPreHeaderPanel: false, showTopHeaderPanel: false, preHeaderPanelHeight: 25, showTopPanel: false, topPanelHeight: 25, preHeaderPanelWidth: 'auto', // mostly useful for Draggable Grouping dropzone to take full width topHeaderPanelHeight: 25, topHeaderPanelWidth: 'auto', // mostly useful for Draggable Grouping dropzone to take full width formatterFactory: null, editorFactory: null, cellFlashingCssClass: 'flashing', rowHighlightCssClass: 'highlight-animate', rowHighlightDuration: 400, selectedCellCssClass: 'selected', multiSelect: true, enableCellRowSpan: false, enableTextSelectionOnCells: false, dataItemColumnValueExtractor: null, frozenBottom: false, frozenColumn: -1, frozenRow: -1, frozenRightViewportMinWidth: 100, throwWhenFrozenNotAllViewable: false, fullWidthRows: false, multiColumnSort: false, numberedMultiColumnSort: false, tristateMultiColumnSort: false, sortColNumberInSeparateSpan: false, defaultFormatter: this.defaultFormatter, forceSyncScrolling: false, addNewRowCssClass: 'new-row', preserveCopiedSelectionOnPaste: false, preventDragFromKeys: ['ctrlKey', 'metaKey'], showCellSelection: true, viewportClass: undefined, minRowBuffer: 3, emulatePagingWhenScrolling: true, // when scrolling off bottom of viewport, place new row at top of viewport editorCellNavOnLRKeys: false, enableMouseWheelScrollHandler: true, doPaging: true, autosizeColsMode: GridAutosizeColsMode.LegacyOff, autosizeColPaddingPx: 4, rowTopOffsetRenderType: 'top', scrollRenderThrottling: 10, autosizeTextAvgToMWidthRatio: 0.75, viewportSwitchToScrollModeWidthPercent: undefined, viewportMinWidthPx: undefined, viewportMaxWidthPx: undefined, suppressCssChangesOnHiddenInit: false, ffMaxSupportedCssHeight: 6000000, maxSupportedCssHeight: 1000000000, maxPartialRowSpanRemap: 5000, sanitizer: undefined, // sanitize function, built in basic sanitizer is: Slick.RegexSanitizer(dirtyHtml) logSanitizedHtml: false, // log to console when sanitised - recommend true for testing of dev and production mixinDefaults: true, shadowRoot: undefined, colAutosizeTreatAsLockedBelowWidth: 100 }; protected _columnDefaults = { name: '', headerCssClass: null, defaultSortAsc: true, focusable: true, hidden: false, minWidth: 30, maxWidth: undefined, rerenderOnResize: false, reorderable: true, resizable: true, sortable: false, selectable: true, } as Partial; protected _columnAutosizeDefaults: AutoSize = { ignoreHeaderText: false, colValueArray: undefined, allowAddlPercent: undefined, formatterOverride: undefined, autosizeMode: ColAutosizeMode.ContentIntelligent, rowSelectionModeOnInit: undefined, rowSelectionMode: RowSelectionMode.FirstNRows, rowSelectionCount: 100, valueFilterMode: ValueFilterMode.None, widthEvalMode: WidthEvalMode.Auto, sizeToRemaining: undefined, widthPx: undefined, contentSizePx: 0, headerWidthPx: 0, colDataTypeOf: undefined }; protected _columnResizeTimer?: number; protected _executionBlockTimer?: number; protected _flashCellTimer?: number; protected _highlightRowTimer?: number; // scroller protected th!: number; // virtual height protected h!: number; // real scrollable height protected ph!: number; // page height protected n!: number; // number of pages protected cj!: number; // "jumpiness" coefficient protected page = 0; // current page protected offset = 0; // current page offset protected vScrollDir = 1; protected _bindingEventService = new BindingEventService(); protected initialized = false; protected _container!: HTMLElement; protected uid = `slickgrid_${Math.round(1000000 * Math.random())}`; protected dragReplaceEl = new DragExtendHandle(this.uid); protected _focusSink!: HTMLDivElement; protected _focusSink2!: HTMLDivElement; protected _groupHeaders: HTMLDivElement[] = []; protected _headerScroller: HTMLDivElement[] = []; protected _headers: HTMLDivElement[] = []; protected _headerRows!: HTMLDivElement[]; protected _headerRowScroller!: HTMLDivElement[]; protected _headerRowSpacerL!: HTMLDivElement; protected _headerRowSpacerR!: HTMLDivElement; protected _footerRow!: HTMLDivElement[]; protected _footerRowScroller!: HTMLDivElement[]; protected _footerRowSpacerL!: HTMLDivElement; protected _footerRowSpacerR!: HTMLDivElement; protected _preHeaderPanel!: HTMLDivElement; protected _preHeaderPanelScroller!: HTMLDivElement; protected _preHeaderPanelSpacer!: HTMLDivElement; protected _preHeaderPanelR!: HTMLDivElement; protected _preHeaderPanelScrollerR!: HTMLDivElement; protected _preHeaderPanelSpacerR!: HTMLDivElement; protected _topHeaderPanel!: HTMLDivElement; protected _topHeaderPanelScroller!: HTMLDivElement; protected _topHeaderPanelSpacer!: HTMLDivElement; protected _topPanelScrollers!: HTMLDivElement[]; protected _topPanels!: HTMLDivElement[]; protected _viewport!: HTMLDivElement[]; protected _canvas!: HTMLDivElement[]; protected _style?: HTMLStyleElement; protected _boundAncestors: HTMLElement[] = []; protected stylesheet?: { cssRules: Array<{ selectorText: string; }>; rules: Array<{ selectorText: string; }>; } | null; protected columnCssRulesL?: Array<{ selectorText: string; }>; protected columnCssRulesR?: Array<{ selectorText: string; }>; protected viewportH = 0; protected viewportW = 0; protected canvasWidth = 0; protected canvasWidthL = 0; protected canvasWidthR = 0; protected headersWidth = 0; protected headersWidthL = 0; protected headersWidthR = 0; protected viewportHasHScroll = false; protected viewportHasVScroll = false; protected headerColumnWidthDiff = 0; protected headerColumnHeightDiff = 0; // border+padding protected cellWidthDiff = 0; protected cellHeightDiff = 0; protected absoluteColumnMinWidth!: number; protected hasFrozenRows = false; protected frozenRowsHeight = 0; protected actualFrozenRow = -1; protected _prevFrozenColumnIdx = -1; /** flag to indicate if invalid frozen alert has been shown already or not? This is to avoid showing it more than once */ protected _invalidfrozenAlerted = false; protected paneTopH = 0; protected paneBottomH = 0; protected viewportTopH = 0; protected viewportBottomH = 0; protected topPanelH = 0; protected headerRowH = 0; protected footerRowH = 0; protected tabbingDirection = 1; protected _activeCanvasNode!: HTMLDivElement; protected _activeViewportNode!: HTMLDivElement; protected activePosX!: number; protected activePosY!: number; protected activeRow!: number; protected activeCell!: number; protected selectionBottomRow!: number; protected selectionRightCell!: number; protected activeCellNode: HTMLDivElement | null = null; protected currentEditor: Editor | null = null; protected serializedEditorValue: any; protected editController?: EditController; protected _prevDataLength = 0; protected _prevInvalidatedRowsCount = 0; protected _rowSpanIsCached = false; protected _colsWithRowSpanCache: { [colIdx: number]: Set } = {}; protected rowsCache: Record = {}; protected renderedRows = 0; protected numVisibleRows = 0; protected prevScrollTop = 0; protected scrollHeight = 0; protected scrollTop = 0; protected lastRenderedScrollTop = 0; protected lastRenderedScrollLeft = 0; protected prevScrollLeft = 0; protected scrollLeft = 0; protected selectionModel?: SelectionModel; protected selectedRows: number[] = []; protected selectedRanges: SlickRange_[] = []; protected plugins: SlickPlugin[] = []; protected cellCssClasses: CssStyleHash = {}; protected columnsById: Record = {}; protected sortColumns: ColumnSort[] = []; protected columnPosLeft: number[] = []; protected columnPosRight: number[] = []; protected pagingActive = false; protected pagingIsLastPage = false; protected scrollThrottle!: { enqueue: () => void; dequeue: () => void; }; // async call handles protected h_editorLoader?: number; protected h_postrender?: number; protected h_postrenderCleanup?: number; protected postProcessedRows: any = {}; protected postProcessToRow: number = null as any; protected postProcessFromRow: number = null as any; protected postProcessedCleanupQueue: Array<{ actionType: string; groupId: number; node: HTMLElement | HTMLElement[]; columnIdx?: number; rowIdx?: number; }> = []; protected postProcessgroupId = 0; // perf counters protected counter_rows_rendered = 0; protected counter_rows_removed = 0; protected _paneHeaderL!: HTMLDivElement; protected _paneHeaderR!: HTMLDivElement; protected _paneTopL!: HTMLDivElement; protected _paneTopR!: HTMLDivElement; protected _paneBottomL!: HTMLDivElement; protected _paneBottomR!: HTMLDivElement; protected _headerScrollerL!: HTMLDivElement; protected _headerScrollerR!: HTMLDivElement; protected _headerL!: HTMLDivElement; protected _headerR!: HTMLDivElement; protected _groupHeadersL!: HTMLDivElement; protected _groupHeadersR!: HTMLDivElement; protected _headerRowScrollerL!: HTMLDivElement; protected _headerRowScrollerR!: HTMLDivElement; protected _footerRowScrollerL!: HTMLDivElement; protected _footerRowScrollerR!: HTMLDivElement; protected _headerRowL!: HTMLDivElement; protected _headerRowR!: HTMLDivElement; protected _footerRowL!: HTMLDivElement; protected _footerRowR!: HTMLDivElement; protected _topPanelScrollerL!: HTMLDivElement; protected _topPanelScrollerR!: HTMLDivElement; protected _topPanelL!: HTMLDivElement; protected _topPanelR!: HTMLDivElement; protected _viewportTopL!: HTMLDivElement; protected _viewportTopR!: HTMLDivElement; protected _viewportBottomL!: HTMLDivElement; protected _viewportBottomR!: HTMLDivElement; protected _canvasTopL!: HTMLDivElement; protected _canvasTopR!: HTMLDivElement; protected _canvasBottomL!: HTMLDivElement; protected _canvasBottomR!: HTMLDivElement; protected _viewportScrollContainerX!: HTMLDivElement; protected _viewportScrollContainerY!: HTMLDivElement; protected _headerScrollContainer!: HTMLDivElement; protected _headerRowScrollContainer!: HTMLDivElement; protected _footerRowScrollContainer!: HTMLDivElement; // store css attributes if display:none is active in container or parent protected cssShow = { position: 'absolute', visibility: 'hidden', display: 'block' }; protected _hiddenParents: HTMLElement[] = []; protected oldProps: Array> = []; protected enforceFrozenRowHeightRecalc = false; protected columnResizeDragging = false; protected slickDraggableInstance: InteractionBase | null = null; protected slickMouseWheelInstances: Array = []; protected slickResizableInstances: Array = []; protected sortableSideLeftInstance?: SortableInstance; protected sortableSideRightInstance?: SortableInstance; protected logMessageCount = 0; protected logMessageMaxCount = 30; protected _pubSubService?: BasePubSub; /** * Creates a new instance of the grid. * @class SlickGrid * @constructor * @param {Node} container - Container node to create the grid in. * @param {Array|Object} data - An array of objects for databinding or an external DataView. * @param {Array} columns - An array of column definitions. * @param {Object} [options] - Grid Options * @param {Object} [externalPubSub] - optional External PubSub Service to use by SlickEvent **/ constructor(protected readonly container: HTMLElement | string, protected data: CustomDataView | TData[], protected columns: C[], options: Partial, protected readonly externalPubSub?: BasePubSub) { this._container = typeof this.container === 'string' ? document.querySelector(this.container) as HTMLDivElement : this.container; if (!this._container) { throw new Error(`SlickGrid requires a valid container, ${this.container} does not exist in the DOM.`); } this._pubSubService = externalPubSub; this.onActiveCellChanged = new SlickEvent('onActiveCellChanged', externalPubSub); this.onActiveCellPositionChanged = new SlickEvent<{ grid: SlickGrid; }>('onActiveCellPositionChanged', externalPubSub); this.onAddNewRow = new SlickEvent('onAddNewRow', externalPubSub); this.onAfterSetColumns = new SlickEvent('onAfterSetColumns', externalPubSub); this.onAutosizeColumns = new SlickEvent('onAutosizeColumns', externalPubSub); this.onBeforeAppendCell = new SlickEvent('onBeforeAppendCell', externalPubSub); this.onBeforeCellEditorDestroy = new SlickEvent('onBeforeCellEditorDestroy', externalPubSub); this.onBeforeColumnsResize = new SlickEvent('onBeforeColumnsResize', externalPubSub); this.onBeforeDestroy = new SlickEvent<{ grid: SlickGrid; }>('onBeforeDestroy', externalPubSub); this.onBeforeEditCell = new SlickEvent('onBeforeEditCell', externalPubSub); this.onBeforeFooterRowCellDestroy = new SlickEvent('onBeforeFooterRowCellDestroy', externalPubSub); this.onBeforeHeaderCellDestroy = new SlickEvent('onBeforeHeaderCellDestroy', externalPubSub); this.onBeforeHeaderRowCellDestroy = new SlickEvent('onBeforeHeaderRowCellDestroy', externalPubSub); this.onBeforeRemoveCachedRow = new SlickEvent<{ row: number; grid: SlickGrid }>('onRowRemovedFromCache', externalPubSub); this.onBeforeSetColumns = new SlickEvent('onBeforeSetColumns', externalPubSub); this.onBeforeSort = new SlickEvent('onBeforeSort', externalPubSub); this.onBeforeUpdateColumns = new SlickEvent('onBeforeUpdateColumns', externalPubSub); this.onAfterUpdateColumns = new SlickEvent('onBeforeUpdateColumns', externalPubSub); this.onCellChange = new SlickEvent('onCellChange', externalPubSub); this.onCellCssStylesChanged = new SlickEvent('onCellCssStylesChanged', externalPubSub); this.onClick = new SlickEvent('onClick', externalPubSub); this.onColumnsReordered = new SlickEvent('onColumnsReordered', externalPubSub); this.onColumnsDrag = new SlickEvent('onColumnsDrag', externalPubSub); this.onColumnsResized = new SlickEvent('onColumnsResized', externalPubSub); this.onColumnsResizeDblClick = new SlickEvent('onColumnsResizeDblClick', externalPubSub); this.onCompositeEditorChange = new SlickEvent('onCompositeEditorChange', externalPubSub); this.onContextMenu = new SlickEvent('onContextMenu', externalPubSub); this.onDrag = new SlickEvent('onDrag', externalPubSub); this.onDblClick = new SlickEvent('onDblClick', externalPubSub); this.onDragInit = new SlickEvent('onDragInit', externalPubSub); this.onDragStart = new SlickEvent('onDragStart', externalPubSub); this.onDragEnd = new SlickEvent('onDragEnd', externalPubSub); this.onFooterClick = new SlickEvent('onFooterClick', externalPubSub); this.onFooterContextMenu = new SlickEvent('onFooterContextMenu', externalPubSub); this.onFooterRowCellRendered = new SlickEvent('onFooterRowCellRendered', externalPubSub); this.onHeaderCellRendered = new SlickEvent('onHeaderCellRendered', externalPubSub); this.onHeaderClick = new SlickEvent('onHeaderClick', externalPubSub); this.onHeaderContextMenu = new SlickEvent('onHeaderContextMenu', externalPubSub); this.onHeaderMouseEnter = new SlickEvent('onHeaderMouseEnter', externalPubSub); this.onHeaderMouseLeave = new SlickEvent('onHeaderMouseLeave', externalPubSub); this.onHeaderRowCellRendered = new SlickEvent('onHeaderRowCellRendered', externalPubSub); this.onHeaderRowMouseEnter = new SlickEvent('onHeaderRowMouseEnter', externalPubSub); this.onHeaderRowMouseLeave = new SlickEvent('onHeaderRowMouseLeave', externalPubSub); this.onPreHeaderClick = new SlickEvent('onPreHeaderClick', externalPubSub); this.onPreHeaderContextMenu = new SlickEvent('onPreHeaderContextMenu', externalPubSub); this.onKeyDown = new SlickEvent('onKeyDown', externalPubSub); this.onMouseEnter = new SlickEvent('onMouseEnter', externalPubSub); this.onMouseLeave = new SlickEvent('onMouseLeave', externalPubSub); this.onRendered = new SlickEvent('onRendered', externalPubSub); this.onScroll = new SlickEvent('onScroll', externalPubSub); this.onSelectedRowsChanged = new SlickEvent('onSelectedRowsChanged', externalPubSub); this.onSetOptions = new SlickEvent('onSetOptions', externalPubSub); this.onActivateChangedOptions = new SlickEvent('onActivateChangedOptions', externalPubSub); this.onSort = new SlickEvent('onSort', externalPubSub); this.onValidationError = new SlickEvent('onValidationError', externalPubSub); this.onViewportChanged = new SlickEvent<{ grid: SlickGrid; }>('onViewportChanged', externalPubSub); this.onDragReplaceCells = new SlickEvent('onDragReplaceCells', externalPubSub); this.initialize(options); } ////////////////////////////////////////////////////////////////////////////////////////////// // Grid and Dom Initialisation ////////////////////////////////////////////////////////////////////////////////////////////// /** Initializes the grid. */ init() { this.finishInitialization(); } /** * Processes the provided grid options (mixing in default settings as needed), * validates required modules (for example, ensuring Sortable.js is loaded if column reordering is enabled), * and creates all necessary DOM elements for the grid (including header containers, viewports, canvases, panels, etc.). * It also caches CSS if the container or its ancestors are hidden and calls finish. * * @param {Partial} options - Partial grid options to be applied during initialization. */ protected initialize(options: Partial) { // calculate these only once and share between grid instances if (options?.mixinDefaults) { // use provided options and then assign defaults if (!this._options) { this._options = options as O; } Utils.applyDefaults(this._options, this._defaults); } else { this._options = Utils.extend(true, {}, this._defaults, options); } this.scrollThrottle = this.actionThrottle(this.render.bind(this), this._options.scrollRenderThrottling as number); this.maxSupportedCssHeight = this.maxSupportedCssHeight || this.getMaxSupportedCssHeight(); this.validateAndEnforceOptions(); this._columnDefaults.width = this._options.defaultColumnWidth; this._prevFrozenColumnIdx = this.getFrozenColumnIdx(); if (!this._options.suppressCssChangesOnHiddenInit) { this.cacheCssForHiddenInit(); } this.updateColumnProps(); // validate loaded JavaScript modules against requested options if (this._options.enableColumnReorder && (!Sortable || !Sortable.create)) { throw new Error('SlickGrid requires Sortable.js module to be loaded'); } this.editController = { commitCurrentEdit: this.commitCurrentEdit.bind(this), cancelCurrentEdit: this.cancelCurrentEdit.bind(this), }; Utils.emptyElement(this._container); this._container.style.outline = String(0); this._container.classList.add(this.uid); this._container.classList.add('ui-widget'); this._container.setAttribute('role', 'grid'); const containerStyles = window.getComputedStyle(this._container); if (!(/relative|absolute|fixed/).test(containerStyles.position)) { this._container.style.position = 'relative'; } this._focusSink = Utils.createDomElement('div', { tabIndex: 0, style: { position: 'fixed', width: '0px', height: '0px', top: '0px', left: '0px', outline: '0px' } }, this._container); if (this._options.createTopHeaderPanel) { this._topHeaderPanelScroller = Utils.createDomElement('div', { className: 'slick-topheader-panel slick-state-default', style: { overflow: 'hidden', position: 'relative' } }, this._container); this._topHeaderPanelScroller.appendChild(document.createElement('div')); this._topHeaderPanel = Utils.createDomElement('div', null, this._topHeaderPanelScroller); this._topHeaderPanelSpacer = Utils.createDomElement('div', { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } }, this._topHeaderPanelScroller); if (!this._options.showTopHeaderPanel) { Utils.hide(this._topHeaderPanelScroller); } } // Containers used for scrolling frozen columns and rows this._paneHeaderL = Utils.createDomElement('div', { className: 'slick-pane slick-pane-header slick-pane-left', tabIndex: 0 }, this._container); this._paneHeaderR = Utils.createDomElement('div', { className: 'slick-pane slick-pane-header slick-pane-right', tabIndex: 0 }, this._container); this._paneTopL = Utils.createDomElement('div', { className: 'slick-pane slick-pane-top slick-pane-left', tabIndex: 0 }, this._container); this._paneTopR = Utils.createDomElement('div', { className: 'slick-pane slick-pane-top slick-pane-right', tabIndex: 0 }, this._container); this._paneBottomL = Utils.createDomElement('div', { className: 'slick-pane slick-pane-bottom slick-pane-left', tabIndex: 0 }, this._container); this._paneBottomR = Utils.createDomElement('div', { className: 'slick-pane slick-pane-bottom slick-pane-right', tabIndex: 0 }, this._container); if (this._options.createPreHeaderPanel) { this._preHeaderPanelScroller = Utils.createDomElement('div', { className: 'slick-preheader-panel ui-state-default slick-state-default', style: { overflow: 'hidden', position: 'relative' } }, this._paneHeaderL); this._preHeaderPanelScroller.appendChild(document.createElement('div')); this._preHeaderPanel = Utils.createDomElement('div', null, this._preHeaderPanelScroller); this._preHeaderPanelSpacer = Utils.createDomElement('div', { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } }, this._preHeaderPanelScroller); this._preHeaderPanelScrollerR = Utils.createDomElement('div', { className: 'slick-preheader-panel ui-state-default slick-state-default', style: { overflow: 'hidden', position: 'relative' } }, this._paneHeaderR); this._preHeaderPanelR = Utils.createDomElement('div', null, this._preHeaderPanelScrollerR); this._preHeaderPanelSpacerR = Utils.createDomElement('div', { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } }, this._preHeaderPanelScrollerR); if (!this._options.showPreHeaderPanel) { Utils.hide(this._preHeaderPanelScroller); Utils.hide(this._preHeaderPanelScrollerR); } } // Append the header scroller containers this._headerScrollerL = Utils.createDomElement('div', { className: 'slick-header ui-state-default slick-state-default slick-header-left' }, this._paneHeaderL); this._headerScrollerR = Utils.createDomElement('div', { className: 'slick-header ui-state-default slick-state-default slick-header-right' }, this._paneHeaderR); // Cache the header scroller containers this._headerScroller.push(this._headerScrollerL); this._headerScroller.push(this._headerScrollerR); // Append the columnn containers to the headers this._headerL = Utils.createDomElement('div', { className: 'slick-header-columns slick-header-columns-left', role: 'row', style: { left: '-1000px' } }, this._headerScrollerL); this._headerR = Utils.createDomElement('div', { className: 'slick-header-columns slick-header-columns-right', role: 'row', style: { left: '-1000px' } }, this._headerScrollerR); // Cache the header columns this._headers = [this._headerL, this._headerR]; this._headerRowScrollerL = Utils.createDomElement('div', { className: 'slick-headerrow ui-state-default slick-state-default' }, this._paneTopL); this._headerRowScrollerR = Utils.createDomElement('div', { className: 'slick-headerrow ui-state-default slick-state-default' }, this._paneTopR); this._headerRowScroller = [this._headerRowScrollerL, this._headerRowScrollerR]; this._headerRowSpacerL = Utils.createDomElement('div', { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } }, this._headerRowScrollerL); this._headerRowSpacerR = Utils.createDomElement('div', { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } }, this._headerRowScrollerR); this._headerRowL = Utils.createDomElement('div', { className: 'slick-headerrow-columns slick-headerrow-columns-left' }, this._headerRowScrollerL); this._headerRowR = Utils.createDomElement('div', { className: 'slick-headerrow-columns slick-headerrow-columns-right' }, this._headerRowScrollerR); this._headerRows = [this._headerRowL, this._headerRowR]; // Append the top panel scroller this._topPanelScrollerL = Utils.createDomElement('div', { className: 'slick-top-panel-scroller ui-state-default slick-state-default' }, this._paneTopL); this._topPanelScrollerR = Utils.createDomElement('div', { className: 'slick-top-panel-scroller ui-state-default slick-state-default' }, this._paneTopR); this._topPanelScrollers = [this._topPanelScrollerL, this._topPanelScrollerR]; // Append the top panel this._topPanelL = Utils.createDomElement('div', { className: 'slick-top-panel', style: { width: '10000px' } }, this._topPanelScrollerL); this._topPanelR = Utils.createDomElement('div', { className: 'slick-top-panel', style: { width: '10000px' } }, this._topPanelScrollerR); this._topPanels = [this._topPanelL, this._topPanelR]; if (!this._options.showColumnHeader) { this._headerScroller.forEach((el) => { Utils.hide(el); }); } if (!this._options.showTopPanel) { this._topPanelScrollers.forEach((scroller) => { Utils.hide(scroller); }); } if (!this._options.showHeaderRow) { this._headerRowScroller.forEach((scroller) => { Utils.hide(scroller); }); } // Append the viewport containers this._viewportTopL = Utils.createDomElement('div', { className: 'slick-viewport slick-viewport-top slick-viewport-left', tabIndex: 0 }, this._paneTopL); this._viewportTopR = Utils.createDomElement('div', { className: 'slick-viewport slick-viewport-top slick-viewport-right', tabIndex: 0 }, this._paneTopR); this._viewportBottomL = Utils.createDomElement('div', { className: 'slick-viewport slick-viewport-bottom slick-viewport-left', tabIndex: 0 }, this._paneBottomL); this._viewportBottomR = Utils.createDomElement('div', { className: 'slick-viewport slick-viewport-bottom slick-viewport-right', tabIndex: 0 }, this._paneBottomR); // Cache the viewports this._viewport = [this._viewportTopL, this._viewportTopR, this._viewportBottomL, this._viewportBottomR]; if (this._options.viewportClass) { this._viewport.forEach((view) => { view.classList.add(...Utils.classNameToList((this._options.viewportClass))); }); } // Default the active viewport to the top left this._activeViewportNode = this._viewportTopL; // Append the canvas containers this._canvasTopL = Utils.createDomElement('div', { className: 'grid-canvas grid-canvas-top grid-canvas-left', tabIndex: 0 }, this._viewportTopL); this._canvasTopR = Utils.createDomElement('div', { className: 'grid-canvas grid-canvas-top grid-canvas-right', tabIndex: 0 }, this._viewportTopR); this._canvasBottomL = Utils.createDomElement('div', { className: 'grid-canvas grid-canvas-bottom grid-canvas-left', tabIndex: 0 }, this._viewportBottomL); this._canvasBottomR = Utils.createDomElement('div', { className: 'grid-canvas grid-canvas-bottom grid-canvas-right', tabIndex: 0 }, this._viewportBottomR); // Cache the canvases this._canvas = [this._canvasTopL, this._canvasTopR, this._canvasBottomL, this._canvasBottomR]; this.scrollbarDimensions = this.scrollbarDimensions || this.measureScrollbar(); const canvasWithScrollbarWidth = this.getCanvasWidth() + this.scrollbarDimensions.width; // Default the active canvas to the top left this._activeCanvasNode = this._canvasTopL; // top-header if (this._topHeaderPanelSpacer) { Utils.width(this._topHeaderPanelSpacer, canvasWithScrollbarWidth); } // pre-header if (this._preHeaderPanelSpacer) { Utils.width(this._preHeaderPanelSpacer, canvasWithScrollbarWidth); } this._headers.forEach((el) => { Utils.width(el, this.getHeadersWidth()); }); Utils.width(this._headerRowSpacerL, canvasWithScrollbarWidth); Utils.width(this._headerRowSpacerR, canvasWithScrollbarWidth); // footer Row if (this._options.createFooterRow) { this._footerRowScrollerR = Utils.createDomElement('div', { className: 'slick-footerrow ui-state-default slick-state-default' }, this._paneTopR); this._footerRowScrollerL = Utils.createDomElement('div', { className: 'slick-footerrow ui-state-default slick-state-default' }, this._paneTopL); this._footerRowScroller = [this._footerRowScrollerL, this._footerRowScrollerR]; this._footerRowSpacerL = Utils.createDomElement('div', { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } }, this._footerRowScrollerL); Utils.width(this._footerRowSpacerL, canvasWithScrollbarWidth); this._footerRowSpacerR = Utils.createDomElement('div', { style: { display: 'block', height: '1px', position: 'absolute', top: '0px', left: '0px' } }, this._footerRowScrollerR); Utils.width(this._footerRowSpacerR, canvasWithScrollbarWidth); this._footerRowL = Utils.createDomElement('div', { className: 'slick-footerrow-columns slick-footerrow-columns-left' }, this._footerRowScrollerL); this._footerRowR = Utils.createDomElement('div', { className: 'slick-footerrow-columns slick-footerrow-columns-right' }, this._footerRowScrollerR); this._footerRow = [this._footerRowL, this._footerRowR]; if (!this._options.showFooterRow) { this._footerRowScroller.forEach((scroller) => { Utils.hide(scroller); }); } } this._focusSink2 = this._focusSink.cloneNode(true) as HTMLDivElement; this._container.appendChild(this._focusSink2); if (!this._options.explicitInitialization) { this.finishInitialization(); } } /** * Completes grid initialisation by calculating viewport dimensions, measuring cell padding and border differences, * disabling text selection (except on editable inputs), setting frozen options and pane visibility, * updating column caches, creating column headers and footers, setting up column sorting, * creating CSS rules, binding ancestor scroll events, and binding various event handlers * (e.g. for scrolling, mouse, keyboard, drag-and-drop). * It also starts up any asynchronous post–render processing if enabled. */ protected finishInitialization() { if (!this.initialized) { this.initialized = true; this.getViewportWidth(); this.getViewportHeight(); // header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?) // calculate the diff so we can set consistent sizes this.measureCellPaddingAndBorder(); this.disableSelection(this._headers); // disable all text selection in header (including input and textarea) if (!this._options.enableTextSelectionOnCells) { // disable text selection in grid cells except in input and textarea elements this._viewport.forEach((view) => { this._bindingEventService.bind(view, 'selectstart', (event) => { if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) { return; } event.preventDefault(); }); }); } this.setFrozenOptions(); this.setPaneFrozenClasses(); this.setPaneVisibility(); this.setScroller(); this.setOverflow(); this.updateColumnCaches(); this.createColumnHeaders(); this.createColumnFooter(); this.setupColumnSort(); this.createCssRules(); this.resizeCanvas(); this.bindAncestorScrollEvents(); this._bindingEventService.bind(this._container, 'resize', this.resizeCanvas.bind(this)); this._viewport.forEach((view) => { this._bindingEventService.bind(view, 'scroll', this.handleScroll.bind(this)); }); if (this._options.enableMouseWheelScrollHandler) { this._viewport.forEach((view) => { this.slickMouseWheelInstances.push(MouseWheel({ element: view, onMouseWheel: this.handleMouseWheel.bind(this) })); }); } this._headerScroller.forEach((el) => { this._bindingEventService.bind(el, 'contextmenu', this.handleHeaderContextMenu.bind(this) as EventListener); this._bindingEventService.bind(el, 'click', this.handleHeaderClick.bind(this) as EventListener); }); this._headerRowScroller.forEach((scroller) => { this._bindingEventService.bind(scroller, 'scroll', this.handleHeaderRowScroll.bind(this) as EventListener); }); if (this._options.createFooterRow) { this._footerRow.forEach((footer) => { this._bindingEventService.bind(footer, 'contextmenu', this.handleFooterContextMenu.bind(this) as EventListener); this._bindingEventService.bind(footer, 'click', this.handleFooterClick.bind(this) as EventListener); }); this._footerRowScroller.forEach((scroller) => { this._bindingEventService.bind(scroller, 'scroll', this.handleFooterRowScroll.bind(this) as EventListener); }); } if (this._options.createTopHeaderPanel) { this._bindingEventService.bind(this._topHeaderPanelScroller, 'scroll', this.handleTopHeaderPanelScroll.bind(this) as EventListener); } if (this._options.createPreHeaderPanel) { this._bindingEventService.bind(this._preHeaderPanelScroller, 'scroll', this.handlePreHeaderPanelScroll.bind(this) as EventListener); this._bindingEventService.bind(this._preHeaderPanelScroller, 'contextmenu', this.handlePreHeaderContextMenu.bind(this) as EventListener); this._bindingEventService.bind(this._preHeaderPanelScrollerR, 'contextmenu', this.handlePreHeaderContextMenu.bind(this) as EventListener); this._bindingEventService.bind(this._preHeaderPanelScroller, 'click', this.handlePreHeaderClick.bind(this) as EventListener); this._bindingEventService.bind(this._preHeaderPanelScrollerR, 'click', this.handlePreHeaderClick.bind(this) as EventListener); } this._bindingEventService.bind(this._focusSink, 'keydown', this.handleKeyDown.bind(this) as EventListener); this._bindingEventService.bind(this._focusSink2, 'keydown', this.handleKeyDown.bind(this) as EventListener); this._canvas.forEach((element) => { this._bindingEventService.bind(element, 'keydown', this.handleKeyDown.bind(this) as EventListener); this._bindingEventService.bind(element, 'click', this.handleClick.bind(this) as EventListener); this._bindingEventService.bind(element, 'dblclick', this.handleDblClick.bind(this) as EventListener); this._bindingEventService.bind(element, 'contextmenu', this.handleContextMenu.bind(this) as EventListener); this._bindingEventService.bind(element, 'mouseover', this.handleCellMouseOver.bind(this) as EventListener); this._bindingEventService.bind(element, 'mouseout', this.handleCellMouseOut.bind(this) as EventListener); }); if (Draggable) { this.slickDraggableInstance = Draggable({ containerElement: this._container, allowDragFrom: `div.slick-cell, div.${this.dragReplaceEl.cssClass}`, dragFromClassDetectArr: [{ tag: 'dragReplaceHandle', id: this.dragReplaceEl.id }], // the slick cell parent must always contain `.dnd` and/or `.cell-reorder` class to be identified as draggable allowDragFromClosest: 'div.slick-cell.dnd, div.slick-cell.cell-reorder', preventDragFromKeys: this._options.preventDragFromKeys, onDragInit: this.handleDragInit.bind(this), onDragStart: this.handleDragStart.bind(this), onDrag: this.handleDrag.bind(this), onDragEnd: this.handleDragEnd.bind(this) }); } if (!this._options.suppressCssChangesOnHiddenInit) { this.restoreCssFromHiddenInit(); } } } /** * Finds all container ancestors/parents (including the grid container itself) that are hidden (i.e. have display:none) * and temporarily applies visible CSS properties (absolute positioning, hidden visibility, block display) * so that dimensions can be measured correctly. * It stores the original CSS properties in an internal array for later restoration. * * Related to issue: https://github.com/6pac/SlickGrid/issues/568 */ cacheCssForHiddenInit() { this._hiddenParents = Utils.parents(this._container, ':hidden') as HTMLElement[]; this.oldProps = []; this._hiddenParents.forEach(el => { const old: Partial = {}; Object.keys(this.cssShow).forEach(name => { if (this.cssShow) { old[name as any] = el.style[name as 'position' | 'visibility' | 'display']; el.style[name as any] = this.cssShow[name as 'position' | 'visibility' | 'display']; } }); this.oldProps.push(old); }); } /** * Restores the original CSS properties for the container and its hidden * ancestors that were modified by cacheCssForHiddenInit. * This ensures that after initial measurements the DOM elements revert * to their original style settings. */ restoreCssFromHiddenInit() { // finish handle display:none on container or container parents // - put values back the way they were let i = 0; if (this._hiddenParents) { this._hiddenParents.forEach(el => { const old = this.oldProps[i++]; Object.keys(this.cssShow).forEach(name => { if (this.cssShow) { el.style[name as CSSStyleDeclarationWritable] = (old as any)[name]; } }); }); this._hiddenParents = []; } } /** * Registers an external plugin to the grid’s internal plugin list. * Once added, it immediately initialises the plugin by calling its init() * method with the grid instance. * @param {T} plugin - The plugin instance to be registered. */ registerPlugin(plugin: T) { this.plugins.unshift(plugin); plugin.init(this as unknown as SlickGridModel); } /** * Unregister (destroy) an external Plugin. * Searches for the specified plugin in the grid’s plugin list. * When found, it calls the plugin’s destroy() method and removes the plugin from the list, * thereby unregistering it from the grid. * @param {T} plugin - The plugin instance to be registered. */ unregisterPlugin(plugin: SlickPlugin) { for (let i = this.plugins.length; i >= 0; i--) { if (this.plugins[i] === plugin) { this.plugins[i]?.destroy(); this.plugins.splice(i, 1); break; } } } /** * Destroy (dispose) of SlickGrid * * Unbinds all event handlers, cancels any active cell edits, triggers the onBeforeDestroy event, * unregisters and destroys plugins, destroys sortable and other interaction instances, * unbinds ancestor scroll events, removes CSS rules, unbinds events from all key DOM elements * (canvas, viewports, header, footer, etc.), empties the grid container, removes the grid’s uid class, * and clears all timers. Optionally, if shouldDestroyAllElements is true, * calls destroyAllElements to nullify all DOM references. * * @param {boolean} shouldDestroyAllElements - do we want to destroy (nullify) all DOM elements as well? This help in avoiding mem leaks */ destroy(shouldDestroyAllElements?: boolean) { this._bindingEventService.unbindAll(); this.slickDraggableInstance = this.destroyAllInstances(this.slickDraggableInstance) as null; this.slickMouseWheelInstances = this.destroyAllInstances(this.slickMouseWheelInstances) as InteractionBase[]; this.slickResizableInstances = this.destroyAllInstances(this.slickResizableInstances) as InteractionBase[]; this.getEditorLock()?.cancelCurrentEdit(); this.trigger(this.onBeforeDestroy, {}); let i = this.plugins.length; while (i--) { this.unregisterPlugin(this.plugins[i]); } if (this._options.enableColumnReorder && typeof this.sortableSideLeftInstance?.destroy === 'function') { this.sortableSideLeftInstance?.destroy(); this.sortableSideRightInstance?.destroy(); } this.unbindAncestorScrollEvents(); this._bindingEventService.unbindByEventName(this._container, 'resize'); this.removeCssRules(); this._canvas.forEach((element) => { this._bindingEventService.unbindByEventName(element, 'keydown'); this._bindingEventService.unbindByEventName(element, 'click'); this._bindingEventService.unbindByEventName(element, 'dblclick'); this._bindingEventService.unbindByEventName(element, 'contextmenu'); this._bindingEventService.unbindByEventName(element, 'mouseover'); this._bindingEventService.unbindByEventName(element, 'mouseout'); }); this._viewport.forEach((view) => { this._bindingEventService.unbindByEventName(view, 'scroll'); }); this._headerScroller.forEach((el) => { this._bindingEventService.unbindByEventName(el, 'contextmenu'); this._bindingEventService.unbindByEventName(el, 'click'); }); this._headerRowScroller.forEach((scroller) => { this._bindingEventService.unbindByEventName(scroller, 'scroll'); }); if (this._footerRow) { this._footerRow.forEach((footer) => { this._bindingEventService.unbindByEventName(footer, 'contextmenu'); this._bindingEventService.unbindByEventName(footer, 'click'); }); } if (this._footerRowScroller) { this._footerRowScroller.forEach((scroller) => { this._bindingEventService.unbindByEventName(scroller, 'scroll'); }); } if (this._preHeaderPanelScroller) { this._bindingEventService.unbindByEventName(this._preHeaderPanelScroller, 'scroll'); } if (this._topHeaderPanelScroller) { this._bindingEventService.unbindByEventName(this._topHeaderPanelScroller, 'scroll'); } this._bindingEventService.unbindByEventName(this._focusSink, 'keydown'); this._bindingEventService.unbindByEventName(this._focusSink2, 'keydown'); const resizeHandles = this._container.querySelectorAll('.slick-resizable-handle'); [].forEach.call(resizeHandles, (handle) => { this._bindingEventService.unbindByEventName(handle, 'dblclick'); }); const headerColumns = this._container.querySelectorAll('.slick-header-column'); [].forEach.call(headerColumns, (column) => { this._bindingEventService.unbindByEventName(column, 'mouseenter'); this._bindingEventService.unbindByEventName(column, 'mouseleave'); this._bindingEventService.unbindByEventName(column, 'mouseenter'); this._bindingEventService.unbindByEventName(column, 'mouseleave'); }); Utils.emptyElement(this._container); this._container.classList.remove(this.uid); this.clearAllTimers(); if (shouldDestroyAllElements) { this.destroyAllElements(); } } /** * Call destroy method, when exists, on all the instance(s) it found * * Given either a single instance or an array of instances (e.g. draggable, mousewheel, resizable), * pops each one and calls its destroy method if available, then resets the input to an empty array * (or null for a single instance). Returns the reset value. * * @params instances - can be a single instance or a an array of instances */ protected destroyAllInstances(inputInstances: null | InteractionBase | Array) { if (inputInstances) { const instances = Array.isArray(inputInstances) ? inputInstances : [inputInstances]; let instance: InteractionBase | undefined; while (Utils.isDefined(instance = instances.pop())) { if (instance && typeof instance.destroy === 'function') { instance.destroy(); } } } // reset instance(s) inputInstances = (Array.isArray(inputInstances) ? [] : null); return inputInstances; } /** * Sets all internal references to DOM elements * (e.g. canvas containers, headers, viewports, focus sinks, etc.) * to null so that they can be garbage collected. */ protected destroyAllElements() { this._activeCanvasNode = null as any; this._activeViewportNode = null as any; this._boundAncestors = null as any; this._canvas = null as any; this._canvasTopL = null as any; this._canvasTopR = null as any; this._canvasBottomL = null as any; this._canvasBottomR = null as any; this._container = null as any; this._focusSink = null as any; this._focusSink2 = null as any; this._groupHeaders = null as any; this._groupHeadersL = null as any; this._groupHeadersR = null as any; this._headerL = null as any; this._headerR = null as any; this._headers = null as any; this._headerRows = null as any; this._headerRowL = null as any; this._headerRowR = null as any; this._headerRowSpacerL = null as any; this._headerRowSpacerR = null as any; this._headerRowScrollContainer = null as any; this._headerRowScroller = null as any; this._headerRowScrollerL = null as any; this._headerRowScrollerR = null as any; this._headerScrollContainer = null as any; this._headerScroller = null as any; this._headerScrollerL = null as any; this._headerScrollerR = null as any; this._hiddenParents = null as any; this._footerRow = null as any; this._footerRowL = null as any; this._footerRowR = null as any; this._footerRowSpacerL = null as any; this._footerRowSpacerR = null as any; this._footerRowScroller = null as any; this._footerRowScrollerL = null as any; this._footerRowScrollerR = null as any; this._footerRowScrollContainer = null as any; this._preHeaderPanel = null as any; this._preHeaderPanelR = null as any; this._preHeaderPanelScroller = null as any; this._preHeaderPanelScrollerR = null as any; this._preHeaderPanelSpacer = null as any; this._preHeaderPanelSpacerR = null as any; this._topPanels = null as any; this._topPanelScrollers = null as any; this._style = null as any; this._topPanelScrollerL = null as any; this._topPanelScrollerR = null as any; this._topPanelL = null as any; this._topPanelR = null as any; this._paneHeaderL = null as any; this._paneHeaderR = null as any; this._paneTopL = null as any; this._paneTopR = null as any; this._paneBottomL = null as any; this._paneBottomR = null as any; this._viewport = null as any; this._viewportTopL = null as any; this._viewportTopR = null as any; this._viewportBottomL = null as any; this._viewportBottomR = null as any; this._viewportScrollContainerX = null as any; this._viewportScrollContainerY = null as any; } /** Returns an object containing all of the Grid options set on the grid. See a list of Grid Options here. */ getOptions(): O { return this._options; } /** * Get the Column ID of the currently frozen column or `null` when not frozen * @returns {String|Number|null} Frozen Column ID */ getFrozenColumnId(): string | number | null { const frozenColIndex = this.getFrozenColumnIdx(); if (frozenColIndex >= 0 && this.columns[frozenColIndex]) { return this.columns[frozenColIndex].id; } return null; } protected getFrozenColumnIdx(): number { return this._options.frozenColumn ?? -1; } /** * Extends grid options with a given hash. If an there is an active edit, the grid will attempt to commit the changes and only continue if the attempt succeeds. * @param {Object} options - an object with configuration options. * @param {Boolean} [suppressRender] - do we want to supress the grid re-rendering? (defaults to false) * @param {Boolean} [suppressColumnSet] - do we want to supress the columns set, via "setColumns()" method? (defaults to false) * @param {Boolean} [suppressSetOverflow] - do we want to suppress the call to `setOverflow` */ setOptions(newOptions: Partial, suppressRender?: boolean, suppressColumnSet?: boolean, suppressSetOverflow?: boolean): void { this.prepareForOptionsChange(); if (this._options.enableAddRow !== newOptions.enableAddRow) { this.invalidateRow(this.getDataLength()); } // before applying column freeze, we need our viewports to be scrolled back to left to avoid misaligned column headers if (newOptions.frozenColumn !== undefined && newOptions.frozenColumn >= 0) { this._prevFrozenColumnIdx = this.getFrozenColumnIdx(); // keep ref of previous frozen column for later usage // make sure the freeze is also valid without breaking the UI (e.g. we can't freeze columns on left canvas wider than visible canvas width in the browser) if (!suppressColumnSet) { this._invalidfrozenAlerted = false; // reset frozen alert } if (this.validateColumnFreezeWidth(newOptions.frozenColumn)) { this.getViewports().forEach((vp) => (vp.scrollLeft = 0)); this.handleScroll(); // trigger scroll to realign column headers as well } else { newOptions.frozenColumn = this._prevFrozenColumnIdx < newOptions.frozenColumn ? this._prevFrozenColumnIdx : -1; } } const originalOptions = Utils.extend(true, {}, this._options); this._options = Utils.extend(this._options, newOptions); this.trigger(this.onSetOptions, { optionsBefore: originalOptions, optionsAfter: this._options }); this.internal_setOptions(suppressRender, suppressColumnSet, suppressSetOverflow); } /** * If option.mixinDefaults is true then external code maintains a reference to the options object. In this case there is no need * to call setOptions() - changes can be made directly to the object. However setOptions() also performs some recalibration of the * grid in reaction to changed options. activateChangedOptions call the same recalibration routines as setOptions() would have. * @param {Boolean} [suppressRender] - do we want to supress the grid re-rendering? (defaults to false) * @param {Boolean} [suppressColumnSet] - do we want to supress the columns set, via "setColumns()" method? (defaults to false) * @param {Boolean} [suppressSetOverflow] - do we want to suppress the call to `setOverflow` */ activateChangedOptions(suppressRender?: boolean, suppressColumnSet?: boolean, suppressSetOverflow?: boolean): void { this.prepareForOptionsChange(); this.invalidateRow(this.getDataLength()); this.trigger(this.onActivateChangedOptions, { options: this._options }); this.internal_setOptions(suppressRender, suppressColumnSet, suppressSetOverflow); } /** * Attempts to commit any active cell edit via the editor lock; if successful, calls makeActiveCellNormal to exit edit mode. * * @returns {void} - Does not return a value. */ protected prepareForOptionsChange() { if (!this.getEditorLock().commitCurrentEdit()) { return; } this.makeActiveCellNormal(); } /** * Depending on new options, sets column header visibility, validates options, sets frozen options, * forces viewport height recalculation if needed, updates viewport overflow, re-renders the grid (unless suppressed), * sets the scroller elements, and reinitialises mouse wheel scrolling as needed. * * @param {boolean} [suppressRender] - If `true`, prevents the grid from re-rendering. * @param {boolean} [suppressColumnSet] - If `true`, prevents the columns from being reset. * @param {boolean} [suppressSetOverflow] - If `true`, prevents updating the viewport overflow setting. */ protected internal_setOptions(suppressRender?: boolean, suppressColumnSet?: boolean, suppressSetOverflow?: boolean): void { if (this._options.showColumnHeader !== undefined) { this.setColumnHeaderVisibility(this._options.showColumnHeader); } this.validateAndEnforceOptions(); this.setFrozenOptions(); // when user changed frozen row option, we need to force a recalculation of each viewport heights if (this._options.frozenBottom !== undefined) { this.enforceFrozenRowHeightRecalc = true; } this._viewport.forEach((view) => { view.style.overflowY = this._options.autoHeight ? 'hidden' : 'auto'; }); if (!suppressRender) { this.render(); } this.setScroller(); if (!suppressSetOverflow) { this.setOverflow(); } if (!suppressColumnSet) { this.setColumns(this.columns); } if (this._options.enableMouseWheelScrollHandler && this._viewport && (!this.slickMouseWheelInstances || this.slickMouseWheelInstances.length === 0)) { this._viewport.forEach((view) => { this.slickMouseWheelInstances.push(MouseWheel({ element: view, onMouseWheel: this.handleMouseWheel.bind(this) })); }); } else if (this._options.enableMouseWheelScrollHandler === false) { this.destroyAllInstances(this.slickMouseWheelInstances); // remove scroll handler when option is disable } } /** * * Ensures consistency in option setting, by thastIF autoHeight IS enabled, leaveSpaceForNewRows is set to FALSE. * And, if forceFitColumns is True, then autosizeColsMode is set to LegacyForceFit. */ validateAndEnforceOptions(): void { if (this._options.autoHeight) { this._options.leaveSpaceForNewRows = false; } if (this._options.forceFitColumns) { this._options.autosizeColsMode = GridAutosizeColsMode.LegacyForceFit; } // make sure the freeze is also valid without breaking the UI (e.g. we can't left freeze columns wider than visible left canvas width) if (!this.validateColumnFreezeWidth(this._options.frozenColumn)) { this._options.frozenColumn = this._prevFrozenColumnIdx < this._options.frozenColumn! ? this._prevFrozenColumnIdx : -1; } } /** * Unregisters a current selection model and registers a new one. See the definition of SelectionModel for more information. * @param {Object} selectionModel A SelectionModel. */ setSelectionModel(model: SelectionModel) { if (this.selectionModel) { this.selectionModel.onSelectedRangesChanged.unsubscribe(this.handleSelectedRangesChanged.bind(this)); this.selectionModel.destroy?.(); } this.selectionModel = model; if (this.selectionModel) { this.selectionModel.init(this as unknown as SlickGridModel); this.selectionModel.onSelectedRangesChanged.subscribe(this.handleSelectedRangesChanged.bind(this)); } } /** Returns the current SelectionModel. See here for more information about SelectionModels. */ getSelectionModel() { return this.selectionModel; } /** add/remove frozen class to left headers/footer when defined */ protected setPaneFrozenClasses(): void { const classAction = this.hasFrozenColumns() ? 'add' : 'remove'; for (const elm of [this._paneHeaderL, this._paneTopL, this._paneBottomL]) { elm.classList[classAction]('frozen'); } } ////////////////////////////////////////////////////////////////////// // End Grid and DOM Initialisation ////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// // Column Management, Headers and Footers ////////////////////////////////////////////////////////////////////// // Returns a boolean indicating whether the grid is configured with frozen columns. protected hasFrozenColumns() { return this._options.frozenColumn! > -1; } /** * Updates an existing column definition and a corresponding header DOM element with the new title and tooltip. * @param {Number|String} columnId Column id. * @param {string | HTMLElement | DocumentFragment} [title] New column name. * @param {String} [toolTip] New column tooltip. */ updateColumnHeader(columnId: number | string, title?: string | HTMLElement | DocumentFragment, toolTip?: string) { if (this.initialized) { const idx = this.getColumnIndex(columnId); if (!Utils.isDefined(idx)) { return; } const columnDef = this.columns[idx]; const header: HTMLElement | undefined = this.getColumnByIndex(idx); if (header) { if (title !== undefined) { this.columns[idx].name = title; } if (toolTip !== undefined) { this.columns[idx].toolTip = toolTip; } this.trigger(this.onBeforeHeaderCellDestroy, { node: header, column: columnDef, grid: this }); header.setAttribute('title', toolTip || ''); if (title !== undefined) { this.applyHtmlCode(header.children[0] as HTMLElement, title); } this.trigger(this.onHeaderCellRendered, { node: header, column: columnDef, grid: this }); } } } /** * Get the Header DOM element * @param {C} columnDef - column definition */ getHeader(columnDef: C) { if (!columnDef) { return this.hasFrozenColumns() ? this._headers : this._headerL; } const idx = this.getColumnIndex(columnDef.id); return this.hasFrozenColumns() ? ((idx <= this._options.frozenColumn!) ? this._headerL : this._headerR) : this._headerL; } /** * Get a specific Header Column DOM element by its column Id or index * @param {Number|String} columnIdOrIdx - column Id or index */ getHeaderColumn(columnIdOrIdx: number | string) { const idx = (typeof columnIdOrIdx === 'number' ? columnIdOrIdx : this.getColumnIndex(columnIdOrIdx)); const targetHeader = this.hasFrozenColumns() ? ((idx <= this._options.frozenColumn!) ? this._headerL : this._headerR) : this._headerL; const targetIndex = this.hasFrozenColumns() ? ((idx <= this._options.frozenColumn!) ? idx : idx - this._options.frozenColumn! - 1) : idx; return targetHeader.children[targetIndex] as HTMLDivElement; } /** Get the Header Row DOM element */ getHeaderRow() { return this.hasFrozenColumns() ? this._headerRows : this._headerRows[0]; } /** Get the Footer DOM element */ getFooterRow() { return this.hasFrozenColumns() ? this._footerRow : this._footerRow[0]; } /** * Get Header Row Column DOM element by its column Id or index * @param {Number|String} columnIdOrIdx - column Id or index */ getHeaderRowColumn(columnIdOrIdx: number | string) { let idx = (typeof columnIdOrIdx === 'number' ? columnIdOrIdx : this.getColumnIndex(columnIdOrIdx)); let headerRowTarget: HTMLDivElement; if (this.hasFrozenColumns()) { if (idx <= this._options.frozenColumn!) { headerRowTarget = this._headerRowL; } else { headerRowTarget = this._headerRowR; idx -= this._options.frozenColumn! + 1; } } else { headerRowTarget = this._headerRowL; } return headerRowTarget.children[idx] as HTMLDivElement; } /** * Get the Footer Row Column DOM element by its column Id or index * @param {Number|String} columnIdOrIdx - column Id or index */ getFooterRowColumn(columnIdOrIdx: number | string) { let idx = (typeof columnIdOrIdx === 'number' ? columnIdOrIdx : this.getColumnIndex(columnIdOrIdx)); let footerRowTarget: HTMLDivElement; if (this.hasFrozenColumns()) { if (idx <= this._options.frozenColumn!) { footerRowTarget = this._footerRowL; } else { footerRowTarget = this._footerRowR; idx -= this._options.frozenColumn! + 1; } } else { footerRowTarget = this._footerRowL; } return footerRowTarget.children[idx] as HTMLDivElement; } /** * If footer rows are enabled, clears existing footer cells then iterates over all columns. * For each visible column, it creates a footer cell element (adding “frozen” classes if needed), * stores the column definition in the element’s storage, and triggers the onFooterRowCellRendered event. */ protected createColumnFooter() { if (this._options.createFooterRow) { this._footerRow.forEach((footer) => { const columnElements = footer.querySelectorAll('.slick-footerrow-column'); columnElements.forEach((column) => { const columnDef = Utils.storage.get(column, 'column'); this.trigger(this.onBeforeFooterRowCellDestroy, { node: column, column: columnDef, grid: this }); }); }); Utils.emptyElement(this._footerRowL); Utils.emptyElement(this._footerRowR); for (let i = 0; i < this.columns.length; i++) { const m = this.columns[i]; if (!m || m.hidden) { continue; } const footerRowCell = Utils.createDomElement('div', { className: `ui-state-default slick-state-default slick-footerrow-column l${i} r${i}` }, this.hasFrozenColumns() && (i > this._options.frozenColumn!) ? this._footerRowR : this._footerRowL); const className = this.hasFrozenColumns() && i <= this._options.frozenColumn! ? 'frozen' : null; if (className) { footerRowCell.classList.add(className); } Utils.storage.put(footerRowCell, 'column', m); this.trigger(this.onFooterRowCellRendered, { node: footerRowCell, column: m, grid: this }); } } } /** * For each header container, binds a click event that— * if the clicked header is sortable and no column resizing is in progress— * --> toggles the sort direction (or adds/removes the column in a multi–column sort), * --> triggers onBeforeSort * --> and if not cancelled, updates the sort columns and triggers onSort. */ protected setupColumnSort() { this._headers.forEach((header) => { this._bindingEventService.bind(header, 'click', (e: any) => { if (this.columnResizeDragging) { return; } if (e.target.classList.contains('slick-resizable-handle')) { return; } const coll = e.target.closest('.slick-header-column'); if (!coll) { return; } const column = Utils.storage.get(coll, 'column'); if (column.sortable) { if (!this.getEditorLock()?.commitCurrentEdit()) { return; } const previousSortColumns = this.sortColumns.slice(); let sortColumn: ColumnSort | null = null; let i = 0; for (; i < this.sortColumns.length; i++) { if (this.sortColumns[i].columnId === column.id) { sortColumn = this.sortColumns[i]; sortColumn.sortAsc = !sortColumn.sortAsc; break; } } const hadSortCol = !!sortColumn; if (this._options.tristateMultiColumnSort) { if (!sortColumn) { sortColumn = { columnId: column.id, sortAsc: column.defaultSortAsc, sortCol: column }; } if (hadSortCol && sortColumn.sortAsc) { // three state: remove sort rather than go back to ASC this.sortColumns.splice(i, 1); sortColumn = null; } if (!this._options.multiColumnSort) { this.sortColumns = []; } if (sortColumn && (!hadSortCol || !this._options.multiColumnSort)) { this.sortColumns.push(sortColumn); } } else { // legacy behaviour if (e.metaKey && this._options.multiColumnSort) { if (sortColumn) { this.sortColumns.splice(i, 1); } } else { if ((!e.shiftKey && !e.metaKey) || !this._options.multiColumnSort) { this.sortColumns = []; } if (!sortColumn) { sortColumn = { columnId: column.id, sortAsc: column.defaultSortAsc, sortCol: column }; this.sortColumns.push(sortColumn); } else if (this.sortColumns.length === 0) { this.sortColumns.push(sortColumn); } } } let onSortArgs; if (!this._options.multiColumnSort) { onSortArgs = { multiColumnSort: false, previousSortColumns, columnId: (this.sortColumns.length > 0 ? column.id : null), sortCol: (this.sortColumns.length > 0 ? column : null), sortAsc: (this.sortColumns.length > 0 ? this.sortColumns[0].sortAsc : true) }; } else { onSortArgs = { multiColumnSort: true, previousSortColumns, sortCols: this.sortColumns.map((col) => { const tempCol = this.columns[this.getColumnIndex(col.columnId)]; return !tempCol || tempCol.hidden ? null : { columnId: tempCol.id, sortCol: tempCol, sortAsc: col.sortAsc }; }).filter((el) => el) }; } if (this.trigger(this.onBeforeSort, onSortArgs, e).getReturnValue() !== false) { this.setSortColumns(this.sortColumns); this.trigger(this.onSort, onSortArgs, e); } } }); }); } /** * Clears any existing header cells and header row cells, recalculates header widths, * then iterates over each visible column to create header cell elements * (and header row cells if enabled) with appropriate content, CSS classes, event bindings, * and sort indicator elements. Also triggers before–destroy and rendered events as needed. */ protected createColumnHeaders() { this._headers.forEach((header) => { const columnElements = header.querySelectorAll('.slick-header-column'); columnElements.forEach((column) => { const columnDef = Utils.storage.get(column, 'column'); if (columnDef) { this.trigger(this.onBeforeHeaderCellDestroy, { node: column, column: columnDef, grid: this }); } }); }); Utils.emptyElement(this._headerL); Utils.emptyElement(this._headerR); this.getHeadersWidth(); Utils.width(this._headerL, this.headersWidthL); Utils.width(this._headerR, this.headersWidthR); this._headerRows.forEach((row) => { const columnElements = row.querySelectorAll('.slick-headerrow-column'); columnElements.forEach((column) => { const columnDef = Utils.storage.get(column, 'column'); if (columnDef) { this.trigger(this.onBeforeHeaderRowCellDestroy, { node: this, column: columnDef, grid: this }); } }); }); Utils.emptyElement(this._headerRowL); Utils.emptyElement(this._headerRowR); if (this._options.createFooterRow) { const footerRowLColumnElements = this._footerRowL.querySelectorAll('.slick-footerrow-column'); footerRowLColumnElements.forEach((column) => { const columnDef = Utils.storage.get(column, 'column'); if (columnDef) { this.trigger(this.onBeforeFooterRowCellDestroy, { node: this, column: columnDef, grid: this }); } }); Utils.emptyElement(this._footerRowL); if (this.hasFrozenColumns()) { const footerRowRColumnElements = this._footerRowR.querySelectorAll('.slick-footerrow-column'); footerRowRColumnElements.forEach((column) => { const columnDef = Utils.storage.get(column, 'column'); if (columnDef) { this.trigger(this.onBeforeFooterRowCellDestroy, { node: this, column: columnDef, grid: this }); } }); Utils.emptyElement(this._footerRowR); } } for (let i = 0; i < this.columns.length; i++) { const m: C = this.columns[i]; if (m.hidden) { continue; } const headerTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._headerL : this._headerR) : this._headerL; const headerRowTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._headerRowL : this._headerRowR) : this._headerRowL; const header = Utils.createDomElement('div', { id: `${this.uid + m.id}`, dataset: { id: String(m.id) }, role: 'columnheader', className: 'ui-state-default slick-state-default slick-header-column' }, headerTarget); if (m.toolTip) { header.title = m.toolTip; } if (!m.reorderable) { header.classList.add(this._options.unorderableColumnCssClass!); } const colNameElm = Utils.createDomElement('span', { className: 'slick-column-name' }, header); this.applyHtmlCode(colNameElm, m.name as string); Utils.width(header, m.width! - this.headerColumnWidthDiff); let classname = m.headerCssClass || null; if (classname) { header.classList.add(...Utils.classNameToList(classname)); } classname = this.hasFrozenColumns() && i <= this._options.frozenColumn! ? 'frozen' : null; if (classname) { header.classList.add(classname); } this._bindingEventService.bind(header, 'mouseenter', this.handleHeaderMouseEnter.bind(this) as EventListener); this._bindingEventService.bind(header, 'mouseleave', this.handleHeaderMouseLeave.bind(this) as EventListener); Utils.storage.put(header, 'column', m); if (this._options.enableColumnReorder || m.sortable) { this._bindingEventService.bind(header, 'mouseenter', this.handleHeaderMouseHoverOn.bind(this) as EventListener); this._bindingEventService.bind(header, 'mouseleave', this.handleHeaderMouseHoverOff.bind(this) as EventListener); } if (m.hasOwnProperty('headerCellAttrs') && m.headerCellAttrs instanceof Object) { Object.keys(m.headerCellAttrs).forEach(key => { if (m.headerCellAttrs.hasOwnProperty(key)) { header.setAttribute(key, m.headerCellAttrs[key]); } }); } if (m.sortable) { header.classList.add('slick-header-sortable'); Utils.createDomElement('div', { className: `slick-sort-indicator ${this._options.numberedMultiColumnSort && !this._options.sortColNumberInSeparateSpan ? ' slick-sort-indicator-numbered' : ''}` }, header); if (this._options.numberedMultiColumnSort && this._options.sortColNumberInSeparateSpan) { Utils.createDomElement('div', { className: 'slick-sort-indicator-numbered' }, header); } } this.trigger(this.onHeaderCellRendered, { node: header, column: m, grid: this }); if (this._options.showHeaderRow) { const headerRowCell = Utils.createDomElement('div', { className: `ui-state-default slick-state-default slick-headerrow-column l${i} r${i}` }, headerRowTarget); const frozenClasses = this.hasFrozenColumns() && i <= this._options.frozenColumn! ? 'frozen' : null; if (frozenClasses) { headerRowCell.classList.add(frozenClasses); } this._bindingEventService.bind(headerRowCell, 'mouseenter', this.handleHeaderRowMouseEnter.bind(this) as EventListener); this._bindingEventService.bind(headerRowCell, 'mouseleave', this.handleHeaderRowMouseLeave.bind(this) as EventListener); Utils.storage.put(headerRowCell, 'column', m); this.trigger(this.onHeaderRowCellRendered, { node: headerRowCell, column: m, grid: this }); } if (this._options.createFooterRow && this._options.showFooterRow) { const footerRowTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._footerRow[0] : this._footerRow[1]) : this._footerRow[0]; const footerRowCell = Utils.createDomElement('div', { className: `ui-state-default slick-state-default slick-footerrow-column l${i} r${i}` }, footerRowTarget); Utils.storage.put(footerRowCell, 'column', m); this.trigger(this.onFooterRowCellRendered, { node: footerRowCell, column: m, grid: this }); } } this.setSortColumns(this.sortColumns); this.setupColumnResize(); if (this._options.enableColumnReorder) { if (typeof this._options.enableColumnReorder === 'function') { this._options.enableColumnReorder(this as unknown as SlickGridModel, this._headers, this.headerColumnWidthDiff, this.setColumns as any, this.setupColumnResize, this.columns, this.getColumnIndex, this.uid, this.trigger); } else { this.setupColumnReorder(); } } } /** * Destroys any existing sortable instances and creates new ones on the left and right header * containers using the Sortable library. Configures options including animation, * drag handle selectors, auto-scroll, and callbacks (onStart, onEnd) that * update the column order, set columns, trigger onColumnsReordered, and reapply column resizing. */ protected setupColumnReorder() { this.sortableSideLeftInstance?.destroy(); this.sortableSideRightInstance?.destroy(); let columnScrollTimer: any = null; const scrollColumnsRight = () => this._viewportScrollContainerX.scrollLeft = this._viewportScrollContainerX.scrollLeft + 10; const scrollColumnsLeft = () => this._viewportScrollContainerX.scrollLeft = this._viewportScrollContainerX.scrollLeft - 10; let prevColumnIds: Array = []; let canDragScroll = false; const sortableOptions = { animation: 50, direction: 'horizontal', chosenClass: 'slick-header-column-active', ghostClass: 'slick-sortable-placeholder', draggable: '.slick-header-column', dragoverBubble: false, preventOnFilter: false, // allow column to be resized even when they are not orderable revertClone: true, scroll: !this.hasFrozenColumns(), // enable auto-scroll // lock unorderable columns by using a combo of filter + onMove filter: `.${this._options.unorderableColumnCssClass}`, onMove: (event: MouseEvent & { related: HTMLElement; }) => { return !event.related.classList.contains(this._options.unorderableColumnCssClass as string); }, onStart: (e: SortableEvent) => { e.item.classList.add('slick-header-column-active'); canDragScroll = !this.hasFrozenColumns() || Utils.offset(e.item)!.left > Utils.offset(this._viewportScrollContainerX)!.left; if (canDragScroll && e.originalEvent.pageX > this._container.clientWidth) { if (!(columnScrollTimer)) { columnScrollTimer = window.setInterval(scrollColumnsRight, 100); } } else if (canDragScroll && e.originalEvent.pageX < Utils.offset(this._viewportScrollContainerX)!.left) { if (!(columnScrollTimer)) { columnScrollTimer = window.setInterval(scrollColumnsLeft, 100); } } else { window.clearInterval(columnScrollTimer); columnScrollTimer = null; } prevColumnIds = this.columns.map((c) => c.id); }, onEnd: (e: SortableEvent) => { e.item.classList.remove('slick-header-column-active'); clearInterval(columnScrollTimer); const prevScrollLeft = this.scrollLeft; if (!this.getEditorLock()?.commitCurrentEdit()) { return; } let reorderedIds = this.sortableSideLeftInstance?.toArray() ?? []; reorderedIds = reorderedIds.concat(this.sortableSideRightInstance?.toArray() ?? []); const reorderedColumns: C[] = []; for (let i = 0; i < reorderedIds.length; i++) { reorderedColumns.push(this.columns[this.getColumnIndex(reorderedIds[i])]); } e.stopPropagation(); if (!this.arrayEquals(prevColumnIds, reorderedIds)) { this.setColumns(reorderedColumns); // reapply previous scroll position since it might move back to x=0 after calling `setColumns()` (especially when `frozenColumn` is set) this.scrollToX(prevScrollLeft); this.trigger(this.onColumnsReordered, { impactedColumns: this.columns, previousColumnOrder: prevColumnIds }); this.setupColumnResize(); } if (this.activeCellNode) { this.setFocus(); // refocus on active cell } }, } as SortableOptions; this.sortableSideLeftInstance = Sortable.create(this._headerL, sortableOptions); this.sortableSideRightInstance = Sortable.create(this._headerR, sortableOptions); } /** * Returns a concatenated array containing the children (header column elements) from both the left and right header containers. * @returns {HTMLElement[]} - An array of header column elements. */ protected getHeaderChildren() { const a = Array.from(this._headers[0].children); const b = Array.from(this._headers[1].children); return a.concat(b) as HTMLElement[]; } /** * When a resizable handle is double–clicked, extracts the column identifier from the parent element’s id * (by removing the grid uid) and triggers the onColumnsResizeDblClick event with that identifier. * @param {MouseEvent & { target: HTMLDivElement }} evt - The double-click event on the resizable handle. */ protected handleResizeableDoubleClick(evt: MouseEvent & { target: HTMLDivElement; }) { const triggeredByColumn = evt.target.parentElement!.id.replace(this.uid, ''); this.trigger(this.onColumnsResizeDblClick, { triggeredByColumn }); } /** * Ensures the Resizable module is available and then iterates over header children to remove * any existing resizable handles. Determines which columns are resizable (tracking the first * and last resizable columns) and for each eligible column, creates a resizable handle, * binds a double–click event, and creates a Resizable instance with callbacks for onResizeStart, * onResize, and onResizeEnd. These callbacks manage column width adjustments (including force–fit * and frozen column considerations), update header and canvas widths, trigger related events, * and re–render the grid as needed. * @returns {void} */ protected setupColumnResize() { if (typeof Resizable === 'undefined') { throw new Error(`Slick.Resizable is undefined, make sure to import "slick.interactions.js"`); } let j: number; let k: number; let c: C; let pageX: number; let minPageX: number; let maxPageX: number; let firstResizable: number | undefined; let lastResizable = -1; let frozenLeftColMaxWidth = 0; const children: HTMLElement[] = this.getHeaderChildren(); const vc = this.getVisibleColumns(); for (let i = 0; i < children.length; i++) { const child = children[i]; const handles = child.querySelectorAll('.slick-resizable-handle'); handles.forEach((handle) => handle.remove()); if (i >= vc.length || !vc[i]) { continue; } if (vc[i].resizable) { if (firstResizable === undefined) { firstResizable = i; } lastResizable = i; } } if (firstResizable === undefined) { return; } for (let i = 0; i < children.length; i++) { const colElm = children[i]; if (i >= vc.length || !vc[i]) { continue; } if (i < firstResizable || (this._options.forceFitColumns && i >= lastResizable)) { continue; } const resizeableHandle = Utils.createDomElement('div', { className: 'slick-resizable-handle', role: 'separator', ariaOrientation: 'horizontal' }, colElm); this._bindingEventService.bind(resizeableHandle, 'dblclick', this.handleResizeableDoubleClick.bind(this) as EventListener); this.slickResizableInstances.push( Resizable({ resizeableElement: colElm as HTMLElement, resizeableHandleElement: resizeableHandle, onResizeStart: (e, resizeElms): boolean | void => { const targetEvent = (e as TouchEvent).touches ? (e as TouchEvent).changedTouches[0] : e; if (!this.getEditorLock()?.commitCurrentEdit()) { return false; } pageX = (targetEvent as MouseEvent).pageX; frozenLeftColMaxWidth = 0; resizeElms.resizeableElement.classList.add('slick-header-column-active'); let shrinkLeewayOnRight: number | null = null; let stretchLeewayOnRight: number | null = null; // lock each column's width option to current width for (let pw = 0; pw < children.length; pw++) { if (pw >= vc.length || !vc[pw]) { continue; } vc[pw].previousWidth = children[pw].offsetWidth; } if (this._options.forceFitColumns) { shrinkLeewayOnRight = 0; stretchLeewayOnRight = 0; // colums on right affect maxPageX/minPageX for (j = i + 1; j < vc.length; j++) { c = vc[j]; if (c?.resizable) { if (stretchLeewayOnRight !== null) { if (c.maxWidth) { stretchLeewayOnRight += c.maxWidth - (c.previousWidth || 0); } else { stretchLeewayOnRight = null; } } shrinkLeewayOnRight += (c.previousWidth || 0) - Math.max(c.minWidth || 0, this.absoluteColumnMinWidth); } } } let shrinkLeewayOnLeft = 0; let stretchLeewayOnLeft: number | null = 0; for (j = 0; j <= i; j++) { // columns on left only affect minPageX c = vc[j]; if (c?.resizable) { if (stretchLeewayOnLeft !== null) { if (c.maxWidth) { stretchLeewayOnLeft += c.maxWidth - (c.previousWidth || 0); } else { stretchLeewayOnLeft = null; } } shrinkLeewayOnLeft += (c.previousWidth || 0) - Math.max(c.minWidth || 0, this.absoluteColumnMinWidth); } } if (shrinkLeewayOnRight === null) { shrinkLeewayOnRight = 100000; } if (shrinkLeewayOnLeft === null) { shrinkLeewayOnLeft = 100000; } if (stretchLeewayOnRight === null) { stretchLeewayOnRight = 100000; } if (stretchLeewayOnLeft === null) { stretchLeewayOnLeft = 100000; } maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft); minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight); }, onResize: (e, resizeElms) => { const targetEvent = (e as TouchEvent).touches ? (e as TouchEvent).changedTouches[0] : e; this.columnResizeDragging = true; let actualMinWidth; const d = Math.min(maxPageX, Math.max(minPageX, (targetEvent as MouseEvent).pageX)) - pageX; let x; let newCanvasWidthL = 0; let newCanvasWidthR = 0; const viewportWidth = this.getViewportInnerWidth(); if (d < 0) { // shrink column x = d; for (j = i; j >= 0; j--) { c = vc[j]; if (c?.resizable && !c.hidden) { actualMinWidth = Math.max(c.minWidth || 0, this.absoluteColumnMinWidth); if (x && (c.previousWidth || 0) + x < actualMinWidth) { x += (c.previousWidth || 0) - actualMinWidth; c.width = actualMinWidth; } else { c.width = (c.previousWidth || 0) + x; x = 0; } } } for (k = 0; k <= i; k++) { c = vc[k]; if (!c || c.hidden) { continue; } if (this.hasFrozenColumns() && (k > this._options.frozenColumn!)) { newCanvasWidthR += c.width || 0; } else { newCanvasWidthL += c.width || 0; } } if (this._options.forceFitColumns) { x = -d; for (j = i + 1; j < vc.length; j++) { c = vc[j]; if (!c || c.hidden) { continue; } if (c.resizable) { if (x && c.maxWidth && (c.maxWidth - (c.previousWidth || 0) < x)) { x -= c.maxWidth - (c.previousWidth || 0); c.width = c.maxWidth; } else { c.width = (c.previousWidth || 0) + x; x = 0; } if (this.hasFrozenColumns() && (j > this._options.frozenColumn!)) { newCanvasWidthR += c.width || 0; } else { newCanvasWidthL += c.width || 0; } } } } else { for (j = i + 1; j < vc.length; j++) { c = vc[j]; if (!c || c.hidden) { continue; } if (this.hasFrozenColumns() && (j > this._options.frozenColumn!)) { newCanvasWidthR += c.width || 0; } else { newCanvasWidthL += c.width || 0; } } } if (this._options.forceFitColumns) { x = -d; for (j = i + 1; j < vc.length; j++) { c = vc[j]; if (!c || c.hidden) { continue; } if (c.resizable) { if (x && c.maxWidth && (c.maxWidth - (c.previousWidth || 0) < x)) { x -= c.maxWidth - (c.previousWidth || 0); c.width = c.maxWidth; } else { c.width = (c.previousWidth || 0) + x; x = 0; } } } } } else { // stretch column x = d; newCanvasWidthL = 0; newCanvasWidthR = 0; for (j = i; j >= 0; j--) { c = vc[j]; if (!c || c.hidden) { continue; } if (c.resizable) { if (x && c.maxWidth && (c.maxWidth - (c.previousWidth || 0) < x)) { x -= c.maxWidth - (c.previousWidth || 0); c.width = c.maxWidth; } else { const newWidth = (c.previousWidth || 0) + x; const resizedCanvasWidthL = this.canvasWidthL + x; if (this.hasFrozenColumns() && (j <= this._options.frozenColumn!)) { // if we're on the left frozen side, we need to make sure that our left section width never goes over the total viewport width if (newWidth > frozenLeftColMaxWidth && resizedCanvasWidthL < (viewportWidth - this._options.frozenRightViewportMinWidth!)) { frozenLeftColMaxWidth = newWidth; // keep max column width ref, if we go over the limit this number will stop increasing } c.width = ((resizedCanvasWidthL + this._options.frozenRightViewportMinWidth!) > viewportWidth) ? frozenLeftColMaxWidth : newWidth; } else { c.width = newWidth; } x = 0; } } } for (k = 0; k <= i; k++) { c = vc[k]; if (!c || c.hidden) { continue; } if (this.hasFrozenColumns() && (k > this._options.frozenColumn!)) { newCanvasWidthR += c.width || 0; } else { newCanvasWidthL += c.width || 0; } } if (this._options.forceFitColumns) { x = -d; for (j = i + 1; j < vc.length; j++) { c = vc[j]; if (!c || c.hidden) { continue; } if (c.resizable) { actualMinWidth = Math.max(c.minWidth || 0, this.absoluteColumnMinWidth); if (x && (c.previousWidth || 0) + x < actualMinWidth) { x += (c.previousWidth || 0) - actualMinWidth; c.width = actualMinWidth; } else { c.width = (c.previousWidth || 0) + x; x = 0; } if (this.hasFrozenColumns() && (j > this._options.frozenColumn!)) { newCanvasWidthR += c.width || 0; } else { newCanvasWidthL += c.width || 0; } } } } else { for (j = i + 1; j < vc.length; j++) { c = vc[j]; if (!c || c.hidden) { continue; } if (this.hasFrozenColumns() && (j > this._options.frozenColumn!)) { // eslint-disable-next-line @typescript-eslint/no-unused-vars newCanvasWidthR += c.width || 0; } else { newCanvasWidthL += c.width || 0; } } } } if (this.hasFrozenColumns() && newCanvasWidthL !== this.canvasWidthL) { Utils.width(this._headerL, newCanvasWidthL + 1000); Utils.setStyleSize(this._paneHeaderR, 'left', newCanvasWidthL); } this.applyColumnHeaderWidths(); if (this._options.syncColumnCellResize) { this.applyColumnWidths(); } this.trigger(this.onColumnsDrag, { triggeredByColumn: resizeElms.resizeableElement, resizeHandle: resizeElms.resizeableHandleElement }); }, onResizeEnd: (_e, resizeElms) => { resizeElms.resizeableElement.classList.remove('slick-header-column-active'); const triggeredByColumn = resizeElms.resizeableElement.id.replace(this.uid, ''); if (this.trigger(this.onBeforeColumnsResize, { triggeredByColumn }).getReturnValue() === true) { this.applyColumnHeaderWidths(); } let newWidth; for (j = 0; j < vc.length; j++) { c = vc[j]; if (!c || c.hidden) { continue; } newWidth = children[j].offsetWidth; if (c.previousWidth !== newWidth && c.rerenderOnResize) { this.invalidateAllRows(); } } this.updateCanvasWidth(true); this.render(); this.trigger(this.onColumnsResized, { triggeredByColumn }); window.clearTimeout(this._columnResizeTimer); this._columnResizeTimer = window.setTimeout(() => { this.columnResizeDragging = false; }, 300); } }) ); } } /** * Validates and sets the frozenColumn option (ensuring it is within valid bounds, or setting it to –1) * and, if a frozenRow is specified (greater than –1), sets the grid’s frozen–row flags, * computes the frozenRowsHeight (based on rowHeight), and determines the actual frozen row index * depending on whether frozenBottom is enabled. */ protected setFrozenOptions() { this._options.frozenColumn = (this._options.frozenColumn! >= 0 && this._options.frozenColumn! < this.columns.length) ? parseInt(this._options.frozenColumn as unknown as string, 10) : -1; if (this._options.frozenRow! > -1) { this.hasFrozenRows = true; this.frozenRowsHeight = (this._options.frozenRow!) * this._options.rowHeight!; const dataLength = this.getDataLength(); this.actualFrozenRow = (this._options.frozenBottom) ? (dataLength - this._options.frozenRow!) : this._options.frozenRow!; } else { this.hasFrozenRows = false; } } ////////////////////////////////////////////////////////////////////////////////////////////// // Column Management - Autosizing ////////////////////////////////////////////////////////////////////////////////////////////// /** * Proportionally resize a specific column by its name, index or Id * * Resizes based on its content, but determines the column definition from the provided identifier or index. * Then, obtains a grid canvas and calls getColAutosizeWidth to compute and update the column’s width. */ autosizeColumn(columnOrIndexOrId: number | string, isInit?: boolean) { let colDef: C | null = null; let colIndex = -1; if (typeof columnOrIndexOrId === 'number') { colDef = this.columns[columnOrIndexOrId]; colIndex = columnOrIndexOrId; } else if (typeof columnOrIndexOrId === 'string') { for (let i = 0; i < this.columns.length; i++) { if (this.columns[i].id === columnOrIndexOrId) { colDef = this.columns[i]; colIndex = i; } } } if (!colDef) { return; } const gridCanvas = this.getCanvasNode(0, 0) as HTMLElement; this.getColAutosizeWidth(colDef, colIndex, gridCanvas, isInit || false, colIndex); } /** * Returns true if the column should be treated as locked (i.e. not resized) based on autosize settings. * The decision is based on whether header text is not ignored, sizeToRemaining is false, * content size equals header width, and the current width is less than a pixel threshold (default 100px). * * @param {AutoSize} [autoSize={}] - The autosize configuration for the column. * @returns {boolean} - Returns `true` if the column should be treated as locked, otherwise `false`. */ protected treatAsLocked(autoSize: AutoSize = {}): boolean { // treat as locked (don't resize) if small and header is the widest part return !autoSize.ignoreHeaderText && !autoSize.sizeToRemaining && (autoSize.contentSizePx === autoSize.headerWidthPx) && ((autoSize.widthPx ?? 0) < (this._options.colAutosizeTreatAsLockedBelowWidth ?? 100)); } /** Proportionately resizes all columns to fill available horizontal space. * This does not take the cell contents into consideration. * * It does this by temporarily caching CSS for hidden containers, calling the internal autosizing logic * (internalAutosizeColumns) with the autosize mode and initialisation flag, * then restores the original CSS. */ autosizeColumns(autosizeMode?: string, isInit?: boolean) { const checkHiddenParents = !(this._hiddenParents?.length); if (checkHiddenParents) { this.cacheCssForHiddenInit(); } this.internalAutosizeColumns(autosizeMode, isInit); if (checkHiddenParents) { this.restoreCssFromHiddenInit(); } } /** * Implements the main autosizing algorithm. Depending on the autosize mode, * it may call legacyAutosizeColumns (for legacy force–fit modes), or proceed * to compute column widths based on available viewport width. It iterates over columns * to accumulate total widths, locked widths, and then adjusts widths proportionally. * Finally, it calls reRenderColumns to update the grid. * * @param {string} [autosizeMode] - The autosize mode. If undefined, defaults to `autosizeColsMode` from options. * @param {boolean} [isInit] - If `true`, applies initial settings for autosizing. */ protected internalAutosizeColumns(autosizeMode?: string, isInit?: boolean) { // LogColWidths(); autosizeMode = autosizeMode || this._options.autosizeColsMode; if (autosizeMode === GridAutosizeColsMode.LegacyForceFit || autosizeMode === GridAutosizeColsMode.LegacyOff) { this.legacyAutosizeColumns(); return; } if (autosizeMode === GridAutosizeColsMode.None) { return; } // test for brower canvas support, canvas_context!=null if supported this.canvas = document.createElement('canvas'); if (this.canvas?.getContext) { this.canvas_context = this.canvas.getContext('2d'); } // pass in the grid canvas const gridCanvas = this.getCanvasNode(0, 0) as HTMLElement; const viewportWidth = this.getViewportInnerWidth(); // iterate columns to get autosizes let i: number; let c: C; let colWidth: number; let reRender = false; let totalWidth = 0; let totalWidthLessSTR = 0; let strColsMinWidth = 0; let totalMinWidth = 0; let totalLockedColWidth = 0; for (i = 0; i < this.columns.length; i++) { c = this.columns[i]; this.getColAutosizeWidth(c, i, gridCanvas, isInit || false, i); totalLockedColWidth += (c.autoSize?.autosizeMode === ColAutosizeMode.Locked ? (c.width || 0) : (this.treatAsLocked(c.autoSize) ? c.autoSize?.widthPx || 0 : 0)); totalMinWidth += (c.autoSize?.autosizeMode === ColAutosizeMode.Locked ? (c.width || 0) : (this.treatAsLocked(c.autoSize) ? c.autoSize?.widthPx || 0 : c.minWidth || 0)); totalWidth += (c.autoSize?.widthPx || 0); totalWidthLessSTR += (c.autoSize?.sizeToRemaining ? 0 : c.autoSize?.widthPx || 0); strColsMinWidth += (c.autoSize?.sizeToRemaining ? c.minWidth || 0 : 0); } const strColTotalGuideWidth = totalWidth - totalWidthLessSTR; if (autosizeMode === GridAutosizeColsMode.FitViewportToCols) { // - if viewport with is outside MinViewportWidthPx and MaxViewportWidthPx, then the viewport is set to // MinViewportWidthPx or MaxViewportWidthPx and the FitColsToViewport algorithm is used // - viewport is resized to fit columns let setWidth = totalWidth + (this.scrollbarDimensions?.width ?? 0); autosizeMode = GridAutosizeColsMode.IgnoreViewport; if (this._options.viewportMaxWidthPx && setWidth > this._options.viewportMaxWidthPx) { setWidth = this._options.viewportMaxWidthPx; autosizeMode = GridAutosizeColsMode.FitColsToViewport; } else if (this._options.viewportMinWidthPx && setWidth < this._options.viewportMinWidthPx) { setWidth = this._options.viewportMinWidthPx; autosizeMode = GridAutosizeColsMode.FitColsToViewport; } else { // falling back to IgnoreViewport will size the columns as-is, with render checking // for (i = 0; i < columns.length; i++) { columns[i].width = columns[i].autoSize.widthPx; } } Utils.width(this._container, setWidth); } if (autosizeMode === GridAutosizeColsMode.FitColsToViewport) { if (strColTotalGuideWidth > 0 && totalWidthLessSTR < viewportWidth - strColsMinWidth) { // if addl space remains in the viewport and there are SizeToRemaining cols, just the SizeToRemaining cols expand proportionally to fill viewport for (i = 0; i < this.columns.length; i++) { c = this.columns[i]; if (!c || c.hidden) { continue; } const totalSTRViewportWidth = viewportWidth - totalWidthLessSTR; if (c.autoSize?.sizeToRemaining) { colWidth = totalSTRViewportWidth * (c.autoSize?.widthPx || 0) / strColTotalGuideWidth; } else { colWidth = (c.autoSize?.widthPx || 0); } if (c.rerenderOnResize && (c.width || 0) !== colWidth) { reRender = true; } c.width = colWidth; } } else if ((this._options.viewportSwitchToScrollModeWidthPercent && totalWidthLessSTR + strColsMinWidth > viewportWidth * this._options.viewportSwitchToScrollModeWidthPercent / 100) || (totalMinWidth > viewportWidth)) { // if the total columns width is wider than the viewport by switchToScrollModeWidthPercent, switch to IgnoreViewport mode autosizeMode = GridAutosizeColsMode.IgnoreViewport; } else { // otherwise (ie. no SizeToRemaining cols or viewport smaller than columns) all cols other than 'Locked' scale in proportion to fill viewport // and SizeToRemaining get minWidth let unallocatedColWidth = totalWidthLessSTR - totalLockedColWidth; let unallocatedViewportWidth = viewportWidth - totalLockedColWidth - strColsMinWidth; for (i = 0; i < this.columns.length; i++) { c = this.columns[i]; if (!c || c.hidden) { continue; } colWidth = c.width || 0; if (c.autoSize?.autosizeMode !== ColAutosizeMode.Locked && !this.treatAsLocked(c.autoSize)) { if (c.autoSize?.sizeToRemaining) { colWidth = c.minWidth || 0; } else { // size width proportionally to free space (we know we have enough room due to the earlier calculations) colWidth = unallocatedViewportWidth / unallocatedColWidth * (c.autoSize?.widthPx || 0) - 1; if (colWidth < (c.minWidth || 0)) { colWidth = c.minWidth || 0; } // remove the just allocated widths from the allocation pool unallocatedColWidth -= (c.autoSize?.widthPx || 0); unallocatedViewportWidth -= colWidth; } } if (this.treatAsLocked(c.autoSize)) { colWidth = (c.autoSize?.widthPx || 0); if (colWidth < (c.minWidth || 0)) { colWidth = c.minWidth || 0; } } if (c.rerenderOnResize && c.width !== colWidth) { reRender = true; } c.width = colWidth; } } } if (autosizeMode === GridAutosizeColsMode.IgnoreViewport) { // just size columns as-is for (i = 0; i < this.columns.length; i++) { if (!this.columns[i] || this.columns[i].hidden) { continue; } colWidth = this.columns[i].autoSize?.widthPx || 0; if (this.columns[i].rerenderOnResize && this.columns[i].width !== colWidth) { reRender = true; } this.columns[i].width = colWidth; } } this.reRenderColumns(reRender); } /** * Calculates the ideal autosize width for a given column. First, it sets the default width from the column definition. * If the autosize mode is not Locked or Guide, then for ContentIntelligent mode it determines the column’s data type * (handling booleans, numbers, strings, dates, moments) and adjusts autosize settings accordingly. * It then calls getColContentSize to compute the width needed by the content, applies an additional * percentage multiplier and padding, clamps to min/max widths, and if in ContentExpandOnly mode ensures * the width is at least the default width. The computed width is stored in autoSize.widthPx. * * @param {C} columnDef - The column definition containing autosize settings and constraints. * @param {number} colIndex - The index of the column within the grid. * @param {HTMLElement} gridCanvas - The grid's canvas element where temporary elements will be created. * @param {boolean} isInit - If `true`, applies initial settings for row selection mode. * @param {number} colArrayIndex - The index of the column in the column array (used for multi-column adjustments). */ protected getColAutosizeWidth(columnDef: C, colIndex: number, gridCanvas: HTMLElement, isInit: boolean, colArrayIndex: number) { const autoSize = columnDef.autoSize as AutoSize; // set to width as default autoSize.widthPx = columnDef.width; if (autoSize.autosizeMode === ColAutosizeMode.Locked || autoSize.autosizeMode === ColAutosizeMode.Guide) { return; } const dl = this.getDataLength(); // getDataItem(); const isoDateRegExp = new RegExp(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z/); // ContentIntelligent takes settings from column data type if (autoSize.autosizeMode === ColAutosizeMode.ContentIntelligent) { // default to column colDataTypeOf (can be used if initially there are no data rows) let colDataTypeOf = autoSize.colDataTypeOf; let colDataItem: any; if (dl > 0) { const tempRow = this.getDataItem(0); if (tempRow) { colDataItem = tempRow[columnDef.field as keyof TData]; // check for dates in hiding if (isoDateRegExp.test(colDataItem)) { colDataItem = Date.parse(colDataItem); } colDataTypeOf = typeof colDataItem; if (colDataTypeOf === 'object') { if (colDataItem instanceof Date) { colDataTypeOf = 'date'; } if (typeof moment !== 'undefined' && colDataItem instanceof moment) { colDataTypeOf = 'moment'; } } } } if (colDataTypeOf === 'boolean') { autoSize.colValueArray = [true, false]; } if (colDataTypeOf === 'number') { autoSize.valueFilterMode = ValueFilterMode.GetGreatestAndSub; autoSize.rowSelectionMode = RowSelectionMode.AllRows; } if (colDataTypeOf === 'string') { autoSize.valueFilterMode = ValueFilterMode.GetLongestText; autoSize.rowSelectionMode = RowSelectionMode.AllRows; autoSize.allowAddlPercent = 5; } if (colDataTypeOf === 'date') { autoSize.colValueArray = [new Date(2009, 8, 30, 12, 20, 20)]; // Sep 30th 2009, 12:20:20 AM } if (colDataTypeOf === 'moment' && typeof moment !== 'undefined') { autoSize.colValueArray = [moment([2009, 8, 30, 12, 20, 20])]; // Sep 30th 2009, 12:20:20 AM } } // at this point, the autosizeMode is effectively 'Content', so proceed to get size let colWidth = autoSize.contentSizePx = this.getColContentSize(columnDef, colIndex, gridCanvas, isInit, colArrayIndex); if (colWidth === 0) { colWidth = autoSize.widthPx || 0; } const addlPercentMultiplier = (autoSize.allowAddlPercent ? (1 + autoSize.allowAddlPercent / 100) : 1); colWidth = colWidth * addlPercentMultiplier + (this._options.autosizeColPaddingPx || 0); if (columnDef.minWidth && colWidth < columnDef.minWidth) { colWidth = columnDef.minWidth; } if (columnDef.maxWidth && colWidth > columnDef.maxWidth) { colWidth = columnDef.maxWidth; } if (autoSize.autosizeMode === ColAutosizeMode.ContentExpandOnly || ((columnDef?.editor as any)?.ControlFillsColumn)) { // only use content width if it's wider than the default column width (this is used for dropdowns and other fixed width controls) if (colWidth < (columnDef.width || 0)) { colWidth = columnDef.width || 0; } } autoSize.widthPx = colWidth; } /** * Determines the width needed to render a column’s content. It first measures the header width (if not ignored) * and uses it as a baseline. If an explicit colValueArray is provided, it measures that; otherwise, it creates * a RowInfo object to select a range of rows based on the rowSelectionMode. Depending on the valueFilterMode * (e.g. DeDuplicate, GetGreatestAndSub, GetLongestTextAndSub, GetLongestText), it adjusts the values to measure. * It then calls getColWidth (using either canvas text measurement or DOM measurement) and returns the maximum * of the header width and computed content width (adjusted by a ratio, if applicable). * * @param {C} columnDef - The column definition containing formatting and auto-sizing options. * @param {number} colIndex - The index of the column within the grid. * @param {HTMLElement} gridCanvas - The grid's canvas element where temporary elements will be created. * @param {boolean} isInit - If `true`, applies initial row selection mode settings. * @param {number} colArrayIndex - The index of the column in the column array (used for multi-column adjustments). * @returns {number} - The computed optimal column width in pixels. */ protected getColContentSize(columnDef: C, colIndex: number, gridCanvas: HTMLElement, isInit: boolean, colArrayIndex: number) { const autoSize = columnDef.autoSize as AutoSize; let widthAdjustRatio = 1; // at this point, the autosizeMode is effectively 'Content', so proceed to get size // get header width, if we are taking notice of it let i: number; let tempVal: any; let maxLen = 0; let maxColWidth = 0; autoSize.headerWidthPx = 0; if (!autoSize.ignoreHeaderText) { autoSize.headerWidthPx = this.getColHeaderWidth(columnDef); } if (autoSize.headerWidthPx === 0) { autoSize.headerWidthPx = (columnDef.width ? columnDef.width : (columnDef.maxWidth ? columnDef.maxWidth : (columnDef.minWidth ? columnDef.minWidth : 20) ) ); } if (autoSize.colValueArray) { // if an array of values are specified, just pass them in instead of data maxColWidth = this.getColWidth(columnDef, gridCanvas, autoSize.colValueArray as any); return Math.max(autoSize.headerWidthPx, maxColWidth); } // select rows to evaluate using rowSelectionMode and rowSelectionCount const rowInfo = {} as RowInfo; rowInfo.colIndex = colIndex; rowInfo.rowCount = this.getDataLength(); rowInfo.startIndex = 0; rowInfo.endIndex = rowInfo.rowCount - 1; rowInfo.valueArr = null; rowInfo.getRowVal = (j: number) => this.getDataItem(j)[columnDef.field as keyof TData]; const rowSelectionMode = (isInit ? autoSize.rowSelectionModeOnInit : undefined) || autoSize.rowSelectionMode; if (rowSelectionMode === RowSelectionMode.FirstRow) { rowInfo.endIndex = 0; } if (rowSelectionMode === RowSelectionMode.LastRow) { rowInfo.endIndex = rowInfo.startIndex = rowInfo.rowCount - 1; } if (rowSelectionMode === RowSelectionMode.FirstNRows) { rowInfo.endIndex = Math.min(autoSize.rowSelectionCount || 0, rowInfo.rowCount) - 1; } // now use valueFilterMode to further filter selected rows if (autoSize.valueFilterMode === ValueFilterMode.DeDuplicate) { const rowsDict: any = {}; for (i = rowInfo.startIndex; i <= rowInfo.endIndex; i++) { rowsDict[rowInfo.getRowVal(i)] = true; } if (Object.keys) { rowInfo.valueArr = Object.keys(rowsDict); } else { rowInfo.valueArr = []; for (const v in rowsDict) { if (rowsDict) { rowInfo.valueArr.push(v); } } } rowInfo.startIndex = 0; rowInfo.endIndex = rowInfo.length - 1; } if (autoSize.valueFilterMode === ValueFilterMode.GetGreatestAndSub) { // get greatest abs value in data let maxVal; let maxAbsVal = 0; for (i = rowInfo.startIndex; i <= rowInfo.endIndex; i++) { tempVal = rowInfo.getRowVal(i); if (Math.abs(tempVal) > maxAbsVal) { maxVal = tempVal; maxAbsVal = Math.abs(tempVal); } } // now substitute a '9' for all characters (to get widest width) and convert back to a number maxVal = '' + maxVal; maxVal = Array(maxVal.length + 1).join('9'); maxVal = +maxVal; rowInfo.valueArr = [maxVal]; rowInfo.startIndex = rowInfo.endIndex = 0; } if (autoSize.valueFilterMode === ValueFilterMode.GetLongestTextAndSub) { // get greatest abs value in data for (i = rowInfo.startIndex; i <= rowInfo.endIndex; i++) { tempVal = rowInfo.getRowVal(i); if ((tempVal || '').length > maxLen) { maxLen = tempVal.length; } } // now substitute a 'm' for all characters tempVal = Array(maxLen + 1).join('m'); widthAdjustRatio = this._options.autosizeTextAvgToMWidthRatio || 0; rowInfo.maxLen = maxLen; rowInfo.valueArr = [tempVal]; rowInfo.startIndex = rowInfo.endIndex = 0; } if (autoSize.valueFilterMode === ValueFilterMode.GetLongestText) { // get greatest abs value in data maxLen = 0; let maxIndex = 0; for (i = rowInfo.startIndex; i <= rowInfo.endIndex; i++) { tempVal = rowInfo.getRowVal(i); if ((tempVal || '').length > maxLen) { maxLen = tempVal.length; maxIndex = i; } } // now substitute a 'c' for all characters tempVal = rowInfo.getRowVal(maxIndex); rowInfo.maxLen = maxLen; rowInfo.valueArr = [tempVal]; rowInfo.startIndex = rowInfo.endIndex = 0; } // !!! HACK !!!! if (rowInfo.maxLen && rowInfo.maxLen > 30 && colArrayIndex > 1) { autoSize.sizeToRemaining = true; } maxColWidth = this.getColWidth(columnDef, gridCanvas, rowInfo) * widthAdjustRatio; return Math.max(autoSize.headerWidthPx, maxColWidth); } /** * Creates a temporary row and cell element (with absolute positioning, hidden visibility, and nowrap) and iterates * over the selected rows (as defined in a RowInfo object or provided value array) to render the cell content using * the column formatter. If in text-only mode and canvas measurement is enabled, uses canvas.measureText; * otherwise, uses DOM offsetWidth after applying the formatter result to the cell. * Returns the maximum measured width. * * @param {C} columnDef - The column definition containing formatting and auto-sizing options. * @param {HTMLElement} gridCanvas - The grid's canvas element where the temporary row will be added. * @param {RowInfo} rowInfo - Object containing row start/end indices and values for width evaluation. * @returns {number} - The computed optimal column width in pixels. */ protected getColWidth(columnDef: C, gridCanvas: HTMLElement, rowInfo: RowInfo) { const rowEl = Utils.createDomElement('div', { className: 'slick-row ui-widget-content' }, gridCanvas); const cellEl = Utils.createDomElement('div', { className: 'slick-cell' }, rowEl); cellEl.style.position = 'absolute'; cellEl.style.visibility = 'hidden'; cellEl.style.textOverflow = 'initial'; cellEl.style.whiteSpace = 'nowrap'; let i: number; let len: number; let max = 0; let maxText = ''; let formatterResult: string | FormatterResultWithHtml | FormatterResultWithText | HTMLElement | DocumentFragment; let val: any; // get mode - if text only display, use canvas otherwise html element let useCanvas = (columnDef.autoSize!.widthEvalMode === WidthEvalMode.TextOnly); if (columnDef.autoSize?.widthEvalMode === WidthEvalMode.Auto) { const noFormatter = !columnDef.formatterOverride && !columnDef.formatter; const formatterIsText = ((columnDef?.formatterOverride as { ReturnsTextOnly: boolean })?.ReturnsTextOnly) || (!columnDef.formatterOverride && (columnDef.formatter as any)?.ReturnsTextOnly); useCanvas = noFormatter || formatterIsText; } // use canvas - very fast, but text-only if (this.canvas_context && useCanvas) { const style = getComputedStyle(cellEl); this.canvas_context.font = style.fontSize + ' ' + style.fontFamily; for (i = rowInfo.startIndex; i <= rowInfo.endIndex; i++) { // row is either an array or values or a single value val = (rowInfo.valueArr ? rowInfo.valueArr[i] : rowInfo.getRowVal(i)); if (columnDef.formatterOverride) { // use formatterOverride as first preference formatterResult = (columnDef.formatterOverride as FormatterOverrideCallback)(i, rowInfo.colIndex, val, columnDef, this.getDataItem(i), this as unknown as SlickGridModel); } else if (columnDef.formatter) { // otherwise, use formatter formatterResult = columnDef.formatter(i, rowInfo.colIndex, val, columnDef, this.getDataItem(i), this as unknown as SlickGridModel); } else { // otherwise, use plain text formatterResult = '' + val; } len = formatterResult ? this.canvas_context.measureText(formatterResult as string).width : 0; if (len > max) { max = len; maxText = formatterResult as string; } } cellEl.textContent = maxText; len = cellEl.offsetWidth; rowEl.remove(); return len; } for (i = rowInfo.startIndex; i <= rowInfo.endIndex; i++) { val = (rowInfo.valueArr ? rowInfo.valueArr[i] : rowInfo.getRowVal(i)); if (columnDef.formatterOverride) { // use formatterOverride as first preference formatterResult = (columnDef.formatterOverride as FormatterOverrideCallback)(i, rowInfo.colIndex, val, columnDef, this.getDataItem(i), this as unknown as SlickGridModel); } else if (columnDef.formatter) { // otherwise, use formatter formatterResult = columnDef.formatter(i, rowInfo.colIndex, val, columnDef, this.getDataItem(i), this as unknown as SlickGridModel); } else { // otherwise, use plain text formatterResult = '' + val; } this.applyFormatResultToCellNode(formatterResult, cellEl); len = cellEl.offsetWidth; if (len > max) { max = len; } } rowEl.remove(); return max; } /** * Determines the width of a column header by first attempting to find the header element using an ID composed of the * grid’s uid and the column’s id. If found, clones the element, makes it absolutely positioned and hidden, * inserts it into the DOM, measures its offsetWidth, and then removes it. If the header element does not exist yet, * creates a temporary header element with the column’s name and measures its width before removing it. * Returns the computed header width. * * @param {C} columnDef - The column definition containing the header information. * @returns {number} - The computed width of the column header in pixels. */ protected getColHeaderWidth(columnDef: C) { let width = 0; // if (columnDef && (!columnDef.resizable || columnDef._autoCalcWidth === true)) { return; } const headerColElId = this.getUID() + columnDef.id; const domRootOrDocument = (this._options?.shadowRoot ?? document) as Document | ShadowRoot; let headerColEl = (domRootOrDocument as Document).getElementById ? (domRootOrDocument as Document).getElementById(headerColElId) as HTMLDivElement : domRootOrDocument.querySelector(`[id="${headerColElId}"]`); const dummyHeaderColElId = `${headerColElId}_`; if (headerColEl) { // headers have been created, use clone technique const clone = headerColEl.cloneNode(true) as HTMLElement; clone.id = dummyHeaderColElId; clone.style.cssText = 'position: absolute; visibility: hidden;right: auto;text-overflow: initial;white-space: nowrap;'; headerColEl.parentNode!.insertBefore(clone, headerColEl); width = clone.offsetWidth; clone.parentNode!.removeChild(clone); } else { // headers have not yet been created, create a new node const header = this.getHeader(columnDef) as HTMLElement; headerColEl = Utils.createDomElement('div', { id: dummyHeaderColElId, className: 'ui-state-default slick-state-default slick-header-column' }, header); const colNameElm = Utils.createDomElement('span', { className: 'slick-column-name' }, headerColEl); this.applyHtmlCode(colNameElm, columnDef.name!); headerColEl.style.cssText = 'position: absolute; visibility: hidden;right: auto;text-overflow: initial;white-space: nowrap;'; if (columnDef.headerCssClass) { headerColEl.classList.add(...Utils.classNameToList(columnDef.headerCssClass)); } width = headerColEl.offsetWidth; header.removeChild(headerColEl); } return width; } /** * Iterates over all columns to collect current widths (skipping hidden ones), calculates total width * and available shrink leeway, then enters a “shrink” loop if the total width exceeds the available * viewport width and a “grow” loop if below. Finally, it applies the computed widths to the columns * and calls reRenderColumns (with a flag if any width changed) to update the grid. */ protected legacyAutosizeColumns() { let i; let c: C | undefined; let shrinkLeeway = 0; let total = 0; let prevTotal = 0; const widths: number[] = []; const availWidth = this.getViewportInnerWidth(); for (i = 0; i < this.columns.length; i++) { c = this.columns[i]; if (!c || c.hidden) { widths.push(0); continue; } widths.push(c.width || 0); total += c.width || 0; if (c.resizable) { shrinkLeeway += (c.width || 0) - Math.max((c.minWidth || 0), this.absoluteColumnMinWidth); } } // shrink prevTotal = total; while (total > availWidth && shrinkLeeway) { const shrinkProportion = (total - availWidth) / shrinkLeeway; for (i = 0; i < this.columns.length && total > availWidth; i++) { c = this.columns[i]; if (!c || c.hidden) { continue; } const width = widths[i]; if (!c.resizable || width <= c.minWidth! || width <= this.absoluteColumnMinWidth) { continue; } const absMinWidth = Math.max(c.minWidth!, this.absoluteColumnMinWidth); let shrinkSize = Math.floor(shrinkProportion * (width - absMinWidth)) || 1; shrinkSize = Math.min(shrinkSize, width - absMinWidth); total -= shrinkSize; shrinkLeeway -= shrinkSize; widths[i] -= shrinkSize; } if (prevTotal <= total) { // avoid infinite loop break; } prevTotal = total; } // grow prevTotal = total; while (total < availWidth) { const growProportion = availWidth / total; for (i = 0; i < this.columns.length && total < availWidth; i++) { c = this.columns[i]; if (!c || c.hidden) { continue; } const currentWidth = widths[i]; let growSize; if (!c.resizable || c.maxWidth! <= currentWidth) { growSize = 0; } else { growSize = Math.min(Math.floor(growProportion * currentWidth) - currentWidth, (c.maxWidth! - currentWidth) || 1000000) || 1; } total += growSize; widths[i] += (total <= availWidth ? growSize : 0); } if (prevTotal >= total) { // avoid infinite loop break; } prevTotal = total; } let reRender = false; for (i = 0; i < this.columns.length; i++) { c = this.columns[i]; if (!c || c.hidden) { continue; } if (this.columns[i].rerenderOnResize && this.columns[i].width !== widths[i]) { reRender = true; } this.columns[i].width = widths[i]; } this.reRenderColumns(reRender); } /** * Apply Columns Widths in the UI and optionally invalidate & re-render the columns when specified * @param {Boolean} shouldReRender - should we invalidate and re-render the grid? */ reRenderColumns(reRender?: boolean) { this.applyColumnHeaderWidths(); this.updateCanvasWidth(true); this.trigger(this.onAutosizeColumns, { columns: this.columns }); if (reRender) { this.invalidateAllRows(); this.render(); } } /** * Returns an array of column definitions filtered to exclude any that are marked as hidden. * * @returns */ getVisibleColumns() { return this.columns.filter(c => !c.hidden); } /** * Returns the index of a column with a given id. Since columns can be reordered by the user, this can be used to get the column definition independent of the order: * @param {String | Number} id A column id. */ getColumnIndex(id: number | string): number { return this.columnsById[id]; } /** * Iterates over the header elements (from both left and right headers) and updates each header’s width based on the * corresponding visible column’s width minus a computed adjustment (headerColumnWidthDiff). * Finally, it updates the internal column caches. * * @returns */ protected applyColumnHeaderWidths() { if (!this.initialized) { return; } let columnIndex = 0; const vc = this.getVisibleColumns(); this._headers.forEach((header) => { for (let i = 0; i < header.children.length; i++, columnIndex++) { const h = header.children[i] as HTMLElement; const col = vc[columnIndex] || {}; const width = (col.width || 0) - this.headerColumnWidthDiff; if (Utils.width(h) !== width) { Utils.width(h, width); } } }); this.updateColumnCaches(); } /** * Iterates over all columns (skipping hidden ones) and, for each, retrieves the associated CSS rules * (using getColumnCssRules). It then sets the left and right CSS properties so that the columns align * correctly within the grid canvas. It also updates the cumulative offset for non–frozen columns. */ protected applyColumnWidths() { let x = 0; let w = 0; let rule: any; for (let i = 0; i < this.columns.length; i++) { if (!this.columns[i]?.hidden) { w = this.columns[i].width || 0; rule = this.getColumnCssRules(i); rule.left.style.left = `${x}px`; rule.right.style.right = (((this._options.frozenColumn !== -1 && i > this._options.frozenColumn!) ? this.canvasWidthR : this.canvasWidthL) - x - w) + 'px'; // If this column is frozen, reset the css left value since the // column starts in a new viewport. if (this._options.frozenColumn !== i) { x += this.columns[i].width!; } } if (this._options.frozenColumn === i) { x = 0; } } } /** * A convenience method that creates a sort configuration for one column (with the given sort direction) * and calls setSortColumns with it. Accepts a columnId string and an ascending boolean. * Applies a sort glyph in either ascending or descending form to the header of the column. * Note that this does not actually sort the column. It only adds the sort glyph to the header. * * @param {String | Number} columnId * @param {Boolean} ascending */ setSortColumn(columnId: number | string, ascending: boolean) { this.setSortColumns([{ columnId, sortAsc: ascending }]); } /** * Get column by index - iterates over header containers and returns the header column * element corresponding to the given index. * * @param {Number} id - column index * @returns */ getColumnByIndex(id: number) { let result: HTMLElement | undefined; this._headers.every((header) => { const length = header.children.length; if (id < length) { result = header.children[id] as HTMLElement; return false; } id -= length; return true; }); return result; } /** * Accepts an array of objects in the form [ { columnId: [string], sortAsc: [boolean] }, ... ] to * define the grid's sort order. When called, this will apply a sort glyph in either ascending * or descending form to the header of each column specified in the array. * Note that this does not actually sort the column. It only adds the sort glyph to the header. * * @param {ColumnSort[]} cols - column sort */ setSortColumns(cols: ColumnSort[]) { this.sortColumns = cols; const numberCols = this._options.numberedMultiColumnSort && this.sortColumns.length > 1; this._headers.forEach((header) => { let indicators = header.querySelectorAll('.slick-header-column-sorted'); indicators.forEach((indicator) => { indicator.classList.remove('slick-header-column-sorted'); }); indicators = header.querySelectorAll('.slick-sort-indicator'); indicators.forEach((indicator) => { indicator.classList.remove('slick-sort-indicator-asc'); indicator.classList.remove('slick-sort-indicator-desc'); }); indicators = header.querySelectorAll('.slick-sort-indicator-numbered'); indicators.forEach((el) => { el.textContent = ''; }); }); let i = 1; this.sortColumns.forEach((col) => { if (!Utils.isDefined(col.sortAsc)) { col.sortAsc = true; } const columnIndex = this.getColumnIndex(col.columnId); if (Utils.isDefined(columnIndex)) { const column = this.getColumnByIndex(columnIndex); if (column) { column.classList.add('slick-header-column-sorted'); let indicator = column.querySelector('.slick-sort-indicator'); indicator?.classList.add(col.sortAsc ? 'slick-sort-indicator-asc' : 'slick-sort-indicator-desc'); if (numberCols) { indicator = column.querySelector('.slick-sort-indicator-numbered'); if (indicator) { indicator.textContent = String(i); } } } } i++; }); } /** Returns the current array of column definitions. */ getColumns() { return this.columns; } /** Get sorted columns representing the current sorting state of the grid **/ getSortColumns(): ColumnSort[] { return this.sortColumns; } /** * Iterates over all columns to compute and store their left and right boundaries * (based on cumulative widths). Resets the offset when a frozen column is encountered. */ protected updateColumnCaches() { // Pre-calculate cell boundaries. this.columnPosLeft = []; this.columnPosRight = []; let x = 0; for (let i = 0, ii = this.columns.length; i < ii; i++) { if (!this.columns[i] || this.columns[i].hidden) { continue; } this.columnPosLeft[i] = x; this.columnPosRight[i] = x + (this.columns[i].width || 0); if (this._options.frozenColumn === i) { x = 0; } else { x += this.columns[i].width || 0; } } } /** * Iterates over each column to (a) save its original width as widthRequest, * (b) apply default properties (using mixinDefaults if set) to both the column * and its autoSize property, (c) update the columnsById mapping, and (d) adjust * the width if it is less than minWidth or greater than maxWidth. */ protected updateColumnProps() { this.columnsById = {}; for (let i = 0; i < this.columns.length; i++) { let m: C = this.columns[i]; if (m.width) { m.widthRequest = m.width; } if (this._options.mixinDefaults) { Utils.applyDefaults(m, this._columnDefaults); if (!m.autoSize) { m.autoSize = {}; } Utils.applyDefaults(m.autoSize, this._columnAutosizeDefaults); } else { m = this.columns[i] = Utils.extend({}, this._columnDefaults, m); m.autoSize = Utils.extend({}, this._columnAutosizeDefaults, m.autoSize); } this.columnsById[m.id] = i; if (m.minWidth && ((m.width || 0) < m.minWidth)) { m.width = m.minWidth; } if (m.maxWidth && ((m.width || 0) > m.maxWidth)) { m.width = m.maxWidth; } } } /** * Sets grid columns. Column headers will be recreated and all rendered rows will be removed. * To rerender the grid (if necessary), call render(). * @param {Column[]} columnDefinitions An array of column definitions. */ setColumns(columnDefinitions: C[]) { this.trigger(this.onBeforeSetColumns, { previousColumns: this.columns, newColumns: columnDefinitions, grid: this }); this.columns = columnDefinitions; this.updateColumns(); this.trigger(this.onAfterSetColumns, { newColumns: columnDefinitions, grid: this }); } /** Update columns for when a hidden property has changed but the column list itself has not changed. */ updateColumns() { this.trigger(this.onBeforeUpdateColumns, { columns: this.columns, grid: this }); this.updateColumnsInternal(); this.trigger(this.onAfterUpdateColumns, { columns: this.columns, grid: this }); } /** * Triggers onBeforeUpdateColumns and calls updateColumnsInternal to update column properties, * caches, header/footer elements, CSS rules, canvas dimensions, and selections without changing the column array. */ protected updateColumnsInternal() { this.updateColumnProps(); this.updateColumnCaches(); if (this.initialized) { this.setPaneFrozenClasses(); this.setPaneVisibility(); this.setOverflow(); this.invalidateAllRows(); this.createColumnHeaders(); this.createColumnFooter(); this.removeCssRules(); this.createCssRules(); this.resizeCanvas(); this.updateCanvasWidth(); this.applyColumnHeaderWidths(); this.applyColumnWidths(); this.handleScroll(); this.getSelectionModel()?.refreshSelections(); } } ///////////////////////////////////////////////////////////////////// /// End Column Management ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// /// Data Management and Editing ///////////////////////////////////////////////////////////////////// /** Get Editor lock */ getEditorLock() { return this._options.editorLock as SlickEditorLock; } /** Get Editor Controller */ getEditController() { return this.editController; } /** * Sets a new source for databinding and removes all rendered rows. Note that this doesn't render the new rows - you can follow it with a call to render() to do that. * @param {CustomDataView|Array<*>} newData New databinding source using a regular JavaScript array.. or a custom object exposing getItem(index) and getLength() functions. * @param {Number} [scrollToTop] If true, the grid will reset the vertical scroll position to the top of the grid. */ setData(newData: CustomDataView | TData[], scrollToTop?: boolean) { this.data = newData; this.invalidateAllRows(); this.updateRowCount(); if (scrollToTop) { this.scrollTo(0); } } /** Returns an array of every data object, unless you're using DataView in which case it returns a DataView object. */ getData | U[]>(): U { return this.data as U; } /** Returns the size of the databinding source. */ getDataLength() { if ((this.data as CustomDataView).getLength) { return (this.data as CustomDataView).getLength(); } else { return (this.data as TData[])?.length ?? 0; } } /** * Returns the number of data items plus an extra row if enableAddRow is true and paging conditions allow. * * @returns */ protected getDataLengthIncludingAddNew() { return this.getDataLength() + (!this._options.enableAddRow ? 0 : (!this.pagingActive || this.pagingIsLastPage ? 1 : 0) ); } /** * Returns the databinding item at a given position. * @param {Number} index Item row index. */ getDataItem(i: number): TData { if ((this.data as CustomDataView).getItem) { return (this.data as CustomDataView).getItem(i) as TData; } else { return (this.data as TData[])[i] as TData; } } /** Are we using a DataView? */ hasDataView() { return !Array.isArray(this.data); } /** * Returns item metadata by a row index when it exists * @param {Number} row * @returns {ItemMetadata | null} */ getItemMetadaWhenExists(row: number): ItemMetadata | null { return 'getItemMetadata' in this.data ? (this.data as CustomDataView).getItemMetadata(row) : null; } /** * Determines the proper formatter for a given cell by checking row metadata for column overrides, * then falling back to the column’s formatter, a formatter from the formatterFactory, or the default formatter. * * @param {number} row - The row index of the cell. * @param {C} column - The column definition containing formatting options. * @returns {Formatter} - The resolved formatter function for the specified cell. */ protected getFormatter(row: number, column: C): Formatter { const rowMetadata = (this.data as CustomDataView)?.getItemMetadata?.(row); // look up by id, then index const columnOverrides = rowMetadata?.columns && (rowMetadata.columns[column.id] || rowMetadata.columns[this.getColumnIndex(column.id)]); return ((columnOverrides?.formatter) || (rowMetadata?.formatter) || column.formatter || (this._options.formatterFactory?.getFormatter(column)) || this._options.defaultFormatter) as Formatter; } /** * Retrieves the editor (or editor constructor) for the specified cell by first checking for an override * in row metadata and then falling back to the column’s editor or an editor from the editorFactory. * * @param {number} row - The row index of the cell. * @param {number} cell - The column index of the cell. * @returns {Editor | EditorConstructor | null | undefined} - The editor instance or constructor if available, otherwise `null` or `undefined`. */ protected getEditor(row: number, cell: number): Editor | EditorConstructor | null | undefined { const column = this.columns[cell]; const rowMetadata = this.getItemMetadaWhenExists(row); const columnMetadata = rowMetadata?.columns; if (columnMetadata?.[column.id]?.editor !== undefined) { return columnMetadata[column.id].editor; } if (columnMetadata?.[cell]?.editor !== undefined) { return columnMetadata[cell].editor; } return (column.editor || (this._options?.editorFactory?.getEditor(column))); } /** * Returns the value for the specified column from a given data item. If a dataItemColumnValueExtractor * is provided in options, it is used; otherwise, the property named by the column’s field is returned. * * @param {TData} item - The data item containing the requested value. * @param {C} columnDef - The column definition containing the field key. * @returns {*} - The extracted value from the data item based on the column definition. */ protected getDataItemValueForColumn(item: TData, columnDef: C) { if (this._options.dataItemColumnValueExtractor) { return this._options.dataItemColumnValueExtractor(item, columnDef) as TData; } return item[columnDef.field as keyof TData]; } ////////////////////////////////////////////////////////////////////////////////////////////// // Data Management and Editing - Cell Switchers //////////////////////////////////////////////////////////////////// /** Resets active cell by making cell normal and other internal reset. */ resetActiveCell() { this.setActiveCellInternal(null, false); } /** Clear active cell by making cell normal & removing "active" CSS class. */ unsetActiveCell() { if (Utils.isDefined(this.activeCellNode)) { this.makeActiveCellNormal(); this.activeCellNode.classList.remove('active'); this.rowsCache[this.activeRow]?.rowNode?.forEach((node) => node.classList.remove('active')); } } /** @alias `setFocus` */ focus() { this.setFocus(); } // Sets focus to one of the hidden focus sink elements based on the current tabbing direction. protected setFocus() { if (this.tabbingDirection === -1) { this._focusSink.focus(); } else { this._focusSink2.focus(); } } /** * Clears any previously active cell (removing “active” CSS classes), sets the new active cell, * calculates its position, and updates active row and cell indices. * If conditions are met (grid is editable and `opt_editMode` is `true`), * it initiates editing on the cell (with an asynchronous delay if configured). * Finally, it triggers `onActiveCellChanged` unless suppressed. * * @param {HTMLDivElement | null} newCell - The new active cell element, or `null` to deactivate the current cell. * @param {boolean | null} [opt_editMode] - If `true`, enables edit mode for the active cell. * If `null` or `undefined`, it follows `autoEditNewRow` and `autoEdit` settings. * @param {boolean | null} [preClickModeOn] - If `true`, indicates that the cell was activated by a pre-click action. * @param {boolean} [suppressActiveCellChangedEvent] - If `true`, prevents triggering `onActiveCellChanged` event. * @param {Event | SlickEvent_} [e] - The event that triggered the cell activation (if applicable). */ protected setActiveCellInternal(newCell: HTMLDivElement | null, opt_editMode?: boolean | null, preClickModeOn?: boolean | null, suppressActiveCellChangedEvent?: boolean, e?: Event | SlickEvent_) { // make current active cell as normal cell & remove "active" CSS classes this.unsetActiveCell(); // let activeCellChanged = (this.activeCellNode !== newCell); this.activeCellNode = newCell; if (Utils.isDefined(this.activeCellNode)) { const activeCellOffset = Utils.offset(this.activeCellNode); let rowOffset = Math.floor(Utils.offset(Utils.parents(this.activeCellNode, '.grid-canvas')[0] as HTMLElement)!.top); const isBottom = Utils.parents(this.activeCellNode, '.grid-canvas-bottom').length; if (this.hasFrozenRows && isBottom) { rowOffset -= (this._options.frozenBottom) ? Utils.height(this._canvasTopL) as number : this.frozenRowsHeight; } const cell = this.getCellFromPoint(activeCellOffset!.left, Math.ceil(activeCellOffset!.top) - rowOffset); this.activeRow = cell.row; this.activePosY = cell.row; this.activeCell = this.activePosX = this.getCellFromNode(this.activeCellNode); if (!Utils.isDefined(opt_editMode) && this._options.autoEditNewRow) { opt_editMode = (this.activeRow === this.getDataLength()) || this._options.autoEdit; } if (this._options.showCellSelection) { // make sure to never activate more than 1 cell at a time document.querySelectorAll('.slick-cell.active').forEach((node) => node.classList.remove('active')); this.activeCellNode.classList.add('active'); this.rowsCache[this.activeRow]?.rowNode?.forEach((node) => node.classList.add('active')); } if (opt_editMode && this.isCellEditable(this.activeRow, this.activeCell)) { if (this._options.asyncEditorLoading) { window.clearTimeout(this.h_editorLoader); this.h_editorLoader = window.setTimeout(() => { this.makeActiveCellEditable(undefined, preClickModeOn, e); }, this._options.asyncEditorLoadDelay); } else { this.makeActiveCellEditable(undefined, preClickModeOn, e); } } } else { this.activeRow = this.activeCell = null as any; } // this optimisation causes trouble - MLeibman #329 // if (activeCellChanged) { if (!suppressActiveCellChangedEvent) { this.trigger(this.onActiveCellChanged, this.getActiveCell() as OnActiveCellChangedEventArgs); } // } } /** Check if cell is editable and check if grid is also editable */ protected isCellEditable(row: number, cell: number): boolean { return !!(this._options.editable && this.isCellPotentiallyEditable(row, cell)); } /** * Checks whether data for the row is loaded, whether the cell is in an “Add New” row * (and the column disallows insert triggering), and whether an editor exists and the cell is not hidden. * Returns true if the cell is editable. * * @param {number} row - The row index of the cell. * @param {number} cell - The cell index (column index) within the row. * @returns {boolean} - Returns `true` if the cell is editable, otherwise `false`. */ protected isCellPotentiallyEditable(row: number, cell: number) { const dataLength = this.getDataLength(); // is the data for this row loaded? if (row < dataLength && !this.getDataItem(row)) { return false; } // are we in the Add New row? Can we create new from this cell? if (this.columns[cell].cannotTriggerInsert && row >= dataLength) { return false; } // does this cell have an editor? if (!this.columns[cell] || this.columns[cell].hidden || !this.getEditor(row, cell)) { return false; } return true; } /** * Make the cell normal again (for example after destroying cell editor), * we can also optionally refocus on the current active cell (again possibly after closing cell editor) * * If an editor is active, triggers onBeforeCellEditorDestroy and calls the editor’s destroy method. * It then removes “editable” and “invalid” CSS classes from the active cell, re–applies the formatter * to restore the cell’s original content, invalidates any post–processing results, * and deactivates the editor lock. Optionally, it can also re–focus the grid. * In IE, it clears any text selection to ensure focus is properly reset. * * @param {Boolean} [refocusActiveCell] */ protected makeActiveCellNormal(refocusActiveCell = false) { if (!this.currentEditor) { return; } this.trigger(this.onBeforeCellEditorDestroy, { editor: this.currentEditor }); this.currentEditor.destroy(); this.currentEditor = null; if (this.activeCellNode) { const d = this.getDataItem(this.activeRow); this.activeCellNode.classList.remove('editable'); this.activeCellNode.classList.remove('invalid'); if (d) { const column = this.columns[this.activeCell]; const formatter = this.getFormatter(this.activeRow, column); const formatterResult = formatter(this.activeRow, this.activeCell, this.getDataItemValueForColumn(d, column), column, d, this as unknown as SlickGridModel); this.applyFormatResultToCellNode(formatterResult, this.activeCellNode); this.invalidatePostProcessingResults(this.activeRow); } if (refocusActiveCell) { this.setFocus(); } } // if there previously was text selected on a page (such as selected text in the edit cell just removed), // IE can't set focus to anything else correctly if (navigator.userAgent.toLowerCase().match(/msie/)) { this.clearTextSelection(); } this.getEditorLock()?.deactivate(this.editController as EditController); } /** * A public method that starts editing on the active cell by calling * makeActiveCellEditable with the provided editor, pre–click flag, and event. */ editActiveCell(editor?: EditorConstructor, preClickModeOn?: boolean | null, e?: Event) { this.makeActiveCellEditable(editor, preClickModeOn, e); } /** * Makes the currently active cell editable by initializing an editor instance. * * @param {EditorConstructor} [editor] - An optional custom editor constructor to use for editing. * @param {boolean | null} [preClickModeOn] - Indicates if pre-click mode is enabled. * @param {Event | SlickEvent_} [e] - The event that triggered editing. * * @throws {Error} If called when the grid is not editable. */ protected makeActiveCellEditable(editor?: EditorConstructor, preClickModeOn?: boolean | null, e?: Event | SlickEvent_) { if (!this.activeCellNode) { return; } if (!this._options.editable) { throw new Error('SlickGrid makeActiveCellEditable : should never get called when this._options.editable is false'); } // cancel pending async call if there is one window.clearTimeout(this.h_editorLoader); if (!this.isCellPotentiallyEditable(this.activeRow, this.activeCell)) { return; } const columnDef = this.columns[this.activeCell]; const item = this.getDataItem(this.activeRow); if (this.trigger(this.onBeforeEditCell, { row: this.activeRow, cell: this.activeCell, item, column: columnDef, target: 'grid' }).getReturnValue() === false) { this.setFocus(); return; } this.getEditorLock()?.activate(this.editController as EditController); this.activeCellNode.classList.add('editable'); const useEditor = editor || this.getEditor(this.activeRow, this.activeCell); // editor was null and columnMetadata and editorFactory returned null or undefined // the editor must be constructable. Also makes sure that useEditor is of type EditorConstructor if (!useEditor || typeof useEditor !== 'function') { return; } // don't clear the cell if a custom editor is passed through if (!editor && !useEditor.suppressClearOnEdit) { Utils.emptyElement(this.activeCellNode); } let metadata = this.getItemMetadaWhenExists(this.activeRow); metadata = metadata?.columns as any; const columnMetaData = metadata && (metadata[columnDef.id as keyof ItemMetadata] || (metadata as any)[this.activeCell]); const editorArgs: EditorArguments = { grid: this, gridPosition: this.absBox(this._container), position: this.absBox(this.activeCellNode), container: this.activeCellNode, column: columnDef, columnMetaData, item: item || {}, event: e as Event, commitChanges: this.commitEditAndSetFocus.bind(this), cancelChanges: this.cancelEditAndSetFocus.bind(this) }; this.currentEditor = new useEditor(editorArgs); if (item && this.currentEditor) { this.currentEditor.loadValue(item); if (preClickModeOn && this.currentEditor?.preClick) { this.currentEditor.preClick(); } } this.serializedEditorValue = this.currentEditor?.serializeValue(); if (this.currentEditor?.position) { this.handleActiveCellPositionChange(); } } /** * Commits the current edit and sets focus back to the grid. * If the commit fails due to validation, the focus remains in the editor. */ protected commitEditAndSetFocus() { // if the commit fails, it would do so due to a validation error // if so, do not steal the focus from the editor if (this.getEditorLock()?.commitCurrentEdit()) { this.setFocus(); if (this._options.autoEdit && !this._options.autoCommitEdit) { this.navigateDown(); } } } /** * Cancels the current edit and restores focus to the grid. */ protected cancelEditAndSetFocus() { if (this.getEditorLock()?.cancelCurrentEdit()) { this.setFocus(); } } // IEditor implementation for the editor lock /** * Commits the current edit, validating and applying changes if necessary. * If validation fails, an error is triggered and focus remains in the editor. * * @returns {boolean} Whether the edit was successfully committed. */ protected commitCurrentEdit() { const self = this as SlickGrid; const item = self.getDataItem(self.activeRow); const column = self.columns[self.activeCell]; if (self.currentEditor) { if (self.currentEditor.isValueChanged()) { const validationResults = self.currentEditor.validate( undefined, { rowIndex: self.activeRow, cellIndex: self.activeCell } ); if (validationResults.valid) { const row = self.activeRow; const cell = self.activeCell; const editor = self.currentEditor; const serializedValue = self.currentEditor.serializeValue(); const prevSerializedValue = self.serializedEditorValue; if (self.activeRow < self.getDataLength()) { const editCommand = { row, cell, editor, serializedValue, prevSerializedValue, execute: () => { editor.applyValue(item, serializedValue); self.updateRow(row); self.trigger(self.onCellChange, { command: 'execute', row, cell, item, column }); }, undo: () => { editor.applyValue(item, prevSerializedValue); self.updateRow(row); self.trigger(self.onCellChange, { command: 'undo', row, cell, item, column, }); } }; if (self._options.editCommandHandler) { self.makeActiveCellNormal(true); self._options.editCommandHandler(item, column, editCommand); } else { editCommand.execute(); self.makeActiveCellNormal(true); } } else { const newItem = {}; self.currentEditor.applyValue(newItem, self.currentEditor.serializeValue()); self.makeActiveCellNormal(true); self.trigger(self.onAddNewRow, { item: newItem, column }); } // check whether the lock has been re-acquired by event handlers return !self.getEditorLock()?.isActive(); } else { // Re-add the CSS class to trigger transitions, if any. if (self.activeCellNode) { self.activeCellNode.classList.remove('invalid'); Utils.width(self.activeCellNode);// force layout self.activeCellNode.classList.add('invalid'); } self.trigger(self.onValidationError, { editor: self.currentEditor, cellNode: self.activeCellNode, validationResults, row: self.activeRow, cell: self.activeCell, column }); self.currentEditor.focus(); return false; } } self.makeActiveCellNormal(true); } return true; } /** * Cancels the current edit and restores the cell to normal mode. * * @returns {boolean} Always returns true. */ protected cancelCurrentEdit() { this.makeActiveCellNormal(); return true; } /** Returns an array of row indices corresponding to the currently selected rows. */ getSelectedRows() { if (!this.selectionModel) { throw new Error('SlickGrid Selection model is not set'); } return this.selectedRows.slice(0); } /** * Accepts an array of row indices and applies the current selectedCellCssClass to the cells in the row, respecting whether cells have been flagged as selectable. * @param {Array} rowsArray - an array of row numbers. * @param {String} [caller] - an optional string to identify who called the method */ setSelectedRows(rows: number[], caller?: string) { if (!this.selectionModel) { throw new Error('SlickGrid Selection model is not set'); } if (this && this.getEditorLock && !this.getEditorLock()?.isActive()) { this.selectionModel.setSelectedRanges(this.rowsToRanges(rows), caller || 'SlickGrid.setSelectedRows'); } } /////////////////////////////////////////////////////////////////////////// // Event Handling and Interactivity ///////////////////////////////////////////////////////////////////////// /** * A generic helper that creates (or uses) a SlickEventData from the provided event, * attaches the grid instance to the event arguments, and calls notify on the given event. * Returns the result of the notification. * * @param {SlickEvent_} evt - The Slick event instance to trigger. * @param {ArgType} [args] - Optional arguments to pass with the event. * @param {Event | SlickEventData_} [e] - The original event object or SlickEventData. * @returns {*} - The result of the event notification. */ protected trigger(evt: SlickEvent_, args?: ArgType, e?: Event | SlickEventData_) { const event: SlickEventData_ = (e || new SlickEventData(e, args)) as SlickEventData_; const eventArgs = (args || {}) as ArgType & { grid: SlickGrid; }; eventArgs.grid = this; return evt.notify(eventArgs, event, this); } /** * Handles the mouseout event for a cell. * Triggers the `onMouseLeave` event. * * @param {MouseEvent & { target: HTMLElement }} e - The mouse event. */ protected handleCellMouseOut(e: MouseEvent & { target: HTMLElement; }) { this.trigger(this.onMouseLeave, {}, e); } /** * Handles mouse hover over a header cell. * Adds CSS classes to indicate a hover state. * * @param {Event | SlickEventData_} e - The mouse event. */ protected handleHeaderMouseHoverOn(e: Event | SlickEventData_) { (e as any)?.target.classList.add('ui-state-hover', 'slick-state-hover'); } /** * Handles mouse hover off a header cell. * Removes CSS classes indicating a hover state. * * @param {Event | SlickEventData_} e - The mouse event. */ protected handleHeaderMouseHoverOff(e: Event | SlickEventData_) { (e as any)?.target.classList.remove('ui-state-hover', 'slick-state-hover'); } /** * Called when the grid’s selection model reports a change. It builds a new selection * (and CSS hash for selected cells) from the provided ranges, applies the new cell CSS styles, * and if the selection has changed from the previous state, triggers the onSelectedRowsChanged * event with details about added and removed selections. * * @param {SlickEventData_} e - The Slick event data for selection changes. * @param {SlickRange_[]} ranges - The list of selected row and cell ranges. */ protected handleSelectedRangesChanged(e: SlickEventData_, ranges: SlickRange_[]) { const ne = e.getNativeEvent(); const selectionMode = ne?.detail?.selectionMode ?? ''; let addDragHandle = !!ne?.detail?.addDragHandle; const selectionType = this.getSelectionModel()?.getOptions()?.selectionType; addDragHandle = selectionType === 'cell' || selectionType === 'mixed'; // drag and replace functionality const prevSelectedRanges = this.selectedRanges.slice(0); this.selectedRanges = ranges; if (selectionMode === CellSelectionMode.Replace && prevSelectedRanges && prevSelectedRanges.length === 1 && this.selectedRanges && this.selectedRanges.length === 1) { const prevSelectedRange = prevSelectedRanges[0]; const selectedRange = this.selectedRanges[0]; // check range has expanded if (SelectionUtils.copyRangeIsLarger(prevSelectedRange, selectedRange)) { this.trigger(this.onDragReplaceCells, { prevSelectedRange, selectedRange }); this.invalidate(); } } const previousSelectedRows = this.selectedRows.slice(0); // shallow copy previously selected rows for later comparison this.selectionBottomRow = -1; this.selectionRightCell = -1; this.dragReplaceEl.removeEl(); this.selectedRows = []; const hash: CssStyleHash = {}; for (let i = 0; i < ranges.length; i++) { for (let j = ranges[i].fromRow; j <= ranges[i].toRow; j++) { if (!hash[j]) { // prevent duplicates this.selectedRows.push(j); hash[j] = {}; } for (let k = ranges[i].fromCell; k <= ranges[i].toCell; k++) { if (this.canCellBeSelected(j, k)) { hash[j][this.columns[k].id] = this._options.selectedCellCssClass; } } } if (this.selectionBottomRow < ranges[i].toRow) { this.selectionBottomRow = ranges[i].toRow; } if (this.selectionRightCell < ranges[i].toCell) { this.selectionRightCell = ranges[i].toCell; } } this.setCellCssStyles(this._options.selectedCellCssClass || '', hash); if (this.selectionBottomRow >= 0 && this.selectionRightCell >= 0 && addDragHandle) { const lowerRightCell = this.getCellNode(this.selectionBottomRow, this.selectionRightCell) this.dragReplaceEl.createEl(lowerRightCell); } // check if the selected rows have changed (index order isn't important, so we'll sort them both before comparing them) if (!this.arrayEquals(previousSelectedRows.sort(), this.selectedRows.sort())) { const caller = ne?.detail?.caller ?? 'click'; // Use Set for faster performance const selectedRowsSet = new Set(this.getSelectedRows()); const previousSelectedRowsSet = new Set(previousSelectedRows); const newSelectedAdditions = Array.from(selectedRowsSet).filter(i => !previousSelectedRowsSet.has(i)); const newSelectedDeletions = Array.from(previousSelectedRowsSet).filter(i => !selectedRowsSet.has(i)); this.trigger(this.onSelectedRowsChanged, { rows: this.getSelectedRows(), previousSelectedRows, caller, changedSelectedRows: newSelectedAdditions, changedUnselectedRows: newSelectedDeletions }, e); } } /** * Processes a mouse wheel event by adjusting the vertical scroll (scrollTop) based on deltaY (scaled by rowHeight) * and horizontal scroll (scrollLeft) based on deltaX. It then calls the internal scroll handler with the “mousewheel” * type and, if any scrolling occurred, prevents the default action. * * @param {MouseEvent} e - The mouse event. * @param {number} _delta - Unused delta value. * @param {number} deltaX - The horizontal scroll delta. * @param {number} deltaY - The vertical scroll delta. */ protected handleMouseWheel(e: MouseEvent, _delta: number, deltaX: number, deltaY: number) { this.scrollHeight = this._viewportScrollContainerY.scrollHeight; if (e.shiftKey) { this.scrollLeft = this._viewportScrollContainerX.scrollLeft + (deltaX * 10); } else { this.scrollTop = Math.max(0, this._viewportScrollContainerY.scrollTop - (deltaY * this._options.rowHeight!)); this.scrollLeft = this._viewportScrollContainerX.scrollLeft + (deltaX * 10); } const handled = this._handleScroll('mousewheel'); if (handled) { e.stopPropagation(); } } /** * Called when a drag is initiated. It retrieves the cell from the event; if the cell does not exist or is not selectable, * it returns false. Otherwise, it triggers the onDragInit event and returns the event’s return value if * propagation is stopped, else returns false to cancel the drag. * * @param {DragEvent} e - The drag event. * @param {DragPosition} dd - The drag position data. * @returns {boolean} - Whether the drag is valid or should be cancelled. */ protected handleDragInit(e: DragEvent, dd: DragPosition) { const cell = this.getCellFromEvent(e); if (!cell || !this.cellExists(cell.row, cell.cell)) { return false; } const retval = this.trigger(this.onDragInit, dd, e); if (retval.isImmediatePropagationStopped()) { return retval.getReturnValue(); } // if nobody claims to be handling drag'n'drop by stopping immediate propagation, // cancel out of it return false; } /** * Similar to handleDragInit, this method retrieves the cell from the event * and triggers the `onDragStart` event. If the event propagation is stopped, * it returns the specified value; otherwise, it returns false. * * @param {DragEvent} e - The drag event that initiated the action. * @param {DragPosition} dd - The current drag position. * @returns {boolean} - The result of the event trigger or false if propagation was not stopped. */ protected handleDragStart(e: DragEvent, dd: DragPosition) { const cell = this.getCellFromEvent(e); if (!cell || !this.cellExists(cell.row, cell.cell)) { return false; } if (this.currentEditor && !this.getEditorLock().commitCurrentEdit()) { return false; } const retval = this.trigger(this.onDragStart, dd, e); if (retval.isImmediatePropagationStopped()) { return retval.getReturnValue(); } return false; } // Triggers the onDrag event with the current drag position and event, and returns the event’s return value. protected handleDrag(e: DragEvent, dd: DragPosition) { return this.trigger(this.onDrag, dd, e).getReturnValue(); } // Called when a drag operation completes; it triggers the onDragEnd event with the current drag position and event. protected handleDragEnd(e: DragEvent, dd: DragPosition) { this.trigger(this.onDragEnd, dd, e); } /** * Handles keydown events for grid navigation and editing. * It triggers the `onKeyDown` event and, based on the key pressed (such as HOME, END, arrow keys, PAGE_UP/DOWN, TAB, ENTER, ESC), * calls the appropriate navigation or editing method. If the key event is handled, * it stops propagation and prevents the default browser behaviour. * * @param {KeyboardEvent & { originalEvent: Event; }} e - The keydown event, with the original event attached. */ protected handleKeyDown(e: KeyboardEvent & { originalEvent: Event; }) { const retval = this.trigger(this.onKeyDown, { row: this.activeRow, cell: this.activeCell }, e); let handled: boolean | undefined | void = retval.isImmediatePropagationStopped(); if (!handled) { if (!e.shiftKey && !e.altKey) { if (this._options.editable && this.currentEditor?.keyCaptureList) { if (this.currentEditor.keyCaptureList.indexOf(e.which) > -1) { return; } } if (e.ctrlKey && e.key === 'Home') { this.navigateTopStart(); } else if (e.ctrlKey && e.key === 'End') { this.navigateBottomEnd(); } else if (e.ctrlKey && e.key === 'ArrowUp') { this.navigateTop(); } else if (e.ctrlKey && e.key === 'ArrowDown') { this.navigateBottom(); } else if ((e.ctrlKey && e.key === 'ArrowLeft') || (!e.ctrlKey && e.key === 'Home')) { this.navigateRowStart(); } else if ((e.ctrlKey && e.key === 'ArrowRight') || (!e.ctrlKey && e.key === 'End')) { this.navigateRowEnd(); } } } if (!handled) { if (!e.shiftKey && !e.altKey && !e.ctrlKey) { // editor may specify an array of keys to bubble if (this._options.editable && this.currentEditor?.keyCaptureList) { if (this.currentEditor.keyCaptureList.indexOf(e.which) > -1) { return; } } if (e.which === keyCode.ESCAPE) { if (!this.getEditorLock()?.isActive()) { return; // no editing mode to cancel, allow bubbling and default processing (exit without cancelling the event) } this.cancelEditAndSetFocus(); } else if (e.which === keyCode.PAGE_DOWN) { this.navigatePageDown(); handled = true; } else if (e.which === keyCode.PAGE_UP) { this.navigatePageUp(); handled = true; } else if (e.which === keyCode.LEFT) { handled = this.navigateLeft(); } else if (e.which === keyCode.RIGHT) { handled = this.navigateRight(); } else if (e.which === keyCode.UP) { handled = this.navigateUp(); } else if (e.which === keyCode.DOWN) { handled = this.navigateDown(); } else if (e.which === keyCode.TAB) { handled = this.navigateNext(); } else if (e.which === keyCode.ENTER) { if (this._options.editable) { if (this.currentEditor) { // adding new row if (this.activeRow === this.getDataLength()) { this.navigateDown(); } else { this.commitEditAndSetFocus(); } } else { if (this.getEditorLock()?.commitCurrentEdit()) { this.makeActiveCellEditable(undefined, undefined, e); } } } handled = true; } } else if (e.which === keyCode.TAB && e.shiftKey && !e.ctrlKey && !e.altKey) { handled = this.navigatePrev(); } } const cell = this.getActiveCell(); const isChar = /^[\p{L}\p{N}\p{P}\p{S}\s]$/u.test(e.key); // make sure it's a character being typed if (!handled && this._options.autoEditByKeypress && cell && isChar && this.isCellEditable(cell.row, cell.cell) && !this.currentEditor) { this.makeActiveCellEditable(undefined, false, e); } if (handled) { // the event has been handled so don't let parent element (bubbling/propagation) or browser (default) handle it e.stopPropagation(); e.preventDefault(); try { (e as any).originalEvent.keyCode = 0; // prevent default behaviour for special keys in IE browsers (F3, F5, etc.) } // ignore exceptions - setting the original event's keycode throws access denied exception for "Ctrl" // (hitting control key only, nothing else), "Shift" (maybe others) // eslint-disable-next-line no-empty catch (error) { } } } /** * Handles a click event on the grid. It logs the event (for debugging), ensures focus is restored if necessary, * triggers the onClick event, and if the clicked cell is selectable and not already active, scrolls it into view * and activates it. * * @param {DOMEvent | SlickEventData_} evt - The click event, either a native DOM event or a Slick event. */ protected handleClick(evt: DOMEvent | SlickEventData_) { const e = evt instanceof SlickEventData ? evt.getNativeEvent() : evt; if (!this.currentEditor) { // if this click resulted in some cell child node getting focus, // don't steal it back - keyboard events will still bubble up // IE9+ seems to default DIVs to tabIndex=0 instead of -1, so check for cell clicks directly. if ((e as DOMEvent).target !== document.activeElement || (e as DOMEvent).target.classList.contains('slick-cell')) { const selection = this.getTextSelection(); // store text-selection and restore it after this.setFocus(); this.setTextSelection(selection as Range); } } const cell = this.getCellFromEvent(e); if (!cell || (this.currentEditor !== null && this.activeRow === cell.row && this.activeCell === cell.cell)) { return; } evt = this.trigger(this.onClick, { row: cell.row, cell: cell.cell }, evt || e); if ((evt as any).isImmediatePropagationStopped()) { return; } // this optimisation causes trouble - MLeibman #329 // if ((activeCell !== cell.cell || activeRow !== cell.row) && canCellBeActive(cell.row, cell.cell)) { if (this.canCellBeActive(cell.row, cell.cell)) { if (!this.getEditorLock()?.isActive() || this.getEditorLock()?.commitCurrentEdit()) { this.scrollRowIntoView(cell.row, false); const preClickModeOn = !!(e as DOMEvent).target?.classList?.contains(preClickClassName); const column = this.columns[cell.cell]; const suppressActiveCellChangedEvent = !!(this._options.editable && column?.editor && this._options.suppressActiveCellChangeOnEdit); this.setActiveCellInternal(this.getCellNode(cell.row, cell.cell), null, preClickModeOn, suppressActiveCellChangedEvent, (e as DOMEvent)); } } } /** * Retrieves the cell DOM element from the event target. * If the cell exists and is not currently being edited, triggers the onContextMenu event. */ protected handleContextMenu(e: Event & { target: HTMLElement; }) { const cell = e.target.closest('.slick-cell'); if (!cell) { return; } // are we editing this cell? if (this.activeCellNode === cell && this.currentEditor !== null) { return; } this.trigger(this.onContextMenu, {}, e); } /** * Retrieves the cell from the event and triggers the onDblClick event. * If the event is not prevented and the grid is editable, * it initiates cell editing by calling gotoCell with edit mode enabled. */ protected handleDblClick(e: MouseEvent) { const cell = this.getCellFromEvent(e); if (!cell || (this.currentEditor !== null && this.activeRow === cell.row && this.activeCell === cell.cell)) { return; } this.trigger(this.onDblClick, { row: cell.row, cell: cell.cell }, e); if (e.defaultPrevented) { return; } if (this._options.editable) { this.gotoCell(cell.row, cell.cell, true, e); } } /** * When the mouse enters a header column element, retrieves the column definition from the element’s * stored data and triggers the onHeaderMouseEnter event with the column and grid reference. */ protected handleHeaderMouseEnter(e: MouseEvent & { target: HTMLElement; }) { const c = Utils.storage.get(e.target.closest('.slick-header-column'), 'column'); if (!c) { return; } this.trigger(this.onHeaderMouseEnter, { column: c, grid: this }, e); } /** * Similar to handleHeaderMouseEnter, but triggers the onHeaderMouseLeave event * when the mouse leaves a header column element. */ protected handleHeaderMouseLeave(e: MouseEvent & { target: HTMLElement; }) { const c = Utils.storage.get(e.target.closest('.slick-header-column'), 'column'); if (!c) { return; } this.trigger(this.onHeaderMouseLeave, { column: c, grid: this }, e); } /** * Retrieves the column from the header row cell element and triggers the onHeaderRowMouseEnter event. */ protected handleHeaderRowMouseEnter(e: MouseEvent & { target: HTMLElement; }) { const c = Utils.storage.get(e.target.closest('.slick-headerrow-column'), 'column'); if (!c) { return; } this.trigger(this.onHeaderRowMouseEnter, { column: c, grid: this }, e); } /** * Retrieves the column from the header row cell element and triggers the onHeaderRowMouseLeave event. */ protected handleHeaderRowMouseLeave(e: MouseEvent & { target: HTMLElement; }) { const c = Utils.storage.get(e.target.closest('.slick-headerrow-column'), 'column'); if (!c) { return; } this.trigger(this.onHeaderRowMouseLeave, { column: c, grid: this }, e); } /** * Retrieves the header column element and its associated column definition, * then triggers the onHeaderContextMenu event with the column data. */ protected handleHeaderContextMenu(e: MouseEvent & { target: HTMLElement; }) { const header = e.target.closest('.slick-header-column'); const column = header && Utils.storage.get(header, 'column'); this.trigger(this.onHeaderContextMenu, { column }, e); } /** * If not in the middle of a column resize, retrieves the header column element and its column definition, then triggers the onHeaderClick event. */ protected handleHeaderClick(e: MouseEvent & { target: HTMLElement; }) { if (!this.columnResizeDragging) { const header = e.target.closest('.slick-header-column'); const column = header && Utils.storage.get(header, 'column'); if (column) { this.trigger(this.onHeaderClick, { column }, e); } } } /** * Triggers the onPreHeaderContextMenu event with the event target (typically the pre–header panel). */ protected handlePreHeaderContextMenu(e: MouseEvent & { target: HTMLElement; }) { this.trigger(this.onPreHeaderContextMenu, { node: e.target }, e); } /** * If not resizing columns, triggers the onPreHeaderClick event with the event target. */ protected handlePreHeaderClick(e: MouseEvent & { target: HTMLElement; }) { if (!this.columnResizeDragging) { this.trigger(this.onPreHeaderClick, { node: e.target }, e); } } /** * Retrieves the footer cell element and its column definition, then triggers the onFooterContextMenu event. */ protected handleFooterContextMenu(e: MouseEvent & { target: HTMLElement; }) { const footer = e.target.closest('.slick-footerrow-column'); const column = footer && Utils.storage.get(footer, 'column'); this.trigger(this.onFooterContextMenu, { column }, e); } /** * Retrieves the footer cell element and its column definition, then triggers the onFooterClick event. */ protected handleFooterClick(e: MouseEvent & { target: HTMLElement; }) { const footer = e.target.closest('.slick-footerrow-column'); const column = footer && Utils.storage.get(footer, 'column'); this.trigger(this.onFooterClick, { column }, e); } /** * Triggers the onMouseEnter event when the mouse pointer enters a cell element. */ protected handleCellMouseOver(e: MouseEvent & { target: HTMLElement; }) { this.trigger(this.onMouseEnter, {}, e); } /** * Handles the change in the position of the active cell. * Triggers the `onActiveCellPositionChanged` event and adjusts the editor visibility and positioning. */ protected handleActiveCellPositionChange() { if (!this.activeCellNode) { return; } this.trigger(this.onActiveCellPositionChanged, {}); if (this.currentEditor) { const cellBox = this.getActiveCellPosition(); if (this.currentEditor.show && this.currentEditor.hide) { if (!cellBox.visible) { this.currentEditor.hide(); } else { this.currentEditor.show(); } } if (this.currentEditor.position) { this.currentEditor.position(cellBox); } } } /** * limits the frequency at which the provided action is executed. * call enqueue to execute the action - it will execute either immediately or, if it was executed less than minPeriod_ms in the past, as soon as minPeriod_ms has expired. * call dequeue to cancel any pending action. */ protected actionThrottle(action: () => void, minPeriod_ms: number) { let blocked = false; let queued = false; const enqueue = () => { if (!blocked) { blockAndExecute(); } else { queued = true; } }; const dequeue = () => { queued = false; }; const blockAndExecute = () => { blocked = true; window.clearTimeout(this._executionBlockTimer); this._executionBlockTimer = window.setTimeout(unblock, minPeriod_ms); action.call(this); }; const unblock = () => { if (queued) { dequeue(); blockAndExecute(); } else { blocked = false; } }; return { enqueue: enqueue.bind(this), dequeue: dequeue.bind(this) }; } /** * Returns a hash containing row and cell indexes from a standard W3C event. * @param {*} event A standard W3C event. */ getCellFromEvent(evt: Event | SlickEventData_) { const e = evt instanceof SlickEventData ? evt.getNativeEvent() : evt; const targetEvent: any = (e as TouchEvent).touches ? (e as TouchEvent).touches[0] : e; const cellNode = (e as Event & { target: HTMLElement }).target.closest('.slick-cell'); if (!cellNode) { return null; } let row = this.getRowFromNode(cellNode.parentNode as HTMLElement); if (this.hasFrozenRows) { let rowOffset = 0; const c = Utils.offset(Utils.parents(cellNode, '.grid-canvas')[0] as HTMLElement); const isBottom = Utils.parents(cellNode, '.grid-canvas-bottom').length; if (isBottom) { rowOffset = (this._options.frozenBottom) ? Utils.height(this._canvasTopL) as number : this.frozenRowsHeight; } row = this.getCellFromPoint(targetEvent.clientX - c!.left, targetEvent.clientY - c!.top + rowOffset + document.documentElement.scrollTop).row; } const cell = this.getCellFromNode(cellNode as HTMLElement); if (!Utils.isDefined(row) || !Utils.isDefined(cell)) { return null; } return { row, cell }; } ///////////////////////////////////////////////////////////////////// // End Event Management and Interactivity /////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// // Rendering and Layout Management /////////////////////////////////////////////////////////////////// /** * Apply HTML code by 3 different ways depending on what is provided as input and what options are enabled. * 1. value is an HTMLElement or DocumentFragment, then first empty the target and simply append the HTML to the target element. * 2. value is string and `enableHtmlRendering` is enabled, then use `target.innerHTML = value;` * 3. value is string and `enableHtmlRendering` is disabled, then use `target.textContent = value;` * @param {HTMLElement} target - target element to apply to * @param {string | HTMLElement | DocumentFragment} val - input value can be either a string or an HTMLElement * @param {{ emptyTarget?: boolean; skipEmptyReassignment?: boolean; }} [options] - * `emptyTarget`, defaults to true, will empty the target. * `skipEmptyReassignment`, defaults to true, when enabled it will not try to reapply an empty value when the target is already empty */ applyHtmlCode(target: HTMLElement, val: string | HTMLElement | DocumentFragment, options?: { emptyTarget?: boolean; skipEmptyReassignment?: boolean; }) { if (target) { if (val instanceof HTMLElement || val instanceof DocumentFragment) { // first empty target and then append new HTML element const emptyTarget = options?.emptyTarget !== false; if (emptyTarget) { Utils.emptyElement(target); } target.appendChild(val); } else { // when it's already empty and we try to reassign empty, it's probably ok to skip the assignment const skipEmptyReassignment = options?.skipEmptyReassignment !== false; if (skipEmptyReassignment && !Utils.isDefined(val) && !target.innerHTML) { return; } let sanitizedText = val; if (typeof sanitizedText === 'number' || typeof sanitizedText === 'boolean') { target.textContent = sanitizedText; } else { sanitizedText = this.sanitizeHtmlString(val as string); // apply HTML when enableHtmlRendering is enabled but make sure we do have a value (without a value, it will simply use `textContent` to clear text content) if (this._options.enableHtmlRendering && sanitizedText) { target.innerHTML = sanitizedText; } else { target.textContent = sanitizedText; } } } } } /** Get Grid Canvas Node DOM Element */ getCanvasNode(columnIdOrIdx?: number | string, rowIndex?: number) { return this._getContainerElement(this.getCanvases(), columnIdOrIdx, rowIndex) as HTMLDivElement; } /** Get the canvas DOM element */ getActiveCanvasNode(e?: Event | SlickEventData_) { if (e === undefined) { return this._activeCanvasNode; } if (e instanceof SlickEventData) { e = e.getNativeEvent(); } this._activeCanvasNode = (e as any)?.target.closest('.grid-canvas'); return this._activeCanvasNode; } /** Get the canvas DOM element */ getCanvases() { return this._canvas; } /** Get the Viewport DOM node element */ getViewportNode(columnIdOrIdx?: number | string, rowIndex?: number) { return this._getContainerElement(this.getViewports(), columnIdOrIdx, rowIndex); } /** Get all the Viewport node elements */ getViewports() { return this._viewport; } /** * Calls setActiveViewportNode (using the provided event) to set the active viewport, * then returns the active viewport DOM element. * * @param e * @returns */ getActiveViewportNode(e: Event | SlickEventData_) { this.setActiveViewportNode(e); return this._activeViewportNode; } /** * Sets an active viewport node * * @param {number | string} [columnIdOrIdx] - The column identifier or index. * @param {number} [rowIndex] - The row index. * @returns {HTMLElement} The corresponding viewport element. */ setActiveViewportNode(e: Event | SlickEventData_) { if (e instanceof SlickEventData) { e = e.getNativeEvent(); } this._activeViewportNode = (e as any)?.target.closest('.slick-viewport'); return this._activeViewportNode; } /** Get the headers width in pixel * * Iterates over all columns to accumulate the widths for the left and right header sections, * adds scrollbar width if needed, and adjusts for frozen columns. * Returns the computed overall header width in pixels. */ getHeadersWidth() { this.headersWidth = this.headersWidthL = this.headersWidthR = 0; const includeScrollbar = !this._options.autoHeight; let i = 0; const ii = this.columns.length; for (i = 0; i < ii; i++) { if (!this.columns[i] || this.columns[i].hidden) { continue; } const width = this.columns[i].width; if ((this._options.frozenColumn!) > -1 && (i > this._options.frozenColumn!)) { this.headersWidthR += width || 0; } else { this.headersWidthL += width || 0; } } if (includeScrollbar) { if ((this._options.frozenColumn!) > -1 && (i > this._options.frozenColumn!)) { this.headersWidthR += this.scrollbarDimensions?.width ?? 0; } else { this.headersWidthL += this.scrollbarDimensions?.width ?? 0; } } if (this.hasFrozenColumns()) { this.headersWidthL = this.headersWidthL + 1000; this.headersWidthR = Math.max(this.headersWidthR, this.viewportW) + this.headersWidthL; this.headersWidthR += this.scrollbarDimensions?.width ?? 0; } else { this.headersWidthL += this.scrollbarDimensions?.width ?? 0; this.headersWidthL = Math.max(this.headersWidthL, this.viewportW) + 1000; } this.headersWidth = this.headersWidthL + this.headersWidthR; return Math.max(this.headersWidth, this.viewportW) + 1000; } /** Get the grid canvas width * * Computes the available width (considering vertical scrollbar if present), * then iterates over the columns (left vs. right based on frozen columns) to sum their widths. * If full–width rows are enabled, extra width is added. Returns the total calculated width. */ getCanvasWidth(): number { const availableWidth = this.getViewportInnerWidth(); let i = this.columns.length; this.canvasWidthL = this.canvasWidthR = 0; while (i--) { if (!this.columns[i] || this.columns[i].hidden) { continue; } if (this.hasFrozenColumns() && (i > this._options.frozenColumn!)) { this.canvasWidthR += this.columns[i].width || 0; } else { this.canvasWidthL += this.columns[i].width || 0; } } let totalRowWidth = this.canvasWidthL + this.canvasWidthR; if (this._options.fullWidthRows) { const extraWidth = Math.max(totalRowWidth, availableWidth) - totalRowWidth; if (extraWidth > 0) { totalRowWidth += extraWidth; if (this.hasFrozenColumns()) { this.canvasWidthR += extraWidth; } else { this.canvasWidthL += extraWidth; } } } return totalRowWidth; } /** * Validate that the column freeze is allowed in the browser by making sure that the frozen column is not exceeding the available and visible left canvas width. * Note that it will only validate when `invalidColumnFreezeWidthCallback` or `throwWhenFrozenNotAllViewable` grid option is enabled. * @param {Number} frozenColumn the column index to freeze at * @param {Boolean} [forceAlert] tri-state flag to alert when frozen column is invalid * - if `undefined` it will do the condition check and never alert more than once * - if `true` it will do the condition check and always alert even if it was called before * - if `false` it will do the condition check but always skip the alert */ validateColumnFreezeWidth(frozenColumn = -1, forceAlert?: boolean): boolean { if (frozenColumn >= 0) { let canvasWidthL = 0; this.columns.forEach((col, i) => { if (!col.hidden && i <= frozenColumn) { const { minWidth = 0, maxWidth = 0, width = this._options.defaultColumnWidth! } = col; let fwidth = width < minWidth ? minWidth : width; if (maxWidth > 0 && fwidth > maxWidth) { fwidth = maxWidth; } canvasWidthL += fwidth; } }); const cWidth = Utils.width(this._container) || 0; if (cWidth > 0 && canvasWidthL > cWidth && !this._options.skipFreezeColumnValidation) { if ((forceAlert !== false && !this._invalidfrozenAlerted) || forceAlert === true) { if (this._options.invalidColumnFreezeWidthCallback || this._options.throwWhenFrozenNotAllViewable) { if (this._options.throwWhenFrozenNotAllViewable) { throw new Error(this._options.invalidColumnFreezeWidthMessage); } this._options.invalidColumnFreezeWidthCallback?.(this._options.invalidColumnFreezeWidthMessage!); this._invalidfrozenAlerted = true; } } return false; } } return true; } /** * From a new set of columns, different than current grid columns, we'll recalculate the `frozenColumn` index position by comparing its column `id` * and recalculating the `frozenColumn` index to find out if it is different from a new set of columns. * @param {Column[]} newColumns - new columns to calculate frozen index from * @param {String|Number} [columnId] - optional column id to calculate from (otherwise it will find the current frozen column id) * @param {Boolean} [applyIndexChange] - whether to apply index changes to the frozen column * @returns {number} - the recalculated frozen column index */ calculateFrozenColumnIndexById(newColumns: C[], columnId?: string | number | null, applyIndexChange = false): number { const frozenColumnIdx = this.getFrozenColumnIdx(); columnId ??= frozenColumnIdx >= 0 ? this.columns[frozenColumnIdx as any]?.id : undefined; if (columnId !== undefined) { const newFrozenColumnIdx = newColumns.findIndex((col) => col.id === columnId); if (newFrozenColumnIdx >= 0 && newFrozenColumnIdx !== frozenColumnIdx) { if (applyIndexChange) { this.setOptions({ frozenColumn: newFrozenColumnIdx } as Partial); } return newFrozenColumnIdx; } } return frozenColumnIdx; } /** * Validate that there is at least 1, or more, column to the right of the frozen column otherwise show an error (we do this check before calling `setColumns()`). * Note that it will only validate when `invalidColumnFreezePickerCallback` grid option is enabled. * @param {Column[]} newColumns the new columns that will later be provided to `setColumns()` * @param {Boolean} [forceAlert] tri-state flag to alert when frozen column is invalid * - if `undefined` it will do the condition check and never alert more than once * - if `true` it will do the condition check and always alert even if it was called before * - if `false` it will do the condition check but always skip the alert */ validateSetColumnFreeze(newColumns: C[], forceAlert?: boolean): boolean { const frozenColumnIdx = this.calculateFrozenColumnIndexById(newColumns); if (frozenColumnIdx >= 0 && frozenColumnIdx > newColumns.length - 2 && !this._options.skipFreezeColumnValidation) { if ((forceAlert !== false && !this._invalidfrozenAlerted) || forceAlert === true) { this._options.invalidColumnFreezePickerCallback?.(this._options.invalidColumnFreezePickerMessage!); this._invalidfrozenAlerted = true; } return false; } return true; } /** * Recalculates the canvas width by calling getCanvasWidth and then adjusts widths of header containers, * canvases, panels, and viewports. If widths have changed (or forced), it applies the new column widths * by calling applyColumnWidths. * * @param {boolean} [forceColumnWidthsUpdate] - Whether to force an update of column widths. */ protected updateCanvasWidth(forceColumnWidthsUpdate?: boolean) { const oldCanvasWidth = this.canvasWidth; const oldCanvasWidthL = this.canvasWidthL; const oldCanvasWidthR = this.canvasWidthR; this.canvasWidth = this.getCanvasWidth(); if (this._options.createTopHeaderPanel) { Utils.width(this._topHeaderPanel, this._options.topHeaderPanelWidth ?? this.canvasWidth); } const widthChanged = this.canvasWidth !== oldCanvasWidth || this.canvasWidthL !== oldCanvasWidthL || this.canvasWidthR !== oldCanvasWidthR; if (widthChanged || this.hasFrozenColumns() || this.hasFrozenRows) { Utils.width(this._canvasTopL, this.canvasWidthL); this.getHeadersWidth(); Utils.width(this._headerL, this.headersWidthL); Utils.width(this._headerR, this.headersWidthR); if (this.hasFrozenColumns()) { Utils.width(this._canvasTopR, this.canvasWidthR); Utils.width(this._paneHeaderL, this.canvasWidthL); Utils.setStyleSize(this._paneHeaderR, 'left', this.canvasWidthL); Utils.setStyleSize(this._paneHeaderR, 'width', this.viewportW - this.canvasWidthL); Utils.width(this._paneTopL, this.canvasWidthL); Utils.setStyleSize(this._paneTopR, 'left', this.canvasWidthL); Utils.width(this._paneTopR, this.viewportW - this.canvasWidthL); Utils.width(this._headerRowScrollerL, this.canvasWidthL); Utils.width(this._headerRowScrollerR, this.viewportW - this.canvasWidthL); Utils.width(this._headerRowL, this.canvasWidthL); Utils.width(this._headerRowR, this.canvasWidthR); if (this._options.createFooterRow) { Utils.width(this._footerRowScrollerL, this.canvasWidthL); Utils.width(this._footerRowScrollerR, this.viewportW - this.canvasWidthL); Utils.width(this._footerRowL, this.canvasWidthL); Utils.width(this._footerRowR, this.canvasWidthR); } if (this._options.createPreHeaderPanel) { Utils.width(this._preHeaderPanel, this._options.preHeaderPanelWidth ?? this.canvasWidth); } Utils.width(this._viewportTopL, this.canvasWidthL); Utils.width(this._viewportTopR, this.viewportW - this.canvasWidthL); if (this.hasFrozenRows) { Utils.width(this._paneBottomL, this.canvasWidthL); Utils.setStyleSize(this._paneBottomR, 'left', this.canvasWidthL); Utils.width(this._viewportBottomL, this.canvasWidthL); Utils.width(this._viewportBottomR, this.viewportW - this.canvasWidthL); Utils.width(this._canvasBottomL, this.canvasWidthL); Utils.width(this._canvasBottomR, this.canvasWidthR); } } else { Utils.width(this._paneHeaderL, '100%'); Utils.width(this._paneTopL, '100%'); Utils.width(this._headerRowScrollerL, '100%'); Utils.width(this._headerRowL, this.canvasWidth); if (this._options.createFooterRow) { Utils.width(this._footerRowScrollerL, '100%'); Utils.width(this._footerRowL, this.canvasWidth); } if (this._options.createPreHeaderPanel) { Utils.width(this._preHeaderPanel, this._options.preHeaderPanelWidth ?? this.canvasWidth); } Utils.width(this._viewportTopL, '100%'); if (this.hasFrozenRows) { Utils.width(this._viewportBottomL, '100%'); Utils.width(this._canvasBottomL, this.canvasWidthL); } } } this.viewportHasHScroll = (this.canvasWidth >= this.viewportW - (this.scrollbarDimensions?.width ?? 0)); Utils.width(this._headerRowSpacerL, this.canvasWidth + (this.viewportHasVScroll ? (this.scrollbarDimensions?.width ?? 0) : 0)); Utils.width(this._headerRowSpacerR, this.canvasWidth + (this.viewportHasVScroll ? (this.scrollbarDimensions?.width ?? 0) : 0)); if (this._options.createFooterRow) { Utils.width(this._footerRowSpacerL, this.canvasWidth + (this.viewportHasVScroll ? (this.scrollbarDimensions?.width ?? 0) : 0)); Utils.width(this._footerRowSpacerR, this.canvasWidth + (this.viewportHasVScroll ? (this.scrollbarDimensions?.width ?? 0) : 0)); } if (widthChanged || forceColumnWidthsUpdate) { this.applyColumnWidths(); } } /** @alias `getPreHeaderPanelLeft` */ getPreHeaderPanel() { return this._preHeaderPanel; } /** Get the Pre-Header Panel Left DOM node element */ getPreHeaderPanelLeft() { return this._preHeaderPanel; } /** Get the Pre-Header Panel Right DOM node element */ getPreHeaderPanelRight() { return this._preHeaderPanelR; } /** Get the Top-Header Panel DOM node element */ getTopHeaderPanel() { return this._topHeaderPanel; } /** * Based on whether frozen columns (and/or rows) are enabled, shows or hides the right–side header * and top panes as well as the bottom panes. If no frozen columns exist, hides right–side panes; * otherwise, conditionally shows or hides the bottom panes depending on whether frozen rows exist. */ protected setPaneVisibility() { if (this.hasFrozenColumns()) { Utils.show(this._paneHeaderR); Utils.show(this._paneTopR); if (this.hasFrozenRows) { Utils.show(this._paneBottomL); Utils.show(this._paneBottomR); } else { Utils.hide(this._paneBottomR); Utils.hide(this._paneBottomL); } } else { Utils.hide(this._paneHeaderR); Utils.hide(this._paneTopR); Utils.hide(this._paneBottomR); if (this.hasFrozenRows) { Utils.show(this._paneBottomL); } else { Utils.hide(this._paneBottomR); Utils.hide(this._paneBottomL); } } } /** * Sets the CSS overflowX and overflowY styles for all four viewport elements * (top–left, top–right, bottom–left, bottom–right) based on the grid’s frozen columns/rows status * and options such as alwaysAllowHorizontalScroll and alwaysShowVerticalScroll. * If a viewportClass is specified in options, the class is added to each viewport. */ protected setOverflow() { this._viewportTopL.style.overflowX = (this.hasFrozenColumns()) ? (this.hasFrozenRows && !this._options.alwaysAllowHorizontalScroll ? 'hidden' : 'scroll') : (this.hasFrozenRows && !this._options.alwaysAllowHorizontalScroll ? 'hidden' : 'auto'); this._viewportTopL.style.overflowY = (!this.hasFrozenColumns() && this._options.alwaysShowVerticalScroll) ? 'scroll' : ((this.hasFrozenColumns()) ? (this.hasFrozenRows ? 'hidden' : 'hidden') : (this.hasFrozenRows ? 'scroll' : 'auto')); this._viewportTopR.style.overflowX = (this.hasFrozenColumns()) ? (this.hasFrozenRows && !this._options.alwaysAllowHorizontalScroll ? 'hidden' : 'scroll') : (this.hasFrozenRows && !this._options.alwaysAllowHorizontalScroll ? 'hidden' : 'auto'); this._viewportTopR.style.overflowY = this._options.alwaysShowVerticalScroll ? 'scroll' : ((this.hasFrozenColumns()) ? (this.hasFrozenRows ? 'scroll' : 'auto') : (this.hasFrozenRows ? 'scroll' : 'auto')); this._viewportBottomL.style.overflowX = (this.hasFrozenColumns()) ? (this.hasFrozenRows && !this._options.alwaysAllowHorizontalScroll ? 'scroll' : 'auto') : (this.hasFrozenRows && !this._options.alwaysAllowHorizontalScroll ? 'auto' : 'auto'); this._viewportBottomL.style.overflowY = (!this.hasFrozenColumns() && this._options.alwaysShowVerticalScroll) ? 'scroll' : ((this.hasFrozenColumns()) ? (this.hasFrozenRows ? 'hidden' : 'hidden') : (this.hasFrozenRows ? 'scroll' : 'auto')); this._viewportBottomR.style.overflowX = (this.hasFrozenColumns()) ? (this.hasFrozenRows && !this._options.alwaysAllowHorizontalScroll ? 'scroll' : 'auto') : (this.hasFrozenRows && !this._options.alwaysAllowHorizontalScroll ? 'auto' : 'auto'); this._viewportBottomR.style.overflowY = this._options.alwaysShowVerticalScroll ? 'scroll' : ((this.hasFrozenColumns()) ? (this.hasFrozenRows ? 'auto' : 'auto') : (this.hasFrozenRows ? 'auto' : 'auto')); if (this._options.viewportClass) { const viewportClassList = Utils.classNameToList(this._options.viewportClass); this._viewportTopL.classList.add(...viewportClassList); this._viewportTopR.classList.add(...viewportClassList); this._viewportBottomL.classList.add(...viewportClassList); this._viewportBottomR.classList.add(...viewportClassList); } } /** * Creates a