@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
267 lines (264 loc) • 11.5 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 { ColumnInfoService } from './../../common/column-info.service';
import { Component, Input, HostBinding } from '@angular/core';
import { DetailTemplateDirective } from '../details/detail-template.directive';
import { columnsToRender } from '../../columns/column-common';
import { isPresent } from '../../utils';
import { ColumnsContainer } from '../../columns/columns-container';
import { isColumnGroupComponent } from '../../columns/column-group.component';
import { LogicalCellDirective } from '../../navigation/logical-cell.directive';
import { NgClass, NgStyle } from '@angular/common';
import { LogicalRowDirective } from '../../navigation/logical-row.directive';
import { TemplateContextDirective } from '@progress/kendo-angular-common';
import { ContextService } from '../../common/provider.service';
import * as i0 from "@angular/core";
import * as i1 from "./../../common/column-info.service";
import * as i2 from "../../common/provider.service";
/**
* @hidden
*/
export class FooterComponent {
columnInfoService;
ctx;
columns = [];
groups = [];
detailTemplate;
scrollable;
lockedColumnsCount = 0;
logicalRowIndex = 0;
totalColumns;
totalColumnsCount = 0;
get footerClass() {
return !this.scrollable;
}
hostClass = true;
hostRole = 'rowgroup';
constructor(columnInfoService, ctx) {
this.columnInfoService = columnInfoService;
this.ctx = ctx;
}
get columnsToRender() {
return columnsToRender(this.columns || []);
}
// Number of unlocked columns in the next table, if any
get unlockedColumnsCount() {
return this.totalColumnsCount - (this.isStacked ? 0 : this.lockedColumnsCount) - this.columns.length;
}
trackByIndex(index) {
return index;
}
logicalColumnIndex(column) {
const index = column.leafIndex;
if (isPresent(index)) {
return index + (isPresent(this.detailTemplate) ? 1 : 0);
}
return -1;
}
addStickyStyles(column) {
const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
return { ...column.footerStyle, ...stickyStyles };
}
isColumnGroupComponent(column) {
return isColumnGroupComponent(column);
}
get isStacked() {
return this.ctx.grid?.isStacked;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FooterComponent, deps: [{ token: i1.ColumnInfoService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FooterComponent, isStandalone: true, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
<ng-container>
<tr
class="k-footer-template"
kendoGridLogicalRow
[logicalRowIndex]="logicalRowIndex"
[logicalSlaveRow]="lockedColumnsCount > 0 && !isStacked"
[logicalCellsCount]="columns.length"
[logicalSlaveCellsCount]="unlockedColumnsCount"
[totalColumns]="totalColumns"
>
@if (!isStacked) {
@for (g of groups; track g) {
<td
class="k-table-td k-group-cell k-table-group-td"
role="presentation"
>
</td>
}
}
@if (detailTemplate?.templateRef && !isStacked) {
<td
role="presentation"
class="k-table-td k-hierarchy-cell"
>
</td>
}
@if (!isStacked) {
@for (column of columnsToRender; track $index; let columnIndex = $index) {
@if (!isColumnGroupComponent(column)) {
<td
kendoGridLogicalCell
class="k-table-td"
[logicalRowIndex]="logicalRowIndex"
[logicalColIndex]="logicalColumnIndex(column)"
role="gridcell"
aria-selected="false"
[class.k-grid-footer-sticky]="column.sticky"
[ngClass]="column.footerClass"
[ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
<ng-template
[templateContext]="{
templateRef: column.footerTemplateRef,
columnIndex: column.leafIndex,
column: column,
$implicit: column
}">
</ng-template>
</td>
}
}
}
@if (isStacked) {
<td kendoGridLogicalCell
class="k-table-td"
[logicalRowIndex]="logicalRowIndex"
[logicalColIndex]="detailTemplate ? 1 : 0"
role="gridcell"
aria-selected="false">
<div class="k-grid-column-template">
@for (column of columnsToRender; track $index) {
@if (column.footerTemplateRef) {
<div class="k-column-template-item">
<ng-template
[templateContext]="{
templateRef: column.footerTemplateRef,
columnIndex: column.leafIndex,
column: column,
$implicit: column
}">
</ng-template>
</div>
}
}
</div>
</td>
}
</tr>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FooterComponent, decorators: [{
type: Component,
args: [{
selector: '[kendoGridFooter]',
template: `
<ng-container>
<tr
class="k-footer-template"
kendoGridLogicalRow
[logicalRowIndex]="logicalRowIndex"
[logicalSlaveRow]="lockedColumnsCount > 0 && !isStacked"
[logicalCellsCount]="columns.length"
[logicalSlaveCellsCount]="unlockedColumnsCount"
[totalColumns]="totalColumns"
>
@if (!isStacked) {
@for (g of groups; track g) {
<td
class="k-table-td k-group-cell k-table-group-td"
role="presentation"
>
</td>
}
}
@if (detailTemplate?.templateRef && !isStacked) {
<td
role="presentation"
class="k-table-td k-hierarchy-cell"
>
</td>
}
@if (!isStacked) {
@for (column of columnsToRender; track $index; let columnIndex = $index) {
@if (!isColumnGroupComponent(column)) {
<td
kendoGridLogicalCell
class="k-table-td"
[logicalRowIndex]="logicalRowIndex"
[logicalColIndex]="logicalColumnIndex(column)"
role="gridcell"
aria-selected="false"
[class.k-grid-footer-sticky]="column.sticky"
[ngClass]="column.footerClass"
[ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
<ng-template
[templateContext]="{
templateRef: column.footerTemplateRef,
columnIndex: column.leafIndex,
column: column,
$implicit: column
}">
</ng-template>
</td>
}
}
}
@if (isStacked) {
<td kendoGridLogicalCell
class="k-table-td"
[logicalRowIndex]="logicalRowIndex"
[logicalColIndex]="detailTemplate ? 1 : 0"
role="gridcell"
aria-selected="false">
<div class="k-grid-column-template">
@for (column of columnsToRender; track $index) {
@if (column.footerTemplateRef) {
<div class="k-column-template-item">
<ng-template
[templateContext]="{
templateRef: column.footerTemplateRef,
columnIndex: column.leafIndex,
column: column,
$implicit: column
}">
</ng-template>
</div>
}
}
</div>
</td>
}
</tr>
</ng-container>
`,
standalone: true,
imports: [LogicalRowDirective, LogicalCellDirective, NgClass, NgStyle, TemplateContextDirective]
}]
}], ctorParameters: () => [{ type: i1.ColumnInfoService }, { type: i2.ContextService }], propDecorators: { columns: [{
type: Input
}], groups: [{
type: Input
}], detailTemplate: [{
type: Input
}], scrollable: [{
type: Input
}], lockedColumnsCount: [{
type: Input
}], logicalRowIndex: [{
type: Input
}], totalColumns: [{
type: Input
}], totalColumnsCount: [{
type: Input
}], footerClass: [{
type: HostBinding,
args: ['class.k-grid-footer']
}], hostClass: [{
type: HostBinding,
args: ['class.k-table-tfoot']
}], hostRole: [{
type: HostBinding,
args: ['attr.role']
}] } });