@progress/kendo-angular-grid 17.0.0-develop.43 → 17.0.0-develop.46

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1730967877,
-    version: '17.0.0-develop.43',
+    publishDate: 1730993221,
+    version: '17.0.0-develop.46',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/selection/selectall-checkbox.directive.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 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 } from '@angular/core';
+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';
@@ -30,6 +30,8 @@ export class SelectAllCheckboxDirective {
     selectionService;
     cellSelectionService;
     ngZone;
+    element;
+    renderer;
     checkbox;
     /**
      * Explicitly overrides the state of the select-all checkbox.
@@ -41,6 +43,7 @@ export class SelectAllCheckboxDirective {
      */
     selectAllChange = new EventEmitter();
     destroyClick;
+    checkboxChange;
     stateSet = false;
     ngAfterContentChecked() {
         this.setState();
@@ -48,27 +51,38 @@ export class SelectAllCheckboxDirective {
     ngOnChanges() {
         this.stateSet = true;
     }
-    constructor(selectionService, cellSelectionService, ngZone, checkbox) {
+    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(() => {
-            this.destroyClick = this.checkbox.checkedStateChange.subscribe(this.onClick.bind(this));
+            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.unsubscribe();
+            this.destroyClick();
         }
     }
     /**
      * @hidden
      */
     onClick() {
-        const uncheckedState = this.checkbox.checkedState === 'indeterminate' ? 'indeterminate' : 'unchecked';
-        const checkboxState = this.checkbox.checkedState ? 'checked' : uncheckedState;
-        const isChecked = this.selectionService.hasNonSelectable ? !this.selectionService.selectAllChecked : this.checkbox.checkedState === true;
+        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);
@@ -88,7 +102,14 @@ export class SelectAllCheckboxDirective {
      */
     setState() {
         const state = this.stateSet ? this.stateToBool() : this.selectionService.selectAllState;
-        this.checkbox.checkedState = isPresent(state) ? state : 'indeterminate';
+        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
@@ -103,7 +124,7 @@ export class SelectAllCheckboxDirective {
                 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: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    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: [{
@@ -112,7 +133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i0.NgZone }, { type: i3.CheckBoxComponent, decorators: [{
+        }], 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

package/esm2022/selection/selection-checkbox.directive.mjs

@@ -16,7 +16,7 @@ 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 an `<input type="checkbox"/>` element. When the user clicks the checkbox that is associated
+ * `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.
  *
@@ -105,7 +105,12 @@ export class SelectionCheckboxDirective {
      */
     setCheckedState() {
         const isSelected = this.selectionService.nonSelectableRows.has(this.itemIndex) ? false : this.selectionService.isSelected(this.itemIndex);
-        this.checkbox.checkedState = isSelected;
+        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 });

package/fesm2022/progress-kendo-angular-grid.mjs

@@ -15756,6 +15756,8 @@ class SelectAllCheckboxDirective {
     selectionService;
     cellSelectionService;
     ngZone;
+    element;
+    renderer;
     checkbox;
     /**
      * Explicitly overrides the state of the select-all checkbox.
@@ -15767,6 +15769,7 @@ class SelectAllCheckboxDirective {
      */
     selectAllChange = new EventEmitter();
     destroyClick;
+    checkboxChange;
     stateSet = false;
     ngAfterContentChecked() {
         this.setState();
@@ -15774,27 +15777,38 @@ class SelectAllCheckboxDirective {
     ngOnChanges() {
         this.stateSet = true;
     }
-    constructor(selectionService, cellSelectionService, ngZone, checkbox) {
+    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(() => {
-            this.destroyClick = this.checkbox.checkedStateChange.subscribe(this.onClick.bind(this));
+            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.unsubscribe();
+            this.destroyClick();
         }
     }
     /**
      * @hidden
      */
     onClick() {
-        const uncheckedState = this.checkbox.checkedState === 'indeterminate' ? 'indeterminate' : 'unchecked';
-        const checkboxState = this.checkbox.checkedState ? 'checked' : uncheckedState;
-        const isChecked = this.selectionService.hasNonSelectable ? !this.selectionService.selectAllChecked : this.checkbox.checkedState === true;
+        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);
@@ -15814,7 +15828,14 @@ class SelectAllCheckboxDirective {
      */
     setState() {
         const state = this.stateSet ? this.stateToBool() : this.selectionService.selectAllState;
-        this.checkbox.checkedState = isPresent(state) ? state : 'indeterminate';
+        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
@@ -15829,7 +15850,7 @@ class SelectAllCheckboxDirective {
                 return undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: i0.NgZone }, { token: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: 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: [{
@@ -15838,7 +15859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.NgZone }, { type: i3.CheckBoxComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.CheckBoxComponent, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -17106,7 +17127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * 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 an `<input type="checkbox"/>` element. When the user clicks the checkbox that is associated
+ * `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.
  *
@@ -17195,7 +17216,12 @@ class SelectionCheckboxDirective {
      */
     setCheckedState() {
         const isSelected = this.selectionService.nonSelectableRows.has(this.itemIndex) ? false : this.selectionService.isSelected(this.itemIndex);
-        this.checkbox.checkedState = isSelected;
+        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: SelectionService }, { token: CellSelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.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 });
@@ -19182,8 +19208,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1730967877,
-    version: '17.0.0-develop.43',
+    publishDate: 1730993221,
+    version: '17.0.0-develop.46',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "17.0.0-develop.43",
+  "version": "17.0.0-develop.46",
   "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -33,27 +33,27 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "17.0.0-develop.43",
-    "@progress/kendo-angular-common": "17.0.0-develop.43",
-    "@progress/kendo-angular-dateinputs": "17.0.0-develop.43",
-    "@progress/kendo-angular-layout": "17.0.0-develop.43",
-    "@progress/kendo-angular-dropdowns": "17.0.0-develop.43",
-    "@progress/kendo-angular-excel-export": "17.0.0-develop.43",
-    "@progress/kendo-angular-icons": "17.0.0-develop.43",
-    "@progress/kendo-angular-inputs": "17.0.0-develop.43",
-    "@progress/kendo-angular-intl": "17.0.0-develop.43",
-    "@progress/kendo-angular-l10n": "17.0.0-develop.43",
-    "@progress/kendo-angular-label": "17.0.0-develop.43",
-    "@progress/kendo-angular-pager": "17.0.0-develop.43",
-    "@progress/kendo-angular-pdf-export": "17.0.0-develop.43",
-    "@progress/kendo-angular-popup": "17.0.0-develop.43",
-    "@progress/kendo-angular-toolbar": "17.0.0-develop.43",
-    "@progress/kendo-angular-utils": "17.0.0-develop.43",
+    "@progress/kendo-angular-buttons": "17.0.0-develop.46",
+    "@progress/kendo-angular-common": "17.0.0-develop.46",
+    "@progress/kendo-angular-dateinputs": "17.0.0-develop.46",
+    "@progress/kendo-angular-layout": "17.0.0-develop.46",
+    "@progress/kendo-angular-dropdowns": "17.0.0-develop.46",
+    "@progress/kendo-angular-excel-export": "17.0.0-develop.46",
+    "@progress/kendo-angular-icons": "17.0.0-develop.46",
+    "@progress/kendo-angular-inputs": "17.0.0-develop.46",
+    "@progress/kendo-angular-intl": "17.0.0-develop.46",
+    "@progress/kendo-angular-l10n": "17.0.0-develop.46",
+    "@progress/kendo-angular-label": "17.0.0-develop.46",
+    "@progress/kendo-angular-pager": "17.0.0-develop.46",
+    "@progress/kendo-angular-pdf-export": "17.0.0-develop.46",
+    "@progress/kendo-angular-popup": "17.0.0-develop.46",
+    "@progress/kendo-angular-toolbar": "17.0.0-develop.46",
+    "@progress/kendo-angular-utils": "17.0.0-develop.46",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.0.0-develop.43",
+    "@progress/kendo-angular-schematics": "17.0.0-develop.46",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/schematics/ngAdd/index.js

@@ -4,14 +4,14 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'GridModule', package: 'grid', peerDependencies: {
             // peer deps of the dropdowns
-            '@progress/kendo-angular-treeview': '17.0.0-develop.43',
-            '@progress/kendo-angular-navigation': '17.0.0-develop.43',
+            '@progress/kendo-angular-treeview': '17.0.0-develop.46',
+            '@progress/kendo-angular-navigation': '17.0.0-develop.46',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '17.0.0-develop.43',
+            '@progress/kendo-angular-dialog': '17.0.0-develop.46',
             // peer dependency of kendo-angular-icons
-            '@progress/kendo-svg-icons': '^3.0.0',
+            '@progress/kendo-svg-icons': '^4.0.0',
             // peer dependency of kendo-angular-layout
-            '@progress/kendo-angular-progressbar': '17.0.0-develop.43'
+            '@progress/kendo-angular-progressbar': '17.0.0-develop.46'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/selection/selectall-checkbox.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { OnDestroy, AfterContentChecked, OnChanges, EventEmitter, NgZone } from '@angular/core';
+import { OnDestroy, AfterContentChecked, OnChanges, EventEmitter, NgZone, Renderer2, ElementRef } from '@angular/core';
 import { SelectionService } from './selection.service';
 import { SelectAllCheckboxState } from './types';
 import { CellSelectionService } from './cell-selection.service';
@@ -26,6 +26,8 @@ export declare class SelectAllCheckboxDirective implements AfterContentChecked,
     private selectionService;
     private cellSelectionService;
     private ngZone;
+    private element;
+    private renderer;
     private checkbox;
     /**
      * Explicitly overrides the state of the select-all checkbox.
@@ -37,10 +39,11 @@ export declare class SelectAllCheckboxDirective implements AfterContentChecked,
      */
     selectAllChange: EventEmitter<SelectAllCheckboxState>;
     private destroyClick;
+    private checkboxChange;
     private stateSet;
     ngAfterContentChecked(): void;
     ngOnChanges(): void;
-    constructor(selectionService: SelectionService, cellSelectionService: CellSelectionService, ngZone: NgZone, checkbox: CheckBoxComponent);
+    constructor(selectionService: SelectionService, cellSelectionService: CellSelectionService, ngZone: NgZone, element: ElementRef, renderer: Renderer2, checkbox: CheckBoxComponent);
     ngOnDestroy(): void;
     /**
      * @hidden
@@ -54,6 +57,6 @@ export declare class SelectAllCheckboxDirective implements AfterContentChecked,
      * @hidden
      */
     private stateToBool;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectAllCheckboxDirective, [null, null, null, { optional: true; host: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectAllCheckboxDirective, [null, null, null, null, null, { optional: true; host: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SelectAllCheckboxDirective, "[kendoGridSelectAllCheckbox]", never, { "state": { "alias": "state"; "required": false; }; }, { "selectAllChange": "selectAllChange"; }, never, never, true, never>;
 }

package/selection/selection-checkbox.directive.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 /**
  * 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 an `<input type="checkbox"/>` element. When the user clicks the checkbox that is associated
+ * `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.
  *