@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
132 lines (131 loc) • 6.24 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";
/**
* Represents the row-selection checkbox of the Grid. The directive expects the
* index of the current row as an input parameter. Inside the [`CellTemplateDirective`](slug:api_grid_celltemplatedirective), apply the
* `kendoGridSelectionCheckbox` to a `<kendo-checkbox></kendo-checkbox>` or an `<input type="checkbox"/>` element. When the user clicks the checkbox that is associated
* with the directive, a [selectionChange](slug:api_grid_gridcomponent#toc-selectionChange)
* event is triggered.
*
* @example
* ```html
* <kendo-grid ... >
* <kendo-grid-column>
* <ng-template kendoGridCellTemplate let-rowIndex="rowIndex">
* <input ... [kendoGridSelectionCheckbox]="rowIndex"/>
* </ng-template>
* </kendo-grid-column>
* </kendo-grid>
* ```
*/
export class SelectionCheckboxDirective {
selectionService;
cellSelectionService;
aggregateService;
el;
renderer;
ngZone;
checkbox;
/**
* The current index of the `dataItem` that will be selected.
*/
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.options.cell) {
event.preventDefault();
return;
}
if (this.selectionService.options.enabled) {
this.ngZone.run(() => {
let ev;
const ctrlKey = event.ctrlKey || event.metaKey;
if (event.shiftKey) {
const item = { index: this.itemIndex };
ev = this.selectionService.addAllTo(item, ctrlKey);
}
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.keyCode === Keys.Enter) {
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: "16.2.12", 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: "16.2.12", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoGridSelectionCheckbox]',
standalone: true
}]
}], ctorParameters: function () { return [{ 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']
}] } });