@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
150 lines (149 loc) • 6.51 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 { isPresent } from '../utils';
import * as i0 from "@angular/core";
import * as i1 from "../grid.component";
const mapParentGroup = (parentGroup) => {
const parentGroupKeys = [];
while (parentGroup) {
parentGroupKeys.push({ field: parentGroup.group.field, value: parentGroup.group.value });
parentGroup = parentGroup.parentGroup;
}
return parentGroupKeys;
};
const DEFAULT_KEY_GETTER = (groupRowArgs) => ({
field: groupRowArgs.group.field,
value: groupRowArgs.group.value,
parentGroupKeys: mapParentGroup(groupRowArgs.parentGroup)
});
/**
* Controls the expanded state of group rows in the Grid.
* Use this directive to manage which group rows are expanded or collapsed
* ([see example]({% slug groups_expanded_state_grid %}#toc-built-in-directive)).
*
* @example
* ```typescript
* <kendo-grid [kendoGridExpandGroupBy]="expandGroupBy" [expandedGroupKeys]="expandedGroupKeys"></kendo-grid>
* ```
* @remarks
* Applied to: {@link GridComponent}.
*/
export class ExpandGroupDirective {
grid;
/**
* Fires when the `expandedGroupKeys` collection changes.
*/
expandedGroupKeysChange = new EventEmitter();
/**
* Sets the item format stored in the `expandedGroupKeys` collection.
* Accepts a property name or a function that returns a unique key for each group
* ([see example]({% slug groups_expanded_state_grid %}#toc-custom-group-key-format)).
*/
get expandGroupBy() {
return this._expandGroupBy;
}
set expandGroupBy(key) {
if (typeof key === 'function') {
this._expandGroupBy = key;
}
}
/**
* Holds the collection of expanded group keys.
* Set this property to control which group rows are expanded.
*/
get expandedGroupKeys() {
return this._expandedGroupKeys;
}
set expandedGroupKeys(expandedGroups) {
this._expandedGroupKeys = (expandedGroups || []).slice();
}
/**
* Specifies if group items are expanded by default.
* @default false
*/
groupsInitiallyExpanded = false;
_expandGroupBy;
_expandedGroupKeys;
subscriptions = new Subscription();
constructor(grid) {
this.grid = grid;
this.grid.isGroupExpanded = this.isExpanded.bind(this);
this.subscriptions.add(merge(this.grid.groupExpand.pipe(map(e => ({ expand: true, ...e }))), this.grid.groupCollapse.pipe(map(e => ({ expand: false, ...e })))).subscribe(this.toggleState.bind(this)));
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
get keyGetter() {
return this.expandGroupBy || DEFAULT_KEY_GETTER;
}
/**
* @hidden
*/
isExpanded(groupArgs) {
const itemIndex = this.getItemIndex(groupArgs);
return itemIndex > -1 ? !this.groupsInitiallyExpanded : this.groupsInitiallyExpanded;
}
getItemIndex(groupArgs) {
if (this.expandGroupBy) {
return this.expandedGroupKeys.indexOf(this.keyGetter(groupArgs));
}
return this.expandedGroupKeys.findIndex(item => {
let index = 0;
let parentGroup = groupArgs.parentGroup;
while (isPresent(parentGroup)) {
if (!isPresent(item.parentGroupKeys) || !isPresent(item.parentGroupKeys[index]) ||
parentGroup.group.value !== item.parentGroupKeys[index].value ||
parentGroup.group.field !== item.parentGroupKeys[index].field) {
return false;
}
parentGroup = parentGroup.parentGroup;
index++;
}
return item.value === groupArgs.group.value && item.field === groupArgs.group.field;
});
}
toggleState(groupArgs) {
const key = this.keyGetter(groupArgs);
if (Boolean(this.groupsInitiallyExpanded) !== groupArgs.expand) {
this.expandedGroupKeys.push(key);
}
else {
const index = this.expandedGroupKeys.findIndex(group => {
if (this.expandGroupBy) {
return group === key;
}
else if (key.parentGroupKeys?.length === 0) {
return group.value === key.value;
}
return JSON.stringify(group) === JSON.stringify(key);
});
this.expandedGroupKeys.splice(index, 1);
}
this.expandedGroupKeysChange.emit(this.expandedGroupKeys.slice());
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpandGroupDirective, deps: [{ token: i1.GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExpandGroupDirective, isStandalone: true, selector: "[kendoGridExpandGroupBy]", inputs: { expandGroupBy: ["kendoGridExpandGroupBy", "expandGroupBy"], expandedGroupKeys: "expandedGroupKeys", groupsInitiallyExpanded: "groupsInitiallyExpanded" }, outputs: { expandedGroupKeysChange: "expandedGroupKeysChange" }, exportAs: ["kendoGridExpandGroupBy"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpandGroupDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoGridExpandGroupBy]',
exportAs: 'kendoGridExpandGroupBy',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.GridComponent }]; }, propDecorators: { expandedGroupKeysChange: [{
type: Output
}], expandGroupBy: [{
type: Input,
args: ['kendoGridExpandGroupBy']
}], expandedGroupKeys: [{
type: Input
}], groupsInitiallyExpanded: [{
type: Input
}] } });