@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
145 lines (144 loc) • 6.23 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 { Directive, Input, Output, EventEmitter, NgZone, Host, Optional, Renderer2, ElementRef } from '@angular/core';
import { SelectionService } from './selection.service';
import { isPresent } from '../utils';
import { hasObservers } from '@progress/kendo-angular-common';
import { CellSelectionService } from './cell-selection.service';
import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
import * as i0 from "@angular/core";
import * as i1 from "./selection.service";
import * as i2 from "./cell-selection.service";
import * as i3 from "@progress/kendo-angular-inputs";
/**
* Represents the select-all checkbox feature of the Grid ([see example](slug:grid_selection_persistence#toc-selecting-all-items)).
*
* @example
* ```html
* <input
* type="checkbox"
* kendoCheckBox
* kendoGridSelectAllCheckbox
* [state]="selectAllState"
* (selectAllChange)="onSelectAllChange($event)"
* />
* ```
*/
export class SelectAllCheckboxDirective {
selectionService;
cellSelectionService;
ngZone;
element;
renderer;
checkbox;
/**
* Explicitly overrides the state of the select-all checkbox.
*/
state;
/**
* Fires when the user clicks the `kendoGridSelectAllCheckbox` select-all checkbox
* ([see example](slug:grid_row_selection#toc-select-all-checkbox)).
*/
selectAllChange = new EventEmitter();
destroyClick;
checkboxChange;
stateSet = false;
ngAfterContentChecked() {
this.setState();
}
ngOnChanges() {
this.stateSet = true;
}
constructor(selectionService, cellSelectionService, ngZone, element, renderer, checkbox) {
this.selectionService = selectionService;
this.cellSelectionService = cellSelectionService;
this.ngZone = ngZone;
this.element = element;
this.renderer = renderer;
this.checkbox = checkbox;
this.ngZone.runOutsideAngular(() => {
if (this.checkbox) {
this.checkboxChange = this.checkbox.checkedStateChange.subscribe(this.onClick.bind(this));
}
else {
this.destroyClick = this.renderer.listen(this.element.nativeElement, 'click', this.onClick.bind(this));
}
});
}
ngOnDestroy() {
if (this.checkboxChange) {
this.checkboxChange.unsubscribe();
}
if (this.destroyClick) {
this.destroyClick();
}
}
/**
* @hidden
*/
onClick() {
const isIndeterminateState = this.checkbox?.checkedState === 'indeterminate' || this.element.nativeElement.indeterminate;
const isCheckedState = this.checkbox?.checkedState === true || this.element.nativeElement.checked;
const checkboxState = isCheckedState ? 'checked' : isIndeterminateState ? 'indeterminate' : 'unchecked';
const isChecked = this.selectionService.hasNonSelectable ? !this.selectionService.selectAllChecked : isCheckedState;
const options = this.selectionService.options;
const enabledAndMultiple = options.enabled && options.mode === 'multiple' && !this.cellSelectionService.active;
const shouldEmitSelectAll = hasObservers(this.selectAllChange);
if (enabledAndMultiple || shouldEmitSelectAll) {
this.ngZone.run(() => {
if (enabledAndMultiple) {
this.selectionService.updateAll(isChecked);
}
if (shouldEmitSelectAll) {
this.selectAllChange.emit(checkboxState);
}
});
}
}
/**
* @hidden
*/
setState() {
const state = this.stateSet ? this.stateToBool() : this.selectionService.selectAllState;
if (this.checkbox) {
this.checkbox.checkedState = isPresent(state) ? state : 'indeterminate';
}
else {
const elem = this.element.nativeElement;
this.renderer.setProperty(elem, 'indeterminate', !isPresent(state));
this.renderer.setProperty(elem, 'checked', isPresent(state) ? state : false);
}
}
/**
* @hidden
*/
stateToBool() {
switch (this.state) {
case 'checked':
return true;
case 'unchecked':
return false;
default:
return undefined;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i2.CellSelectionService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoGridSelectAllCheckbox]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.CheckBoxComponent, decorators: [{
type: Host
}, {
type: Optional
}] }]; }, propDecorators: { state: [{
type: Input
}], selectAllChange: [{
type: Output
}] } });