@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
191 lines (190 loc) • 9.29 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 { forwardRef, Component, Input, ContentChild, SkipSelf, Host, Optional } from '@angular/core';
import { CellTemplateDirective } from '../rendering/cell-template.directive';
import { GroupHeaderTemplateDirective } from '../grouping/group-header-template.directive';
import { GroupHeaderColumnTemplateDirective } from '../grouping/group-header-column-template.directive';
import { EditTemplateDirective } from '../editing/edit-template.directive';
import { GroupFooterTemplateDirective } from '../grouping/group-footer-template.directive';
import { ColumnBase } from './column-base';
import { isPresent } from '../utils';
import { FilterCellTemplateDirective } from '../filtering/cell/filter-cell-template.directive';
import { FilterMenuTemplateDirective } from '../filtering/menu/filter-menu-template.directive';
import { IdService } from '../common/id.service';
import * as i0 from "@angular/core";
import * as i1 from "./column-base";
import * as i2 from "../common/id.service";
/**
* @hidden
*/
export function isColumnComponent(column) {
return isPresent(column?.field);
}
/**
* Represents a column in the Grid.
*
* Use the `kendo-grid-column` component to define columns in the Grid.
*
* @example
* ```html
* <kendo-grid [data]="gridData">
* <kendo-grid-column field="ProductID" title="Product ID"></kendo-grid-column>
* <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
* <kendo-grid-column field="UnitPrice" title="Unit Price"></kendo-grid-column>
* </kendo-grid>
* ```
* @remarks
* Supported children components are: {@link StringFilterCellComponent}, {@link NumericFilterCellComponent}, {@link BooleanFilterCellComponent}, {@link DateFilterCellComponent}, {@link StringFilterMenuComponent}, {@link NumericFilterMenuComponent}, {@link BooleanFilterMenuComponent}, {@link DateFilterMenuComponent}, {@link FilterCellOperatorsComponent}, {@link ColumnMenuAutoSizeAllColumnsComponent}, {@link ColumnMenuAutoSizeColumnComponent}, {@link ColumnMenuChooserComponent}, {@link ColumnMenuComponent}, {@link ColumnMenuFilterComponent}, {@link ColumnMenuItemComponent}, {@link ColumnMenuLockComponent}, {@link ColumnMenuPositionComponent}, {@link ColumnMenuSortComponent}, {@link ColumnMenuStickComponent}.
*/
export class ColumnComponent extends ColumnBase {
/**
* Sets the field that the column binds to.
*/
field;
/**
* Sets the format for displaying the column value.
* For supported date and number formats, see the [Column Formats](slug:formats_columns_grid) article.
*/
format;
/**
* Enables sorting when the user clicks the column header. [See example](slug:sorting_grid).
* Emits the `sortChange` event.
*
* @default true
*/
sortable = true;
/**
* Allows dragging the column to the group panel.
* Set to `false` to group by this column only through the Grid API.
*
* @default true
*/
groupable = true;
/**
* Sets the editor type for the column. [See example](slug:inline_editing_grid#toc-using-reactive-forms).
* Used when the column enters edit mode.
*
* @default 'text'
*/
editor = 'text';
/**
* Sets the filter type for the filter row UI. [See example](slug:filtering_grid#toc-filter-data-types).
*
* @default 'text'
*/
filter = 'text';
/**
* Shows or hides the filter UI for this column. [See example](slug:filtering_grid).
*
* @default true
*/
filterable = true;
/**
* Sets whether the column is editable. [See example](slug:make_fields_uneditable_grid).
*
* @default true
*/
editable = true;
template;
groupHeaderTemplate;
groupHeaderColumnTemplate;
groupFooterTemplate;
editTemplate;
filterCellTemplate;
filterMenuTemplate;
constructor(parent, idService) {
super(parent, idService);
}
get templateRef() {
return this.template ? this.template.templateRef : undefined;
}
get groupHeaderTemplateRef() {
return this.groupHeaderTemplate ? this.groupHeaderTemplate.templateRef : undefined;
}
get groupHeaderColumnTemplateRef() {
return this.groupHeaderColumnTemplate ? this.groupHeaderColumnTemplate.templateRef : undefined;
}
get groupFooterTemplateRef() {
return this.groupFooterTemplate ? this.groupFooterTemplate.templateRef : undefined;
}
get editTemplateRef() {
return this.editTemplate ? this.editTemplate.templateRef : undefined;
}
get filterCellTemplateRef() {
return this.filterCellTemplate ? this.filterCellTemplate.templateRef : undefined;
}
get filterMenuTemplateRef() {
return this.filterMenuTemplate ? this.filterMenuTemplate.templateRef : undefined;
}
get displayTitle() {
return this.title === undefined ? this.field : this.title;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }, { token: i2.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
{
provide: ColumnBase,
useExisting: forwardRef(() => ColumnComponent)
}
], queries: [{ propertyName: "template", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: GroupHeaderTemplateDirective, descendants: true }, { propertyName: "groupHeaderColumnTemplate", first: true, predicate: GroupHeaderColumnTemplateDirective, descendants: true }, { propertyName: "groupFooterTemplate", first: true, predicate: GroupFooterTemplateDirective, descendants: true }, { propertyName: "editTemplate", first: true, predicate: EditTemplateDirective, descendants: true }, { propertyName: "filterCellTemplate", first: true, predicate: FilterCellTemplateDirective, descendants: true }, { propertyName: "filterMenuTemplate", first: true, predicate: FilterMenuTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, decorators: [{
type: Component,
args: [{
providers: [
{
provide: ColumnBase,
useExisting: forwardRef(() => ColumnComponent)
}
],
selector: 'kendo-grid-column',
template: ``,
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.ColumnBase, decorators: [{
type: SkipSelf
}, {
type: Host
}, {
type: Optional
}] }, { type: i2.IdService, decorators: [{
type: Optional
}] }]; }, propDecorators: { field: [{
type: Input
}], format: [{
type: Input
}], sortable: [{
type: Input
}], groupable: [{
type: Input
}], editor: [{
type: Input
}], filter: [{
type: Input
}], filterable: [{
type: Input
}], editable: [{
type: Input
}], template: [{
type: ContentChild,
args: [CellTemplateDirective, { static: false }]
}], groupHeaderTemplate: [{
type: ContentChild,
args: [GroupHeaderTemplateDirective, { static: false }]
}], groupHeaderColumnTemplate: [{
type: ContentChild,
args: [GroupHeaderColumnTemplateDirective, { static: false }]
}], groupFooterTemplate: [{
type: ContentChild,
args: [GroupFooterTemplateDirective, { static: false }]
}], editTemplate: [{
type: ContentChild,
args: [EditTemplateDirective, { static: false }]
}], filterCellTemplate: [{
type: ContentChild,
args: [FilterCellTemplateDirective, { static: false }]
}], filterMenuTemplate: [{
type: ContentChild,
args: [FilterMenuTemplateDirective, { static: false }]
}] } });