@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
231 lines (230 loc) • 9.95 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, Input, NgZone, Renderer2, ChangeDetectorRef, ViewChild } from '@angular/core';
import { PopupService } from '@progress/kendo-angular-popup';
import { ColumnInfoService } from '../common/column-info.service';
import { closest } from '../rendering/common/dom-queries';
import { Keys, guid, isDocumentAvailable } from '@progress/kendo-angular-common';
import { columnsIcon } from '@progress/kendo-svg-icons';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { ContextService } from '../common/provider.service';
import { ColumnChooserContentComponent } from './column-chooser-content.component';
import * as i0 from "@angular/core";
import * as i1 from "../common/provider.service";
import * as i2 from "../common/column-info.service";
import * as i3 from "@progress/kendo-angular-popup";
/**
* Represents the component for toggling visibility of the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
* To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
* add the component inside the [ToolbarTemplate](slug:toolbartemplate_grid) directive.
*
* @example
* ```html
* <kendo-grid [data]="data">
* <ng-template kendoGridToolbarTemplate>
* <kendo-grid-column-chooser></kendo-grid-column-chooser>
* </ng-template>
* <kendo-grid-column field="ProductID"></kendo-grid-column>
* </kendo-grid>
* ```
*/
export class ColumnChooserComponent {
ctx;
columnInfoService;
popupService;
ngZone;
renderer;
changeDetector;
/**
* Specifies if the changes in the visibility of the column will be immediately applied.
*
* @default false
*/
autoSync = false;
/**
* Specifies if the column chooser displays a search box.
*
* @default true
*/
filterable = true;
/**
* Specifies if the column chooser displays a select all checkbox.
*
* @default true
*/
showSelectAll = true;
/**
* Specifies if all columns can be hidden.
*
* @default true
*/
allowHideAll = true;
anchor;
get columns() {
return this.columnInfoService.leafNamedColumns;
}
columnsIcon = columnsIcon;
popupRef;
popupId;
closeClick;
escapeListener;
constructor(ctx, columnInfoService, popupService, ngZone, renderer, changeDetector) {
this.ctx = ctx;
this.columnInfoService = columnInfoService;
this.popupService = popupService;
this.ngZone = ngZone;
this.renderer = renderer;
this.changeDetector = changeDetector;
}
ngOnDestroy() {
this.close();
}
/**
* @hidden
*/
messageFor = token => this.ctx.localization.get(token);
/**
* @hidden
*/
toggle(anchor, template) {
if (!this.popupRef) {
const direction = this.ctx.localization.rtl ? 'right' : 'left';
this.popupRef = this.popupService.open({
anchor: anchor.element,
content: template,
positionMode: 'absolute',
anchorAlign: { vertical: 'bottom', horizontal: direction },
popupAlign: { vertical: 'top', horizontal: direction }
});
const popupElement = this.popupRef?.popupElement;
if (popupElement) {
const popupId = `k-${guid()}`;
const popupAriaElement = popupElement.querySelector('.k-popup');
this.ngZone.runOutsideAngular(() => {
this.escapeListener = this.renderer.listen(popupAriaElement, 'keydown', (e) => {
if (e.code === Keys.Escape) {
this.close(true);
}
});
});
this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
this.renderer.setAttribute(popupAriaElement, 'id', popupId);
this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
this.popupId = popupId;
}
if (!isDocumentAvailable()) {
return;
}
this.ngZone.runOutsideAngular(() => this.closeClick = this.renderer.listen('document', 'click', ({ target }) => {
if (!closest(target, node => node === this.popupRef.popupElement || node === anchor.element)) {
this.ngZone.run(() => {
this.close();
});
}
}));
}
else {
this.close();
}
}
/**
* @hidden
*/
onChange(changed) {
this.changeDetector.markForCheck();
this.columnInfoService.changeVisibility(changed);
}
/**
* @hidden
*/
close(focusAnchor = false) {
if (this.popupRef) {
this.popupRef.close();
this.popupRef = null;
this.changeDetector.markForCheck();
this.escapeListener?.();
}
this.detachClose();
focusAnchor && this.anchor.element.focus();
}
detachClose() {
if (this.closeClick) {
this.closeClick();
this.closeClick = null;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i3.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnChooserComponent, isStandalone: true, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", filterable: "filterable", showSelectAll: "showSelectAll", allowHideAll: "allowHideAll" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }], ngImport: i0, template: `
<button #anchor
kendoButton
type="button"
(click)="toggle(anchor, template)"
fillMode="flat"
[attr.title]="messageFor('columns')"
icon="columns"
[svgIcon]="columnsIcon"
[attr.aria-haspopup]="'dialog'"
[attr.aria-expanded]="!!(popupRef)"
[attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
<ng-template #template>
<kendo-grid-column-chooser-content
[columns]="columns"
[autoSync]="autoSync"
[filterable]="filterable"
[showSelectAll]="showSelectAll"
[closeOnReset]="false"
[isLast]="true"
[allowHideAll]="allowHideAll"
(close)="close(true)"
>
</kendo-grid-column-chooser-content>
</ng-template>
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnChooserComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-column-chooser',
template: `
<button #anchor
kendoButton
type="button"
(click)="toggle(anchor, template)"
fillMode="flat"
[attr.title]="messageFor('columns')"
icon="columns"
[svgIcon]="columnsIcon"
[attr.aria-haspopup]="'dialog'"
[attr.aria-expanded]="!!(popupRef)"
[attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
<ng-template #template>
<kendo-grid-column-chooser-content
[columns]="columns"
[autoSync]="autoSync"
[filterable]="filterable"
[showSelectAll]="showSelectAll"
[closeOnReset]="false"
[isLast]="true"
[allowHideAll]="allowHideAll"
(close)="close(true)"
>
</kendo-grid-column-chooser-content>
</ng-template>
`,
standalone: true,
imports: [ButtonComponent, ColumnChooserContentComponent]
}]
}], ctorParameters: () => [{ type: i1.ContextService }, { type: i2.ColumnInfoService }, { type: i3.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { autoSync: [{
type: Input
}], filterable: [{
type: Input
}], showSelectAll: [{
type: Input
}], allowHideAll: [{
type: Input
}], anchor: [{
type: ViewChild,
args: ['anchor']
}] } });