@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
221 lines (220 loc) • 11.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, ElementRef, EventEmitter, NgZone, Output, QueryList, ViewChildren } from '@angular/core';
import { ContextService } from '../../../common/provider.service';
import { NgFor } from '@angular/common';
import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
import { FilterMenuContainerComponent } from '../../../filtering/menu/filter-menu-container.component';
import { FilterService } from '../../../filtering/filter.service';
import { ColumnMenuItemComponent } from '../../../column-menu/column-menu-item.component';
import { ColumnMenuItemContentTemplateDirective } from '../../../column-menu/column-menu-item-content-template.directive';
import { ColumnInfoService } from '../../../common/column-info.service';
import { cloneFilters } from '../../../common/filter-descriptor-differ';
import { AdaptiveGridService } from '../../../common/adaptiveness.service';
import { take } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../../../filtering/filter.service";
import * as i2 from "../../../common/provider.service";
import * as i3 from "../../../common/column-info.service";
import * as i4 from "../../../common/adaptiveness.service";
/**
* @hidden
*/
export class FilterToolbarToolComponent {
element;
filterService;
ctx;
columnInfoService;
ngZone;
adaptiveGridService;
filterItems;
menuItems;
filterContainers;
close = new EventEmitter();
get hostStyles() {
return {
'maxHeight': '400px',
'overflowX': 'hidden',
'overflowY': 'auto'
};
}
columnMenuService;
columns;
filter;
isFilterApplied(column) {
if (!this.filter?.filters) {
return false;
}
if (Array.isArray(this.filter.filters)) {
for (const filterGroup of this.filter.filters) {
if (filterGroup.filters && Array.isArray(filterGroup.filters)) {
for (const filter of filterGroup.filters) {
if (filter.field === column.field) {
return true;
}
}
}
else if (filterGroup.field === column.field) {
return true;
}
}
}
return false;
}
isItemFocused(filterItem) {
return this.currentFocusedItem === filterItem;
}
onItemFocus(item) {
this.currentFocusedItem = item;
}
onItemFocusOut() {
this.currentFocusedItem = null;
}
currentFocusedItem = null;
subscriptions;
constructor(element, filterService, ctx, columnInfoService, ngZone, adaptiveGridService) {
this.element = element;
this.filterService = filterService;
this.ctx = ctx;
this.columnInfoService = columnInfoService;
this.ngZone = ngZone;
this.adaptiveGridService = adaptiveGridService;
}
ngOnInit() {
this.columns = this.columnInfoService.leafNamedColumns.filter(column => column?.filterable);
this.filter = this.ctx.grid.filter;
this.subscriptions = this.filterService.changes.subscribe(filter => {
this.filter = cloneFilters(filter);
});
}
ngAfterViewInit() {
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
this.filterItems?.get(0)?.nativeElement.focus();
});
}
ngOnDestroy() {
if (this.subscriptions) {
this.subscriptions.unsubscribe();
}
}
navigateView(column) {
if (this.ctx.grid.isActionSheetExpanded && this.adaptiveGridService.viewType === 'filterToolbarTool') {
const componentRef = this.ctx.grid.adaptiveRenderer.filterToolbarToolTemplate.createComponent(FilterMenuContainerComponent);
componentRef.instance.column = this.getColumnComponent(column);
componentRef.instance.filter = this.filter;
this.subscriptions.add(componentRef.instance.close.subscribe(() => {
this.adaptiveGridService.reset();
}));
this.adaptiveGridService.filterMenuContainerComponentRef = componentRef;
this.adaptiveGridService.secondaryView = 'columnFilter';
this.adaptiveGridService.column = this.getColumnComponent(column);
this.ctx.grid.adaptiveRenderer.actionSheet.nextView();
}
}
getColumnComponent(column) {
return column;
}
handleClose(filterItem) {
filterItem.expanded = false;
filterItem.contentState = 'collapsed';
const filterContainer = this.filterContainers.find(container => container.column === filterItem.column);
if (filterContainer) {
// reset the child filter to ensure it is reinitialized based on the global filter on the next open
filterContainer.resetChildFilters();
}
}
toggleItem(event, index) {
const menuItem = this.menuItems.get(index);
if (!menuItem || event.target.closest('.k-filter-menu-container')) {
return;
}
if (menuItem.expanded) {
this.filterContainers.get(index).isExpanded = false;
menuItem.expanded = false;
menuItem.contentState = 'collapsed';
}
else {
this.filterContainers.get(index).isExpanded = true;
menuItem.expanded = true;
menuItem.contentState = 'expanded';
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: i1.FilterService }, { token: i2.ContextService }, { token: i3.ColumnInfoService }, { token: i0.NgZone }, { token: i4.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterToolbarToolComponent, isStandalone: true, selector: "kendo-filter-toolbar-tool", outputs: { close: "close" }, viewQueries: [{ propertyName: "filterItems", predicate: ["filterItem"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["filterItem"], descendants: true }, { propertyName: "filterContainers", predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: `
<div [style]="hostStyles">
<kendo-grid-columnmenu-item *ngFor="let column of columns; let i = index"
class="k-columnmenu-item-wrapper" #filterItem
role="button"
tabindex="0"
[column]="getColumnComponent(column)"
[text]="column.title || getColumnComponent(column).field"
(focus)="onItemFocus(filterItem)"
(focusout)="onItemFocusOut()"
(keydown.enter)="toggleItem($event, i)"
[indicatorIcon]="isFilterApplied(column)"
(itemClick)="navigateView(getColumnComponent(column))"
[expanded]="false"
[focused]="isItemFocused(filterItem)">
<ng-template kendoGridColumnMenuItemContentTemplate>
<kendo-grid-filter-menu-container
#filterContainer
(keydown.shift.tab)="$event.stopImmediatePropagation()"
[column]="getColumnComponent(column)"
[filter]="filter"
[isExpanded]="false"
(close)="handleClose(filterItem)">
</kendo-grid-filter-menu-container>
</ng-template>
</kendo-grid-columnmenu-item>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolbarToolComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-filter-toolbar-tool',
template: `
<div [style]="hostStyles">
<kendo-grid-columnmenu-item *ngFor="let column of columns; let i = index"
class="k-columnmenu-item-wrapper" #filterItem
role="button"
tabindex="0"
[column]="getColumnComponent(column)"
[text]="column.title || getColumnComponent(column).field"
(focus)="onItemFocus(filterItem)"
(focusout)="onItemFocusOut()"
(keydown.enter)="toggleItem($event, i)"
[indicatorIcon]="isFilterApplied(column)"
(itemClick)="navigateView(getColumnComponent(column))"
[expanded]="false"
[focused]="isItemFocused(filterItem)">
<ng-template kendoGridColumnMenuItemContentTemplate>
<kendo-grid-filter-menu-container
#filterContainer
(keydown.shift.tab)="$event.stopImmediatePropagation()"
[column]="getColumnComponent(column)"
[filter]="filter"
[isExpanded]="false"
(close)="handleClose(filterItem)">
</kendo-grid-filter-menu-container>
</ng-template>
</kendo-grid-columnmenu-item>
</div>
`,
standalone: true,
imports: [NgFor, KENDO_BUTTON, FilterMenuContainerComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FilterService }, { type: i2.ContextService }, { type: i3.ColumnInfoService }, { type: i0.NgZone }, { type: i4.AdaptiveGridService }]; }, propDecorators: { filterItems: [{
type: ViewChildren,
args: ['filterItem', { read: ElementRef }]
}], menuItems: [{
type: ViewChildren,
args: ['filterItem']
}], filterContainers: [{
type: ViewChildren,
args: ['filterContainer']
}], close: [{
type: Output
}] } });