@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
133 lines (132 loc) • 5.25 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Directive, Input } from '@angular/core';
import { ContextService } from '../common/provider.service';
import { isPresent } from '@progress/kendo-angular-common';
import { PairSet } from '../selection/pair-set';
import * as i0 from "@angular/core";
import * as i1 from "../common/provider.service";
/**
* Stores the row and cell highlight state of the Grid.
*
* @example
* ```typescript
* <kendo-grid kendoGridHighlight="ProductID"></kendo-grid>
*
* <kendo-grid [kendoGridHighlight]="myKey"></kendo-grid>
* ```
* @remarks
* Applied to: {@link GridComponent}.
*/
export class HighlightDirective {
ctx;
/**
* Stores the highlighted items keys.
* @default []
*/
highlightedKeys = [];
/**
* Sets the item key to store in `highlightedKeys`. The Grid uses the row index as the default item key.
*/
highlightItemKey;
/**
* Sets the column key for a data cell. The Grid uses the column index as the default column key.
*/
highlightColumnKey;
rowHighlightState = new Set();
cellHighlightState = new PairSet();
constructor(ctx) {
this.ctx = ctx;
this.ctx.highlightDirective = this;
}
ngOnChanges(changes) {
if (isPresent(changes['highlightedKeys'])) {
this.setState(this.highlightedKeys);
}
}
ngOnDestroy() {
this.reset();
this.ctx.highlightDirective = null;
}
/**
* @hidden
*/
isRowHighlighted(row) {
return this.rowHighlightState.has(this.getItemKey(row));
}
/**
* @hidden
*/
isCellHighlighted(row, column, colIndex) {
const highlightItem = this.getHighlightItem(row, column, colIndex);
return this.cellHighlightState.has(highlightItem.itemKey, highlightItem.columnKey);
}
getItemKey(row) {
if (this.highlightItemKey) {
if (typeof this.highlightItemKey === "string") {
return row.data?.[this.highlightItemKey];
}
if (typeof this.highlightItemKey === "function") {
return this.highlightItemKey(row);
}
}
return row.index;
}
getHighlightItem(row, col, colIndex) {
const itemIdentifiers = {};
itemIdentifiers.itemKey = this.getItemKey(row);
if (!isPresent(col) && !isPresent(colIndex)) {
return itemIdentifiers;
}
if (this.highlightColumnKey) {
if (typeof this.highlightColumnKey === "string") {
itemIdentifiers.columnKey = row.dataItem[this.highlightColumnKey];
}
if (typeof this.highlightColumnKey === "function") {
itemIdentifiers.columnKey = this.highlightColumnKey(col, colIndex);
}
}
return {
itemKey: itemIdentifiers.itemKey,
columnKey: itemIdentifiers.columnKey ? itemIdentifiers.columnKey : colIndex
};
}
setState(highlightedKeys) {
this.reset();
if (!highlightedKeys || highlightedKeys.length === 0) {
return;
}
const rowHighlights = highlightedKeys.filter(item => !isPresent(item.columnKey));
const cellHighlights = highlightedKeys.filter(item => isPresent(item.columnKey));
if (cellHighlights.length > 0) {
this.cellHighlightState = new PairSet(cellHighlights, 'itemKey', 'columnKey');
}
if (rowHighlights.length > 0) {
rowHighlights.forEach(item => {
this.rowHighlightState.add(item.itemKey);
});
}
}
reset() {
this.rowHighlightState.clear();
this.cellHighlightState.clear();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightDirective, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HighlightDirective, isStandalone: true, selector: "[kendoGridHighlight]", inputs: { highlightedKeys: "highlightedKeys", highlightItemKey: ["kendoGridHighlight", "highlightItemKey"], highlightColumnKey: "highlightColumnKey" }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoGridHighlight]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { highlightedKeys: [{
type: Input
}], highlightItemKey: [{
type: Input,
args: ["kendoGridHighlight"]
}], highlightColumnKey: [{
type: Input
}] } });