@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
133 lines (132 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, ElementRef, Input, Renderer2, NgZone, Host, Optional } from '@angular/core';
import { SelectionService } from './selection.service';
import { Keys } from '@progress/kendo-angular-common';
import { CellSelectionAggregateService } from '../aggregates/selection-aggregate.service';
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 "../aggregates/selection-aggregate.service";
import * as i4 from "@progress/kendo-angular-inputs";
/**
* Adds a row-selection checkbox to the Grid.
* Use this directive on a `<kendo-checkbox>` component or `<input type="checkbox">` element inside a cell template.
* When the user clicks the checkbox, the Grid triggers a [`selectionChange`](slug:api_grid_gridcomponent#toc-selectionChange) event.
*
* @example
* ```html
* <kendo-grid>
* <kendo-grid-column>
* <ng-template kendoGridCellTemplate let-rowIndex="rowIndex">
* <input [kendoGridSelectionCheckbox]="rowIndex"/>
* <kendo-checkbox [kendoGridSelectionCheckbox]="rowIndex"></kendo-checkbox>
* </ng-template>
* </kendo-grid-column>
* </kendo-grid>
* ```
* @remarks
* Applied to: {@link CheckBoxComponent}.
*/
export class SelectionCheckboxDirective {
selectionService;
cellSelectionService;
aggregateService;
el;
renderer;
ngZone;
checkbox;
/**
* Sets the index of the `dataItem` to select.
*/
itemIndex;
destroyClick;
destroyKeyDown;
ngAfterContentChecked() {
this.setCheckedState();
}
constructor(selectionService, cellSelectionService, aggregateService, el, renderer, ngZone, checkbox) {
this.selectionService = selectionService;
this.cellSelectionService = cellSelectionService;
this.aggregateService = aggregateService;
this.el = el;
this.renderer = renderer;
this.ngZone = ngZone;
this.checkbox = checkbox;
this.ngZone.runOutsideAngular(() => {
this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
this.destroyKeyDown = this.renderer.listen(this.el.nativeElement, 'keydown', this.onKeyDown.bind(this));
});
}
ngOnDestroy() {
if (this.destroyClick) {
this.destroyClick();
}
if (this.destroyKeyDown) {
this.destroyKeyDown();
}
}
onClick(event) {
const nonSelectableRow = this.selectionService.nonSelectableRows.has(this.itemIndex) || this.cellSelectionService.nonSelectableRows.has(this.itemIndex);
if (nonSelectableRow || this.cellSelectionService.active) {
event.preventDefault();
return;
}
if (this.selectionService.options.enabled) {
this.ngZone.run(() => {
let ev;
const ctrlKey = event.ctrlKey || event.metaKey;
if (event.shiftKey && this.selectionService.options.mode === 'multiple') {
const item = { index: this.itemIndex };
ev = this.selectionService.addAllTo(item, ctrlKey, false, event.shiftKey);
}
else {
ev = this.selectionService.toggleByIndex(this.itemIndex);
}
ev.ctrlKey = event.ctrlKey;
ev.shiftKey = event.shiftKey;
if (this.selectionService.options.cellAggregates) {
ev.cellAggregates = this.aggregateService.onSelectionChange(ev);
}
this.selectionService.changes.emit(ev);
});
}
}
onKeyDown(e) {
if (e.code === Keys.Enter || e.code === Keys.NumpadEnter) {
this.onClick(e);
}
}
/*
* @hidden
*/
setCheckedState() {
const isSelected = this.selectionService.nonSelectableRows.has(this.itemIndex) ? false : this.selectionService.isSelected(this.itemIndex);
if (this.checkbox) {
this.checkbox.checkedState = isSelected;
}
else {
this.renderer.setProperty(this.el.nativeElement, 'checked', isSelected);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i2.CellSelectionService }, { token: i3.CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i4.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoGridSelectionCheckbox]',
standalone: true
}]
}], ctorParameters: () => [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i3.CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i4.CheckBoxComponent, decorators: [{
type: Host
}, {
type: Optional
}] }], propDecorators: { itemIndex: [{
type: Input,
args: ['kendoGridSelectionCheckbox']
}] } });