@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
124 lines (123 loc) • 5.41 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, EventEmitter, Input, Output } from '@angular/core';
import { GridComponent } from '../grid.component';
import { Subscription, merge } from 'rxjs';
import { map } from 'rxjs/operators';
import { getter } from '@progress/kendo-common';
import { isPresent, isString } from '../utils';
import * as i0 from "@angular/core";
import * as i1 from "../grid.component";
/**
* A directive which controls the expanded state of the master detail rows. ([see example](slug:master_detail_expanded_state_grid#toc-built-in-directive))
*/
export class ExpandDetailsDirective {
grid;
/**
* Fires when the expandedDetailKeys are changed.
*/
expandedDetailKeysChange = new EventEmitter();
/**
* Defines the item key that will be stored in the `expandedDetailKeys` collection ([see example]({% slug master_detail_expanded_state_grid %}#toc-built-in-directive)).
*/
get expandDetailsKey() {
return this._expandBy;
}
set expandDetailsKey(key) {
if (isString(key)) {
this._expandBy = getter(key);
}
else {
this._expandBy = key;
}
}
/**
*
* @hidden
* A deprecated alias for setting the `expandDetailsKey` property.
*/
get expandDetailBy() {
return this.expandDetailsKey;
}
set expandDetailBy(key) {
this.expandDetailsKey = key;
}
/**
* Defines the collection that will store the expanded keys.
*/
expandedDetailKeys = [];
/**
* Specifies if the items should be initially expanded.
* When set to `true` items added to the `expandedDetailKeys` collection will be collapsed, and items that are not present in it will be expanded.
*
* @default false
*/
initiallyExpanded = false;
expandedState = new Set();
lastExpandedState;
_expandBy;
subscriptions = new Subscription();
constructor(grid) {
this.grid = grid;
this.grid.isDetailExpanded = this.isExpanded.bind(this);
this.subscriptions.add(merge(this.grid.detailExpand.pipe(map(e => ({ expand: true, ...e }))), this.grid.detailCollapse.pipe(map(e => ({ expand: false, ...e })))).subscribe(this.toggleState.bind(this)));
}
ngOnChanges(changes) {
// skip reinitialization if the user data is the same as the last state change
if (isPresent(changes['expandedDetailKeys']) && this.lastExpandedState !== this.expandedDetailKeys) {
this.expandedState = new Set(this.expandedDetailKeys);
}
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
get keyGetter() {
return this._expandBy || getter(undefined);
}
/**
* @hidden
*/
isExpanded(args) {
const key = this.keyGetter(args.dataItem);
const hasKey = this.expandedState.has(key);
// when [initiallyExpanded]="true" a present key means the corresponding detail row is collapsed
return this.initiallyExpanded ? !hasKey : hasKey;
}
toggleState(args) {
const key = this.keyGetter(args.dataItem);
if (Boolean(this.initiallyExpanded) !== args.expand) {
this.expandedState.add(key);
}
else {
this.expandedState.delete(key);
}
this.notifyChange();
}
notifyChange() {
this.lastExpandedState = Array.from(this.expandedState);
this.expandedDetailKeysChange.emit(this.lastExpandedState);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpandDetailsDirective, deps: [{ token: i1.GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExpandDetailsDirective, isStandalone: true, selector: "[kendoGridExpandDetailsBy]", inputs: { expandDetailsKey: ["kendoGridExpandDetailsBy", "expandDetailsKey"], expandDetailBy: "expandDetailBy", expandedDetailKeys: "expandedDetailKeys", initiallyExpanded: "initiallyExpanded" }, outputs: { expandedDetailKeysChange: "expandedDetailKeysChange" }, exportAs: ["kendoGridExpandDetailsBy"], usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpandDetailsDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoGridExpandDetailsBy]',
exportAs: 'kendoGridExpandDetailsBy',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.GridComponent }]; }, propDecorators: { expandedDetailKeysChange: [{
type: Output
}], expandDetailsKey: [{
type: Input,
args: ['kendoGridExpandDetailsBy']
}], expandDetailBy: [{
type: Input
}], expandedDetailKeys: [{
type: Input
}], initiallyExpanded: [{
type: Input
}] } });