@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
431 lines (430 loc) • 15.4 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 { Input, ContentChild, ContentChildren, QueryList, Component, isDevMode } from '@angular/core';
import { HeaderTemplateDirective } from '../rendering/header/header-template.directive';
import { FooterTemplateDirective } from '../rendering/footer/footer-template.directive';
import { ColumnMenuTemplateDirective } from '../column-menu/column-menu-template.directive';
import { IdService } from '../common/id.service';
import { ColumnConfigurationErrorMessages } from '../common/error-messages';
import { defaultCellRowSpan } from '../utils';
import * as i0 from "@angular/core";
import * as i1 from "../common/id.service";
/**
* @hidden
*/
export const isSpanColumn = column => column.isSpanColumn;
/**
* @hidden
*/
export const isCheckboxColumn = column => column.isCheckboxColumn;
/**
* @hidden
*/
export const isRowReorderColumn = column => column.isRowReorderColumn;
const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
/**
* The base class for the column components of the Grid.
*/
export class ColumnBase {
parent;
/**
* @hidden
*/
isReordered;
/**
* @hidden
*/
initialMaxResizableWidth;
/**
* @hidden
*/
initialMinResizableWidth;
/**
* @hidden
*/
matchesMedia = true;
/**
* The column index after reordering. The `orderIndex` is a read-only property. Setting this field does not affect column order.
*
* @default 0
*/
orderIndex = 0;
/**
* @hidden
*/
set leafIndex(value) {
this._leafIndex = value;
}
/**
* @hidden
*/
get leafIndex() {
return this._leafIndex;
}
_leafIndex;
/**
* @hidden
*/
isColumnGroup = false;
/**
* @hidden
*/
isSpanColumn = false;
/**
* Indicates whether the column is resizable.
* @default true
*/
resizable = true;
/**
* Indicates whether the column is reorderable.
* @default true
*/
reorderable = true;
/**
* The width (in pixels) below which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
* The `autoFitColumn` and `autoFitColumns` methods have higher priority.
* @default 10
*/
minResizableWidth = 10;
/**
* The width (in pixels) above which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
* By default, the maximum width is not restricted.
* The `autoFitColumn` and `autoFitColumns` methods have higher priority.
*/
maxResizableWidth;
/**
* The title of the column.
*/
title;
/**
* The width of the column (in pixels).
*/
set width(value) {
if (typeof value === 'string') {
const parsedValue = this._width = parseInt(value, 10);
if (isDevMode()) {
console.warn(ColumnConfigurationErrorMessages.width(value, parsedValue));
}
}
else {
this._width = value;
}
}
get width() { return this._width; }
/**
* Indicates whether the column will be resized during initialization so that it fits its header and row content.
*/
autoSize;
/**
* Toggles the locked (frozen) state of the columns ([more information and example]({% slug locked_columns_grid %})).
*
* @default false
*
*/
set locked(value) {
this._locked = value;
}
get locked() {
return this._locked;
}
_locked = false;
/**
* Determines whether the column will be always visible when scrolling the Grid horizontally.
*
* @default false
*/
sticky = false;
/**
* Sets the visibility of the column ([see example](slug:hidden_columns_grid#toc-using-the-built-in-options)).
*
* @default false
*/
hidden;
/**
* Sets the condition that needs to be satisfied for a column to remain visible ([see example]({% slug styling_responsive_grid %}#toc-columns)).
* If you set the `hidden` property, the behavior of `media` is overridden.
*
* Accepts the device identifiers that are [available in Bootstrap 4](https://v4-alpha.getbootstrap.com/layout/grid/#grid-options)
* ([see example](slug:styling_responsive_grid)):
*/
media;
/**
* Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
* @default true
*/
lockable = true;
/**
* Specifies if the column can be stuck or unstuck from the column menu.
* @default true
*/
stickable = true;
/**
* Specifies if the column menu will be shown for the column.
* @default true
*/
columnMenu = true;
/**
* Specifies if the column will be included in the column-chooser list.
* @default true
*/
includeInChooser = true;
/**
* Allows setting the `role` attribute for the table cells (excluding the footer and header ones) of the column.
* @default "gridcell"
*/
tableCellsRole = 'gridcell';
/**
* Sets the custom styles for the table cells (excluding the footer and header ones) of the column. Under the hood,
* to apply the property, the `style` option uses the
* [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
*
*/
style;
/**
* Sets the custom styles for the header cell of the column. Under the hood, to apply the property,
* the `headerStyle` option uses the
* [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
*
*/
headerStyle;
/**
* Sets the custom styles for the filter row cell. Under the hood, to apply the property,
* the `filterStyle` option uses the
* [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
*
*/
filterStyle;
/**
* Sets the custom styles for the footer cell of the column. Under the hood, to apply the property,
* the `footerStyle` option uses the
* [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
*
*/
footerStyle;
/**
* Sets the custom CSS classes to the column cells. Under the hood, to apply the property, the `class` option uses the
* [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
* To customize header and footer column cells, use the [headerClass]({% slug api_grid_columncomponent %}#toc-headerclass)
* and [footerClass]({% slug api_grid_columncomponent %}#toc-footerclass) inputs.
*
*/
cssClass;
/**
* Sets the custom CSS classes to the column header cell. Under the hood, to apply the property,
* the `headerClass` option uses the
* [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
*
*/
headerClass;
/**
* Sets the custom CSS classes to the filter row cell. Under the hood, to apply the property,
* the `filterClass` option uses the
* [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
*
*/
filterClass;
/**
* Sets the custom CSS classes to the column footer cell. Under the hood, to apply the property,
* the `footerClass` option uses the
* [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
*
*/
footerClass;
/**
* Defines a function that is used to determine the rowspan of each column cell.
* If set to `true`, a default function is used that spans adjacent cells containing equal values.
* Cells have equal values when their data items' values for the respective field are equal.
*/
set cellRowspan(cellRowspan) {
if (isDevMode() && (this.isSpanColumn || this.isColumnGroup)) {
throw new Error(ColumnConfigurationErrorMessages.cellRowspanSpanGroupedColumns);
}
if (cellRowspan) {
const isFunction = typeof cellRowspan === 'function';
const isBoolean = typeof cellRowspan === 'boolean';
if (isDevMode() && !this.field && !isFunction) {
throw new Error(ColumnConfigurationErrorMessages.cellRowspanNonBoundColumns);
}
if (isDevMode() && !(isBoolean || isFunction)) {
throw new Error(ColumnConfigurationErrorMessages.cellRowspan);
}
this._cellRowspan = isBoolean ? defaultCellRowSpan : cellRowspan;
}
}
get cellRowspan() {
return this._cellRowspan;
}
/**
* @hidden
*/
headerTemplates = new QueryList();
/**
* @hidden
*/
footerTemplate;
/**
* @hidden
*/
columnMenuTemplates = new QueryList();
/**
* @hidden
*/
resizeStartWidth;
/**
* @hidden
*/
idService;
/**
* @hidden
*/
_cellRowspan;
/**
* @hidden
*/
implicitWidth;
/**
* @hidden
*/
get level() {
if (this.parent && isSpanColumn(this.parent)) {
return this.parent.level;
}
return this.parent ? this.parent.level + 1 : 0;
}
/**
* @hidden
*/
get isLocked() {
return this.parent ? this.parent.isLocked : this.locked;
}
_width;
/**
* @hidden
*/
get colspan() {
return 1;
}
/**
* @hidden
*/
rowspan(totalColumnLevels) {
return this.level < totalColumnLevels ? (totalColumnLevels - this.level) + 1 : 1;
}
/**
* @hidden
*/
get headerTemplateRef() {
const template = this.headerTemplates.first;
return template ? template.templateRef : undefined;
}
/**
* @hidden
*/
get footerTemplateRef() {
return this.footerTemplate ? this.footerTemplate.templateRef : undefined;
}
/**
* @hidden
*/
get columnMenuTemplateRef() {
const template = this.columnMenuTemplates.first;
return template ? template.templateRef : null;
}
/**
* @hidden
*/
get displayTitle() {
return this.title;
}
/**
* @hidden
*/
get isVisible() {
return !this.hidden && this.matchesMedia;
}
/**
* @hidden
*/
constructor(parent, idService) {
this.parent = parent;
this.idService = idService;
if (parent && idService && parent.idService.gridId() === idService.gridId() && !isColumnContainer(parent)) {
throw new Error(ColumnConfigurationErrorMessages.columnNested);
}
}
ngAfterViewInit() {
this.initialMaxResizableWidth = this.maxResizableWidth;
this.initialMinResizableWidth = this.minResizableWidth;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: i1.IdService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass", cellRowspan: "cellRowspan" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-column-base',
template: ``
}]
}], ctorParameters: function () { return [{ type: ColumnBase }, { type: i1.IdService }]; }, propDecorators: { resizable: [{
type: Input
}], reorderable: [{
type: Input
}], minResizableWidth: [{
type: Input
}], maxResizableWidth: [{
type: Input
}], title: [{
type: Input
}], width: [{
type: Input
}], autoSize: [{
type: Input
}], locked: [{
type: Input
}], sticky: [{
type: Input
}], hidden: [{
type: Input
}], media: [{
type: Input
}], lockable: [{
type: Input
}], stickable: [{
type: Input
}], columnMenu: [{
type: Input
}], includeInChooser: [{
type: Input
}], tableCellsRole: [{
type: Input
}], style: [{
type: Input
}], headerStyle: [{
type: Input
}], filterStyle: [{
type: Input
}], footerStyle: [{
type: Input
}], cssClass: [{
type: Input,
args: ['class']
}], headerClass: [{
type: Input
}], filterClass: [{
type: Input
}], footerClass: [{
type: Input
}], cellRowspan: [{
type: Input
}], headerTemplates: [{
type: ContentChildren,
args: [HeaderTemplateDirective, { descendants: false }]
}], footerTemplate: [{
type: ContentChild,
args: [FooterTemplateDirective, { static: false }]
}], columnMenuTemplates: [{
type: ContentChildren,
args: [ColumnMenuTemplateDirective]
}] } });