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);
}
}