diff --git a/examples/example14-highlighting.html b/examples/example14-highlighting.html index 610ac6d4..b66c2e9f 100644 --- a/examples/example14-highlighting.html +++ b/examples/example14-highlighting.html @@ -177,6 +177,7 @@

View Source:

function highlightSecondRow() { // default is: { rowHighlightCssClass: 'highlight-animate' } + grid.navigateTop(); grid.setOptions({ rowHighlightCssClass: 'highlighting-animation' }); grid.highlightRow(1, 500); } diff --git a/src/models/gridOption.interface.ts b/src/models/gridOption.interface.ts index 5c62e037..e8873143 100644 --- a/src/models/gridOption.interface.ts +++ b/src/models/gridOption.interface.ts @@ -261,6 +261,9 @@ export interface GridOption { */ rowHighlightCssClass?: string; + /** Defaults to 400, duration to show the row highlight (e.g. after CRUD executions) */ + rowHighlightDuration?: number; + /** Optional sanitizer function to use for sanitizing data to avoid XSS attacks */ sanitizer?: (dirtyHtml: string) => string; diff --git a/src/slick.core.ts b/src/slick.core.ts index 51388b43..84429f48 100644 --- a/src/slick.core.ts +++ b/src/slick.core.ts @@ -839,8 +839,8 @@ export class Utils { * Accepts string containing the class or space-separated list of classes, and * returns list of individual classes. * Method properly takes into account extra whitespaces in the `className` - * (e.g. ' class1 class2') will result in `['class1', 'class2']`. - * @param {String} className - space separated list of classes + * e.g.: " class1 class2 " => will result in `['class1', 'class2']`. + * @param {String} className - space separated list of class names */ public static classNameToList(className = ''): string[] { return className.split(' ').filter(cls => cls); diff --git a/src/slick.grid.ts b/src/slick.grid.ts index c91d6812..dfbfadfc 100644 --- a/src/slick.grid.ts +++ b/src/slick.grid.ts @@ -246,6 +246,7 @@ export class SlickGrid = Column, O e editorFactory: null, cellFlashingCssClass: 'flashing', rowHighlightCssClass: 'highlight-animate', + rowHighlightDuration: 400, selectedCellCssClass: 'selected', multiSelect: true, enableTextSelectionOnCells: false, @@ -3956,11 +3957,15 @@ export class SlickGrid = Column, O e const appendCellResult = evt.getReturnValue(); let addlCssClasses = typeof appendCellResult === 'string' ? appendCellResult : ''; if ((formatterResult as FormatterResultObject)?.addClasses) { - addlCssClasses += (addlCssClasses ? ' ' : '') + (formatterResult as FormatterResultObject).addClasses; + addlCssClasses += Utils.classNameToList((addlCssClasses ? ' ' : '') + (formatterResult as FormatterResultObject).addClasses).join(' '); } const toolTipText = (formatterResult as FormatterResultObject)?.toolTip ? `${(formatterResult as FormatterResultObject).toolTip}` : ''; - const cellDiv = Utils.createDomElement('div', { className: `${cellCss} ${addlCssClasses || ''}`.trim(), role: 'gridcell', tabIndex: -1 }); + const cellDiv = Utils.createDomElement('div', { + className: Utils.classNameToList(`${cellCss} ${addlCssClasses || ''}`).join(' '), + role: 'gridcell', + tabIndex: -1 + }); cellDiv.setAttribute('aria-describedby', this.uid + m.id); if (toolTipText) { cellDiv.setAttribute('title', toolTipText); @@ -4141,12 +4146,10 @@ export class SlickGrid = Column, O e this.applyHtmlCode(cellNode, formatterVal); if ((formatterResult as FormatterResultObject).removeClasses && !suppressRemove) { - const classes = Utils.classNameToList((formatterResult as FormatterResultObject).removeClasses); - classes.forEach((c) => cellNode.classList.remove(c)); + cellNode.classList.remove(...Utils.classNameToList((formatterResult as FormatterResultObject).removeClasses)); } if ((formatterResult as FormatterResultObject).addClasses) { - const classes = Utils.classNameToList((formatterResult as FormatterResultObject).addClasses); - classes.forEach((c) => cellNode.classList.add(c)); + cellNode.classList.add(...Utils.classNameToList((formatterResult as FormatterResultObject).addClasses)); } if ((formatterResult as FormatterResultObject).toolTip) { cellNode.setAttribute('title', (formatterResult as FormatterResultObject).toolTip!); @@ -5246,16 +5249,17 @@ export class SlickGrid = Column, O e /** * Highlight a row for a certain duration (ms) of time. * @param {Number} row - grid row number - * @param {Number} [duration] - duration (ms), defaults to 500ms + * @param {Number} [duration] - duration (ms), defaults to 400ms */ - highlightRow(row: number, duration = 500) { + highlightRow(row: number, duration?: number) { const rowCache = this.rowsCache[row]; + duration ||= this._options.rowHighlightDuration; if (Array.isArray(rowCache?.rowNode) && this._options.rowHighlightCssClass) { - rowCache.rowNode.forEach(node => node.classList.add(this._options.rowHighlightCssClass || '')); + rowCache.rowNode.forEach(node => node.classList.add(...Utils.classNameToList(this._options.rowHighlightCssClass))); clearTimeout(this._highlightRowTimer); this._highlightRowTimer = setTimeout(() => { - rowCache.rowNode?.forEach(node => node.classList.remove(this._options.rowHighlightCssClass || '')); + rowCache.rowNode?.forEach(node => node.classList.remove(...Utils.classNameToList(this._options.rowHighlightCssClass))); }, duration); } }