@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
317 lines (316 loc) • 15.3 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, ChangeDetectorRef, ViewChild, EventEmitter, Output, ElementRef, Optional } from '@angular/core';
import { ColumnInfoService } from '../common/column-info.service';
import { EventsOutsideAngularDirective, PrefixTemplateDirective, replaceMessagePlaceholder } from '@progress/kendo-angular-common';
import { arrowRotateCcwIcon, checkIcon, searchIcon } from '@progress/kendo-svg-icons';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { ColumnListComponent } from './column-list.component';
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
import { NgClass } from '@angular/common';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { ColumnMenuService } from './column-menu.service';
import { ContextService } from '../common/provider.service';
import { filterBy } from '@progress/kendo-data-query';
import * as i0 from "@angular/core";
import * as i1 from "../common/column-info.service";
import * as i2 from "../common/provider.service";
/**
* @hidden
*/
export class ColumnChooserContentComponent {
cdr;
columnInfoService;
ctx;
resetButton;
applyButton;
columnList;
filterInput;
filterable = true;
showSelectAll = true;
showCheckedCount = true;
allowHideAll = false;
autoSync = false;
actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
closeOnReset = true;
set columns(value) {
this._columns = value;
}
get columns() {
return this._columns;
}
isLast;
isExpanded;
service;
close = new EventEmitter();
get selectedItemsText() {
const count = this.columnList?.checkedCheckboxesLength || 0;
const localizedMessage = this.messageFor('columnChooserSelectedColumnsCount');
return replaceMessagePlaceholder(localizedMessage, 'selectedColumnsCount', count.toString());
}
get actionSheetOpened() {
return this.ctx?.grid?.isActionSheetExpanded;
}
searchIcon = searchIcon;
checkIcon = checkIcon;
arrowRotateCcwIcon = arrowRotateCcwIcon;
applyText;
resetText;
filteredColumns = [];
isFiltered = false;
_columns = [];
constructor(cdr, columnInfoService, ctx) {
this.cdr = cdr;
this.columnInfoService = columnInfoService;
this.ctx = ctx;
}
ngOnInit() {
this.applyText = this.ctx?.localization.get('columnsApply');
this.resetText = this.ctx?.localization.get('columnsReset');
}
ngAfterViewInit() {
this.filteredColumns = this.columnInfoService?.leafNamedColumns.filter(column => {
if (column.includeInChooser !== false) {
column.initiallyChecked = column.currentlyChecked = !column.hidden;
return true;
}
return false;
});
this.cdr.detectChanges();
}
ngAfterViewChecked() {
this.columnList.resetButton = this.resetButton;
this.columnList.applyButton = this.applyButton;
this.columnList.filterInput = this.filterInput;
}
onFilter(value) {
this.isFiltered = value.length > 0;
this.showSelectAll = !this.isFiltered;
const filterDescriptor = {
field: 'displayTitle',
operator: 'contains',
value: value
};
this.filteredColumns = filterBy(this.columnInfoService?.leafNamedColumns, filterDescriptor);
this.cdr.detectChanges();
this.columnList.listNavigationService.activeIndex = 0;
this.columnList.listNavigationService.items = this.columnList.checkboxes?.toArray();
}
messageFor = token => this.ctx?.localization.get(token);
onChange(changed) {
this.cdr.markForCheck();
this.columnInfoService?.changeVisibility(changed);
}
applyChanges() {
this.columnList.applyChanges();
this.close.emit();
}
cancelChanges() {
this.columnList.cancelChanges();
if (this.closeOnReset) {
this.close.emit();
}
}
onTab(e) {
if (e.key === 'Tab' && !e.shiftKey) {
this.columnList.listNavigationService.toggle(this.columnList.listNavigationService.activeIndex, true);
e.preventDefault();
}
if (e.key === 'Tab' && e.shiftKey && !this.service) {
this.columnList.resetButton?.nativeElement.focus();
e.preventDefault();
}
}
onApplyButtonKeydown(e) {
if (e.key === 'Tab') {
this.columnList.focusActiveColumn(e);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnChooserContentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ColumnInfoService, optional: true }, { token: i2.ContextService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnChooserContentComponent, isStandalone: true, selector: "kendo-grid-column-chooser-content", inputs: { filterable: "filterable", showSelectAll: "showSelectAll", showCheckedCount: "showCheckedCount", allowHideAll: "allowHideAll", autoSync: "autoSync", actionsClass: "actionsClass", closeOnReset: "closeOnReset", columns: "columns", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: `
<form class="k-filter-menu">
<div class="k-filter-menu-container">
(filterable) {
<kendo-textbox
#filterInput
class="k-searchbox"
(valueChange)="onFilter($event)"
[kendoEventsOutsideAngular]="{'keydown': onTab}"
[scope]="this"
>
<ng-template kendoPrefixTemplate>
<kendo-icon-wrapper
[name]="'search'"
[svgIcon]="searchIcon">
</kendo-icon-wrapper>
</ng-template>
</kendo-textbox>
}
<kendo-grid-columnlist
#columnList
[columns]="columns"
[filteredColumns]="filteredColumns"
[ariaLabel]="messageFor('columns')"
[showSelectAll]="showSelectAll"
[isLast]="isLast"
[isFiltered]="isFiltered"
[filterable]="filterable"
[isExpanded]="isExpanded"
[service]="service"
[applyText]="messageFor('columnsApply')"
[resetText]="messageFor('columnsReset')"
[autoSync]="autoSync"
[allowHideAll]="allowHideAll"
(columnChange)="onChange($event)"
>
</kendo-grid-columnlist>
(showCheckedCount) {
<div class="k-filter-selected-items">
{{selectedItemsText}}
</div>
}
(!autoSync && !actionSheetOpened) {
<div [ngClass]="actionsClass">
<button
#applyButton
kendoButton
type="button"
icon="check"
[svgIcon]="checkIcon"
themeColor="primary"
(click)="applyChanges()"
(keydown)="onApplyButtonKeydown($event)"
>{{ applyText }}</button>
<button
#resetButton
kendoButton
type="button"
icon="reset"
(keydown.tab)="columnList.onTab($event)"
[svgIcon]="arrowRotateCcwIcon"
(click)="cancelChanges()"
>{{ resetText }}</button>
</div>
}
</div>
</form>
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "filteredColumns", "autoSync", "showSelectAll", "isFiltered", "ariaLabel", "allowHideAll", "applyText", "resetText", "isLast", "isExpanded", "service", "filterable"], outputs: ["reset", "apply", "columnChange"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: PrefixTemplateDirective, selector: "[kendoPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnChooserContentComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-column-chooser-content',
template: `
<form class="k-filter-menu">
<div class="k-filter-menu-container">
(filterable) {
<kendo-textbox
#filterInput
class="k-searchbox"
(valueChange)="onFilter($event)"
[kendoEventsOutsideAngular]="{'keydown': onTab}"
[scope]="this"
>
<ng-template kendoPrefixTemplate>
<kendo-icon-wrapper
[name]="'search'"
[svgIcon]="searchIcon">
</kendo-icon-wrapper>
</ng-template>
</kendo-textbox>
}
<kendo-grid-columnlist
#columnList
[columns]="columns"
[filteredColumns]="filteredColumns"
[ariaLabel]="messageFor('columns')"
[showSelectAll]="showSelectAll"
[isLast]="isLast"
[isFiltered]="isFiltered"
[filterable]="filterable"
[isExpanded]="isExpanded"
[service]="service"
[applyText]="messageFor('columnsApply')"
[resetText]="messageFor('columnsReset')"
[autoSync]="autoSync"
[allowHideAll]="allowHideAll"
(columnChange)="onChange($event)"
>
</kendo-grid-columnlist>
(showCheckedCount) {
<div class="k-filter-selected-items">
{{selectedItemsText}}
</div>
}
(!autoSync && !actionSheetOpened) {
<div [ngClass]="actionsClass">
<button
#applyButton
kendoButton
type="button"
icon="check"
[svgIcon]="checkIcon"
themeColor="primary"
(click)="applyChanges()"
(keydown)="onApplyButtonKeydown($event)"
>{{ applyText }}</button>
<button
#resetButton
kendoButton
type="button"
icon="reset"
(keydown.tab)="columnList.onTab($event)"
[svgIcon]="arrowRotateCcwIcon"
(click)="cancelChanges()"
>{{ resetText }}</button>
</div>
}
</div>
</form>
`,
standalone: true,
imports: [NgClass, ButtonComponent, ColumnListComponent, TextBoxComponent, PrefixTemplateDirective, IconWrapperComponent, EventsOutsideAngularDirective]
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ColumnInfoService, decorators: [{
type: Optional
}] }, { type: i2.ContextService, decorators: [{
type: Optional
}] }], propDecorators: { resetButton: [{
type: ViewChild,
args: ['resetButton']
}], applyButton: [{
type: ViewChild,
args: ['applyButton']
}], columnList: [{
type: ViewChild,
args: ['columnList']
}], filterInput: [{
type: ViewChild,
args: ['filterInput']
}], filterable: [{
type: Input
}], showSelectAll: [{
type: Input
}], showCheckedCount: [{
type: Input
}], allowHideAll: [{
type: Input
}], autoSync: [{
type: Input
}], actionsClass: [{
type: Input
}], closeOnReset: [{
type: Input
}], columns: [{
type: Input
}], isLast: [{
type: Input
}], isExpanded: [{
type: Input
}], service: [{
type: Input
}], close: [{
type: Output
}] } });