@progress/kendo-angular-treelist 12.0.1-develop.3 → 12.0.1

package/fesm2015/progress-kendo-angular-treelist.mjs

@@ -46,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1683100454,
-    version: '12.0.1-develop.3',
+    publishDate: 1683189615,
+    version: '12.0.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -67,12 +67,16 @@ const packageMetadata = {
  * - `loading`—Specifies if the item children are currently loading.
  * - `rowIndex`—The current row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
  *
- * {% meta height:470 %}
- * {% embed_file data-binding/hierarchy/app.component.ts preview %}
- * {% embed_file data-binding/hierarchy/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/filesystem.ts %}
- * {% endmeta %}
+ * * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <kendo-treelist-column field="ProductName">
+ *     <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">
+ *       Data Row: {{rowIndex}}
+ *     </ng-template>
+ *   </kendo-treelist-column>
+ * </kendo-treelist>
+ *```
  */
 class CellTemplateDirective {
     constructor(templateRef) {
@@ -101,8 +105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * - `column`&mdash;The current column instance.
  * - `dataItem`&mdash;The current data item.
  * - `cellContext`&mdash;An object used to pass context information to built-in directives.
- * - `formGroup`&mdash;The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']).
- * If you use the TreeList inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
+ * - `formGroup`&mdash;The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']). If you use the TreeList inside [Template-Driven Forms](link:site.data.urls.angular['forms']), `formGroup` will be `undefined`.
  * - `isNew`&mdash;The state of the current item.
  * - `rowIndex`&mdash;The current row index. If inside a new item row, `rowIndex` is `-1`.
  */
@@ -134,12 +137,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * - `service`&mdash;Represents the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}).
  * - `column`&mdash;Represents the TreeList column.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template/app.component.ts preview %}
- * {% embed_file column-menu/template/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist ... >
+ *   <ng-template kendoTreeListColumnMenuTemplate let-service="service">
+ *     <kendo-treelist-columnmenu-sort [service]="service">
+ *     </kendo-treelist-columnmenu-sort>
+ *   </ng-template>
+ *   <kendo-treelist-column field="name">
+ *     <ng-template kendoTreeListColumnMenuTemplate let-service="service">
+ *       <kendo-treelist-columnmenu-sort [service]="service">
+ *       </kendo-treelist-columnmenu-sort>
+ *     </ng-template>
+ *   </kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 class ColumnMenuTemplateDirective {
     constructor(templateRef) {
@@ -164,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ([more information and example]({% slug templates_columns_treelist %}#toc-footer-template)).
  * Helps to customize the table footer cell for the column.
  * To define a footer template, nest an `<ng-template>` tag with the
- * [`kendoTreeListFooterTemplate`]({% slug api_treelist_footertemplatedirective %}) directive inside the `<kendo-treelist-column>` tag.
+ * `kendoTreeListFooterTemplate` directive inside the `<kendo-treelist-column>` tag.
  *
  * The template context is set to the aggregate values and the following additional fields are passed:
  * * `aggregates`&mdash;The aggregates for the level items.
@@ -174,13 +186,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * * `items`&mdash;The data items on this level.
  * * `parentItem`&mdash;The parent data item; `null` for root level items.
  *
- *
- * {% meta height:500 %}
- * {% embed_file configuration/footer-template/app.component.ts preview %}
- * {% embed_file configuration/footer-template/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist-column field="name">
+ *   <ng-template kendoTreeListFooterTemplate let-aggregates="aggregates">
+ *     {{ aggregates.name.count }}
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 class FooterTemplateDirective {
     constructor(templateRef) {
@@ -211,12 +224,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * * `column`&mdash;Defines an instance of the [`ColumnComponent`]({% slug api_treelist_columncomponent %}) option.
  * * `columnIndex`&mdash;Defines the current column index.
  *
- * {% meta height:533 %}
- * {% embed_file configuration/header-template/app.component.ts preview %}
- * {% embed_file configuration/header-template/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist-column field="name">
+ *   <ng-template
+ *     kendoTreeListHeaderTemplate
+ *     let-column>
+ *     {{ column.field }}
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 class HeaderTemplateDirective {
     constructor(templateRef) {
@@ -2037,14 +2054,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * appearance of the item that is displayed when no data is present. To define the no-records template,
  * nest an `<ng-template>` tag with the `kendoTreeListNoRecordsTemplate` directive inside `<kendo-treelist>`.
  *
- * > When the locked columns of the TreeList are in use, the template is displayed in the non-locked part of the content.
+ * When the locked columns of the TreeList are in use, the template is displayed in the non-locked part of the content.
  *
- * {% meta height:533 %}
- * {% embed_file configuration/no-records-template/app.component.ts preview %}
- * {% embed_file configuration/no-records-template/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist ... >
+ *   <kendo-treelist-column field="name" ></kendo-treelist-column>
+ *   <ng-template kendoTreeListNoRecordsTemplate>
+ *     No data loaded.
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
  */
 class NoRecordsTemplateDirective {
     constructor(templateRef) {
@@ -2135,7 +2155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the pager template which helps to customize the pager appearance in the TreeList. To define a pager
- * template, nest an `<ng-template>` tag with the `kendoTreeListPagerTemplate` directive inside `<kendo-treelist>`.
+ * template, nest an `<ng-template>` tag with the `kendoTreeListPagerTemplate` directive inside `<kendo-treelist>`. [See example](slug:paging_treelist#toc-pager-template).
  *
  * The template context provides the following fields:
  * * `currentPage`&mdash;The index of the displayed page.
@@ -2144,12 +2164,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * * `total`&mdash;The total number of records.
  * * `totalPages`&mdash;The total number of available pages.
  *
- * {% meta height:470 %}
- * {% embed_file configuration/pager-template-all/app.component.ts preview %}
- * {% embed_file configuration/pager-template-all/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/filesystem.ts %}
- * {% endmeta %}
+ * @example
+ * ```
+ * <kendo-treelist ...>
+ *   <kendo-treelist-column field="type"></kendo-treelist-column>
+ *   <ng-template
+ *     kendoTreeListPagerTemplate
+ *       let-totalPages="totalPages"
+ *       let-currentPage="currentPage">
+ *     <kendo-treelist-pager-prev-buttons></kendo-treelist-pager-prev-buttons>
+ *     <kendo-treelist-pager-next-buttons></kendo-treelist-pager-next-buttons>
+ *     <kendo-treelist-pager-info></kendo-treelist-pager-info>
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
  */
 class PagerTemplateDirective {
     constructor(templateRef) {
@@ -2422,15 +2450,18 @@ class ColumnList {
  * Represents the toolbar template of the TreeList.
  *
  * The template context has the following field:
- * - `position`&mdash;The position at which the toolbar template is rendered. The possible values are "top" and "bottom".
+ * - `position`&mdash;The position at which the toolbar template is rendered. The possible values are `top`, `bottom` and `both`.
  *
  * @example
- * {% meta height:470 %}
- * {% embed_file configuration/toolbar-template/basic/app.component.ts preview %}
- * {% embed_file configuration/toolbar-template/basic/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * ```html
+ * <kendo-treelist ...>
+ *   <ng-template kendoTreeListToolbarTemplate>
+ *     <button kendoTreeListExcelCommand icon="file-excel">
+ *       Export to Excel
+ *     </button>
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
  */
 class ToolbarTemplateDirective {
     constructor(templateRef, optionChanges) {
@@ -2440,12 +2471,8 @@ class ToolbarTemplateDirective {
     }
     /**
      * The position of the toolbar ([see example]({% slug toolbartemplate_treelist %})).
-     *
-     * The possible values are:
-     * - `top`&mdash;Positions the toolbar above the group panel or header.
-     * - `bottom`&mdash;Positions the toolbar below the pager.
-     * - `both`&mdash;Displays two toolbar instances. Positions the first one above
-     * the group panel or header and the second one below the pager.
+     * The group panel or header and the second one below the pager.
+     * @default 'top'
      */
     set position(position) {
         this._position = position;
@@ -4122,10 +4149,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * The directive takes as input the `cellContext` from the cell template.
  *
- * ```ts-no-run
+ * ```html
  * <kendo-treelist-column>
  *   <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
- *     <input type="button" kendoButton [kendoTreeListFocusable]="cellContext" value="Focus me!" />
+ *     <input [kendoTreeListFocusable]="cellContext" />
  *   </ng-template>
  * </kendo-treelist-column>
  * ```
@@ -7393,12 +7420,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * To define the content template, nest an `<ng-template>` tag with the
  * `kendoTreeListColumnMenuItemContentTemplate` directive inside a `<kendo-treelist-columnmenu-item>`.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-item-content/app.component.ts preview %}
- * {% embed_file column-menu/template-item-content/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist>
+ *   <kendo-treelist-column field="ProductName">
+ *     <ng-template kendoTreeListColumnMenuTemplate>
+ *       <kendo-treelist-columnmenu-item text="Item Text" [expanded]="true">
+ *         <ng-template kendoTreeListColumnMenuItemContentTemplate>
+ *           Item Content
+ *         </ng-template>
+ *       </kendo-treelist-columnmenu-item>
+ *     </ng-template>
+ *   </kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 class ColumnMenuItemContentTemplateDirective {
     constructor(templateRef) {
@@ -17889,17 +17924,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * element inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [`edit`]({% slug api_treelist_treelistcomponent %}#toc-edit) event
- * is triggered ([see example]({% slug editing_treelist %})).
+ * is triggered ([see example](slug:custom_editors_editing_treelist)).
  *
- * > * When the row is in the edit mode, the button with `kendoTreeListEditCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ * When the row is in the `edit` mode, the button with `kendoTreeListEditCommand` is automatically hidden.
+ * The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
- *       <button [kendoTreeListEditCommand]="cellContext" class="k-primary">Edit</button>
+ *       <button [kendoTreeListEditCommand]="cellContext">Edit</button>
  *     </ng-template>
  *   </kendo-treelist-command-column>
  * </kendo-treelist>
@@ -17961,13 +17996,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * element inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [`cancel`]({% slug api_treelist_treelistcomponent %}#toc-cancel) event
- * is triggered ([see example]({% slug editing_treelist %})).
+ * is triggered ([see example](slug:custom_editors_editing_treelist)).
  *
- * > * When the row is not in the edit mode, the button with the `kendoTreeListCancelCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ * When the row is not in the `edit` mode, the button with the `kendoTreeListCancelCommand` is automatically hidden.
+ * The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
@@ -17976,19 +18011,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *   </kendo-treelist-command-column>
  * </kendo-treelist>
  * ```
- *
- * You can control the content of the button based on the state of the row.
- *
- * @example
- * ```html-no-run
- * <kendo-treelist>
- *   <kendo-treelist-command-column title="command">
- *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext" let-isNew="isNew">
- *       <button [kendoTreeListCancelCommand]="cellContext">{{isNew ? 'Discard' : 'Cancel changes'}}</button>
- *     </ng-template>
- *   </kendo-treelist-command-column>
- * </kendo-treelist>
- * ```
  */
 class CancelCommandDirective extends BaseCommandDirective {
     constructor(editService, element, renderer, localization, ngZone) {
@@ -18048,11 +18070,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * [`save`]({% slug api_treelist_treelistcomponent %}#toc-save) event
  * is triggered ([see example]({% slug editing_treelist %})).
  *
- * > * When the row is not in the edit mode, the button with `kendoTreeListSaveCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ * When the row is not in the `edit` mode, the button with `kendoTreeListSaveCommand` is automatically hidden.
+ * The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
@@ -18061,19 +18083,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *   </kendo-treelist-command-column>
  * </kendo-treelist>
  * ```
- *
- * You can control the content of the button based on the state of the row.
- *
- * @example
- * ```html-no-run
- * <kendo-treelist>
- *   <kendo-treelist-command-column title="command">
- *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext" let-isNew="isNew">
- *       <button [kendoTreeListSaveCommand]="cellContext">{{isNew ? 'Add' : 'Update'}}</button>
- *     </ng-template>
- *   </kendo-treelist-command-column>
- * </kendo-treelist>
- * ```
  */
 class SaveCommandDirective extends BaseCommandDirective {
     constructor(editService, element, renderer, localization, ngZone) {
@@ -18132,11 +18141,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * [`remove` event]({% slug api_treelist_treelistcomponent %}#toc-remove)
  * is triggered ([see example]({% slug editing_reactive_forms_treelist %})).
  *
- * > * When the row is in the edit mode, the button with the `kendoTreeListRemoveCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ *  When the row is in the `edit` mode, the button with the `kendoTreeListRemoveCommand` is automatically hidden.
+ *  The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
@@ -18198,28 +18207,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the command for adding a new item to the TreeList. You can apply this directive to any
- * `button` element inside a [`ToolbarTemplate`]({% slug api_treelist_commandcolumncomponent %}) or
+ * `button` element inside a [`ToolbarTemplate`](slug:toolbartemplate_treelist) or
  * inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
  *
  * When an associated button with the directive is clicked, the
  * [`add`]({% slug api_treelist_treelistcomponent %}#toc-add) event is triggered
- * ([see example]({% slug editing_treelist %})).
+ * ([see example](slug:custom_editors_editing_treelist)).
  *
- * > When the row is in the edit mode, the button with `kendoTreeListAddCommand` is automatically hidden.
- *
- * @example
- * ```html-no-run
- * <kendo-treelist>
- *    <ng-template kendoTreeListToolbarTemplate>
- *       <button kendoTreeListAddCommand>Add new</button>
- *    </ng-template>
- * </kendo-treelist>
- * ```
+ * When the row is in the `edit mode`, the button with `kendoTreeListAddCommand` is automatically hidden.
  *
  * When added to the command column, the directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
@@ -18515,7 +18515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * A directive which encapsulates the editing operations of the TreeList when using
- * the Template-Driven Angular Forms ([see example]({% slug editing_directives_treelist %}#toc-the-template-directive)).
+ * the Template-Driven Angular Forms ([see example](slug:editing_directives_treelist#toc-template-editing-directive)).
  */
 class TemplateEditingDirective extends RowEditingDirectiveBase {
     constructor(treelist) {
@@ -18632,7 +18632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * A directive which encapsulates the editing operations of the TreeList when using the in-cell
- * editing with Reactive Forms ([see example]({% slug editing_directives_treelist %}#toc-the-incell-directive)).
+ * editing with Reactive Forms ([see example](slug:editing_directives_treelist#toc-in-cell-editing-directive)).
  */
 class InCellEditingDirective extends EditingDirectiveBase {
     constructor(treelist) {
@@ -18897,7 +18897,7 @@ class HierarchyEditService extends LocalEditService {
  *
  * The directive encapsulates the in-memory handling of data operations such as
  * [sorting]({% slug sorting_treelist %}), [aggregation]({% slug treelist_with_aggregates %})
- * and [filtering]({% slug filtering_treelist %}) ([more information and examples]({% slug databinding_treelist %})).
+ * and [filtering]({% slug filtering_treelist %}) ([more information and examples](slug:databinding_treelist#toc-binding-to-hierarchical-data)).
  */
 class HierarchyBindingDirective extends BaseBindingDirective {
     constructor(component) {
@@ -18983,7 +18983,7 @@ class FlatEditService extends LocalEditService {
 const ROOT_ID = null;
 /**
  * A directive which binds the TreeList to an array of objects by using
- * an ID and parentID field to define the hierarchy.
+ * an `idField` and `parentIDField` field to define the hierarchy.
  *
  * The directive encapsulates the in-memory handling of data operations such as
  * [sorting]({% slug sorting_treelist %}), [aggregation]({% slug treelist_with_aggregates %})
@@ -19042,7 +19042,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 /**
- * A directive which controls the expanded state of the items.
+ * A directive which controls the expanded state of the items. [See example](slug:treelist_expanded_state#toc-built-in-directive).
+ *
+ * @example
+ * ```html
+ * <kendo-treelist ...
+ *   [kendoTreeListFlatBinding]="data"
+ *   kendoTreeListExpandable> ...
+ * </kendo-treelist>
+ * ```
  */
 class ExpandableDirective {
     constructor(component) {
@@ -19137,7 +19145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 const defaultColumnKeyGetter = (_column, columnIndex) => columnIndex;
 /**
- * A directive which controls the selection state
+ * A directive which controls the selection state. [See example](slug:selection_treelist).
  */
 class SelectableDirective {
     constructor(treelist) {
@@ -19505,12 +19513,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * - `pageNumber`&mdash;Defines PDF page number.
  * - `totalPages`&mdash;Defines the total number of PDF pages.
  *
- * {% meta height:550 %}
- * {% embed_file pdf-export/page-template-inline/app.component.ts preview %}
- * {% embed_file pdf-export/page-template-inline/app.module.ts %}
- * {% embed_file shared/filesystem.ts %}
- * {% embed_file shared/main.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist-pdf fileName="Files.pdf" ...>
+ *   <ng-template
+ *     kendoTreeListPDFTemplate
+ *     let-pageNum="pageNum"
+ *     let-totalPages="totalPages">
+ *     <div style="position: absolute; top: 5px; left: 5px;">
+ *       Page {{ pageNum }} of {{ totalPages }}
+ *     </div>
+ *   </ng-template>
+ * </kendo-treelist-pdf>
+ * ```
  */
 class PDFTemplateDirective extends PDFExportTemplateDirective {
     constructor(templateRef) {
@@ -19900,19 +19915,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents the `export-to-PDF` command of the TreeList.
  * You can apply this directive to any `button` element inside a
- * [`ToolbarTemplate`]({% slug api_treelist_commandcolumncomponent %}).
+ * [`ToolbarTemplate`](slug:toolbartemplate_treelist).
  * When the user clicks a button that is associated with the directive, the
  * [`pdfExport`]({% slug api_treelist_treelistcomponent %}#toc-pdfexport) event
  * fires ([see example]({% slug pdfexport_treelist %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
- *      <ng-template kendoTreeListToolbarTemplate>
- *          <button kendoTreeListPDFCommand>Export to PDF</button>
- *      </ng-template>
- *      <kendo-treelist-pdf fileName="TreeList.pdf">
- *      </kendo-treelist-pdf>
+ *   <ng-template kendoTreeListToolbarTemplate>
+ *     <button kendoTreeListPDFCommand>Export to PDF</button>
+ *   </ng-template>
+ *   <kendo-treelist-pdf fileName="TreeList.pdf"></kendo-treelist-pdf>
  * </kendo-treelist>
  * ```
  */
@@ -20253,19 +20267,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents the `export-to-Excel` command of the TreeList. You can apply this
  * directive to any `button` element inside a
- * [`ToolbarTemplate`]({% slug api_treelist_commandcolumncomponent %}).
+ * [`ToolbarTemplate`](slug:toolbartemplate_treelist).
  * When the user clicks a button associated with the directive, the
  * [`excelExport`]({% slug api_treelist_treelistcomponent %}#toc-excelexport) event
  * fires ([see example]({% slug excelexport_treelist %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
- *      <ng-template kendoTreeListToolbarTemplate>
- *          <button kendoTreeListExcelCommand>Export to PDF</button>
- *      </ng-template>
- *      <kendo-treelist-excel fileName="TreeList.xlsx">
- *      </kendo-treelist-excel>
+ *   <ng-template kendoTreeListToolbarTemplate>
+ *     <button kendoTreeListExcelCommand>Export to PDF</button>
+ *   </ng-template>
+ *   <kendo-treelist-excel fileName="TreeList.xlsx"> </kendo-treelist-excel>
  * </kendo-treelist>
  * ```
  */