@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
290 lines (289 loc) • 13.8 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 { Component, HostBinding, Input } from '@angular/core';
import { GroupInfoService } from './group-info.service';
import { GroupsService } from './groups.service';
import { columnsSpan } from '../columns/column-common';
import { getGroupRowArgs } from './utils';
import { ContextService } from '../common/provider.service';
import { caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon } from '@progress/kendo-svg-icons';
import { FieldAccessorPipe } from '../rendering/common/field-accessor.pipe';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { LogicalCellDirective } from '../navigation/logical-cell.directive';
import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
import { TemplateContextDirective } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "./groups.service";
import * as i2 from "./group-info.service";
import * as i3 from "../common/provider.service";
/**
* @hidden
*/
export class GroupHeaderComponent {
groupsService;
groupInfoService;
ctx;
rowIndex;
logicalRowIndex;
item;
skipGroupDecoration = false;
hasDetails = false;
totalColumnsCount = 0;
hasGroupHeaderColumn;
groupHeaderColumns;
columns;
groups = [];
groupItemClass = true;
tableGroupRowClass = true;
isExpanded = false;
caretAltDownIcon = caretAltDownIcon;
caretAltRightIcon = caretAltRightIcon;
caretAltLeftIcon = caretAltLeftIcon;
constructor(groupsService, groupInfoService, ctx) {
this.groupsService = groupsService;
this.groupInfoService = groupInfoService;
this.ctx = ctx;
}
ngDoCheck() {
const groupArgs = {
group: this.item.data,
groupIndex: this.item.index,
parentGroup: getGroupRowArgs(this.item.parentGroup)
};
this.isExpanded = this.groupsService.isExpanded(groupArgs);
}
prefixGroupCell(item) {
return new Array(item.level);
}
toggleGroup(item) {
this.groupsService.toggleRow(item);
return false;
}
groupSpan(item) {
const groupCount = (this.groups || []).length;
const detailOffset = this.hasDetails ? 1 : 0;
if (this.hasGroupHeaderColumn) {
return groupCount + 1 + detailOffset - item.level;
}
const columnCount = columnsSpan(this.columns);
if (this.skipGroupDecoration) {
return columnCount;
}
return groupCount + columnCount + detailOffset - item.level;
}
logicalColSpan() {
return this.skipGroupDecoration ? 1 : this.totalColumnsCount;
}
ariaRole() {
if (this.skipGroupDecoration) {
return 'presentation';
}
return 'gridcell';
}
formatForGroup(item) {
return this.groupInfoService.formatForGroup(item);
}
groupTitle(item) {
return this.groupInfoService.groupTitle(item);
}
groupHeaderTemplate(item) {
return this.groupInfoService.groupHeaderTemplate(item);
}
get groupButtonTitle() {
const messageKey = this.isExpanded ? 'groupCollapse' : 'groupExpand';
return this.ctx.localization.get(messageKey);
}
get arrowIcon() {
const icon = !this.isExpanded ?
!this.ctx.localization.rtl ?
'caret-alt-right' :
'caret-alt-left' :
'caret-alt-down';
return icon;
}
get arrowSVGIcon() {
const icon = !this.isExpanded ?
!this.ctx.localization.rtl ?
this.caretAltRightIcon :
this.caretAltLeftIcon :
this.caretAltDownIcon;
return icon;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: i1.GroupsService }, { token: i2.GroupInfoService }, { token: i3.ContextService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GroupHeaderComponent, isStandalone: true, selector: "[kendoGridGroupHeader]", inputs: { rowIndex: "rowIndex", logicalRowIndex: "logicalRowIndex", item: "item", skipGroupDecoration: "skipGroupDecoration", hasDetails: "hasDetails", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", columns: "columns", groups: "groups" }, host: { properties: { "class.k-grouping-row": "this.groupItemClass", "class.k-table-group-row": "this.tableGroupRowClass" } }, ngImport: i0, template: `
<ng-container *ngIf="!skipGroupDecoration">
<td class="k-group-cell k-table-td k-table-group-td"
role="presentation"
*ngFor="let g of prefixGroupCell(item)"></td>
</ng-container>
<td [attr.colspan]="groupSpan(item)" *ngIf="!(skipGroupDecoration && hasGroupHeaderColumn)"
[attr.role]="ariaRole()"
aria-selected="false"
class="k-table-td"
[attr.aria-expanded]="isExpanded"
kendoGridLogicalCell
[logicalRowIndex]="logicalRowIndex"
[logicalColIndex]="0"
[logicalSlaveCell]="skipGroupDecoration"
[groupItem]="item"
[colSpan]="logicalColSpan()">
<p class="k-reset">
<ng-container *ngIf="!skipGroupDecoration">
<a href="#" tabindex="-1" (click)="toggleGroup(item)"
role="presentation"
[attr.title]="groupButtonTitle"
[attr.aria-label]="groupButtonTitle">
<kendo-icon-wrapper
[name]="arrowIcon"
[svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
</a>
<ng-container *ngIf="!groupHeaderTemplate(item)">
{{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
</ng-container>
<ng-template
[templateContext]="{
templateRef: groupHeaderTemplate(item),
group: item.data,
aggregates: item.data?.aggregates,
value: item.data?.value,
field: item.data?.field,
index: item.index,
expanded: isExpanded,
$implicit: item.data
}">
</ng-template>
</ng-container>
</p>
</td>
<ng-container *ngIf="hasGroupHeaderColumn">
<td *ngFor="let column of groupHeaderColumns; let index = index"
role="gridcell"
class="k-table-td"
aria-selected="false"
kendoGridLogicalCell
[logicalRowIndex]="logicalRowIndex"
[logicalColIndex]="index + 1"
[logicalSlaveCell]="false"
[groupItem]="item"
[colSpan]="1"
>
<ng-template *ngIf="column.groupHeaderColumnTemplateRef" [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
[ngTemplateOutletContext]="{
group: item.data,
aggregates: item.data?.aggregates,
value: item.data?.value,
field: item.data?.field,
index: item.index,
$implicit: item.data
}">
</ng-template>
</td>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderComponent, decorators: [{
type: Component,
args: [{
selector: '[kendoGridGroupHeader]',
template: `
<ng-container *ngIf="!skipGroupDecoration">
<td class="k-group-cell k-table-td k-table-group-td"
role="presentation"
*ngFor="let g of prefixGroupCell(item)"></td>
</ng-container>
<td [attr.colspan]="groupSpan(item)" *ngIf="!(skipGroupDecoration && hasGroupHeaderColumn)"
[attr.role]="ariaRole()"
aria-selected="false"
class="k-table-td"
[attr.aria-expanded]="isExpanded"
kendoGridLogicalCell
[logicalRowIndex]="logicalRowIndex"
[logicalColIndex]="0"
[logicalSlaveCell]="skipGroupDecoration"
[groupItem]="item"
[colSpan]="logicalColSpan()">
<p class="k-reset">
<ng-container *ngIf="!skipGroupDecoration">
<a href="#" tabindex="-1" (click)="toggleGroup(item)"
role="presentation"
[attr.title]="groupButtonTitle"
[attr.aria-label]="groupButtonTitle">
<kendo-icon-wrapper
[name]="arrowIcon"
[svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
</a>
<ng-container *ngIf="!groupHeaderTemplate(item)">
{{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
</ng-container>
<ng-template
[templateContext]="{
templateRef: groupHeaderTemplate(item),
group: item.data,
aggregates: item.data?.aggregates,
value: item.data?.value,
field: item.data?.field,
index: item.index,
expanded: isExpanded,
$implicit: item.data
}">
</ng-template>
</ng-container>
</p>
</td>
<ng-container *ngIf="hasGroupHeaderColumn">
<td *ngFor="let column of groupHeaderColumns; let index = index"
role="gridcell"
class="k-table-td"
aria-selected="false"
kendoGridLogicalCell
[logicalRowIndex]="logicalRowIndex"
[logicalColIndex]="index + 1"
[logicalSlaveCell]="false"
[groupItem]="item"
[colSpan]="1"
>
<ng-template *ngIf="column.groupHeaderColumnTemplateRef" [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
[ngTemplateOutletContext]="{
group: item.data,
aggregates: item.data?.aggregates,
value: item.data?.value,
field: item.data?.field,
index: item.index,
$implicit: item.data
}">
</ng-template>
</td>
</ng-container>
`,
standalone: true,
imports: [NgIf, NgFor, LogicalCellDirective, IconWrapperComponent, TemplateContextDirective, NgTemplateOutlet, FieldAccessorPipe]
}]
}], ctorParameters: function () { return [{ type: i1.GroupsService }, { type: i2.GroupInfoService }, { type: i3.ContextService }]; }, propDecorators: { rowIndex: [{
type: Input
}], logicalRowIndex: [{
type: Input
}], item: [{
type: Input
}], skipGroupDecoration: [{
type: Input
}], hasDetails: [{
type: Input
}], totalColumnsCount: [{
type: Input
}], hasGroupHeaderColumn: [{
type: Input
}], groupHeaderColumns: [{
type: Input
}], columns: [{
type: Input
}], groups: [{
type: Input
}], groupItemClass: [{
type: HostBinding,
args: ['class.k-grouping-row']
}], tableGroupRowClass: [{
type: HostBinding,
args: ['class.k-table-group-row']
}] } });