@progress/kendo-angular-treelist
Version:
Kendo UI TreeList for Angular - Display hierarchical data in an Angular tree grid view that supports sorting, filtering, paging, and much more.
166 lines (165 loc) • 7.15 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 { EditTemplateDirective } from '../editing/edit-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 { OptionChangesService } from '../common/option-changes.service';
import * as i0 from "@angular/core";
import * as i1 from "./column-base";
import * as i2 from "../common/option-changes.service";
/**
* @hidden
*/
export function isColumnComponent(column) {
return isPresent(column.field);
}
/**
* Represents a column in the TreeList. Use this component to define a data-bound column.
*
* @example
* ```html
* <kendo-treelist [kendoTreeListFlatBinding]="data" ...>
* <kendo-treelist-column field="name" title="Name"></kendo-treelist-column>
* <kendo-treelist-column field="title" title="Title"></kendo-treelist-column>
* </kendo-treelist>
* ```
* @remarks
* Supported children components are:
* {@link StringFilterCellComponent},
* {@link NumericFilterCellComponent},
* {@link BooleanFilterCellComponent},
* {@link DateFilterCellComponent},
* {@link StringFilterMenuComponent},
* {@link NumericFilterMenuComponent},
* {@link BooleanFilterMenuComponent},
* {@link DateFilterMenuComponent},
* {@link FilterCellOperatorsComponent}.
*/
export class ColumnComponent extends ColumnBase {
/**
* Specifies if the expanded indicator appears in the column.
*/
expandable;
/**
* Sets the field to which the column is bound.
*/
field;
/**
* Sets the format applied to the value before display. For supported date and number formats, see the [Column Formats](slug:formats_columns_treelist) article.
*/
format;
/**
* Allows the column headers to be clicked and the `sortChange` event emitted. You must handle the `sortChange` event and sort the data.
* @default true
*/
sortable = true;
/**
* Sets the editor type ([see example]({% slug editing_reactive_forms_treelist %}#toc-setup)). Used when the column enters edit mode. [See example](slug:editing_reactive_forms_treelist).
* @default 'text'
*/
editor = 'text';
/**
* Sets the filter type displayed inside the filter row.
* @default 'text'
*/
filter = 'text';
/**
* Specifies if a filter UI appears for this column.
* @default true
*/
filterable = true;
/**
* Specifies if the column is editable.
* @default true
*/
editable = true;
template;
editTemplate;
filterCellTemplate;
filterMenuTemplate;
constructor(parent, optionChanges) {
super(parent, optionChanges);
}
get templateRef() {
return this.template ? this.template.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;
}
/**
* @hidden
*/
get isEditable() {
return this.editable !== false;
}
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.OptionChangesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-treelist-column", inputs: { expandable: "expandable", field: "field", format: "format", sortable: "sortable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
{
provide: ColumnBase,
useExisting: forwardRef(() => ColumnComponent)
}
], queries: [{ propertyName: "template", first: true, predicate: CellTemplateDirective, 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-treelist-column',
template: ``,
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.ColumnBase, decorators: [{
type: SkipSelf
}, {
type: Host
}, {
type: Optional
}] }, { type: i2.OptionChangesService }]; }, propDecorators: { expandable: [{
type: Input
}], field: [{
type: Input
}], format: [{
type: Input
}], sortable: [{
type: Input
}], editor: [{
type: Input
}], filter: [{
type: Input
}], filterable: [{
type: Input
}], editable: [{
type: Input
}], template: [{
type: ContentChild,
args: [CellTemplateDirective, { static: false }]
}], editTemplate: [{
type: ContentChild,
args: [EditTemplateDirective, { static: false }]
}], filterCellTemplate: [{
type: ContentChild,
args: [FilterCellTemplateDirective, { static: false }]
}], filterMenuTemplate: [{
type: ContentChild,
args: [FilterMenuTemplateDirective, { static: false }]
}] } });