@progress/kendo-angular-treelist 13.0.0-develop.2 → 13.0.0-develop.20

package/esm2020/column-menu/column-menu-item.component.mjs

@@ -12,12 +12,14 @@ import * as i2 from "@angular/common";
  * Represents an item that can be placed inside a
  * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-item/app.component.ts preview %}
- * {% embed_file column-menu/template-item/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ *  * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <ng-template kendoTreeListColumnMenuTemplate let-service="service" let-column="column">
+ *     <kendo-treelist-columnmenu-item text="Fit column"></kendo-treelist-columnmenu-item>
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
  */
 export class ColumnMenuItemComponent {
     constructor() {
@@ -72,7 +74,7 @@ ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
-    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('state', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'block' })),

package/esm2020/column-menu/column-menu-lock.component.mjs

@@ -12,19 +12,13 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/column-info.service";
 import * as i3 from "./column-menu-item.component";
 /**
- * Represents a column-menu item that can be placed inside a
- * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
- * Allows the user to lock or unlock the columns.
+ * Represents the column-menu item that allows the user to lock or unlock columns.
  *
- * > You have to set the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) that is passed by
- * > the template to the service input of the `kendo-treelist-columnmenu-lock` component.
+ * The componnt can be placed inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ *
+* To register the component as a known column menu item, set the [`ColumnMenuService`]({% slug api_treelist_columnmenuservice %})
+ * that is passed by the template to the service input of the `kendo-treelist-columnmenu-lock` component.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-lock/app.component.ts preview %}
- * {% embed_file column-menu/template-lock/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
  */
 export class ColumnMenuLockComponent extends ColumnMenuItemBase {
     constructor(localization, columnInfoService, changeDetector) {

package/esm2020/column-menu/column-menu-sort.component.mjs

@@ -13,19 +13,13 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/sort.service";
 import * as i3 from "./column-menu-item.component";
 /**
- * Represents a column-menu item for sorting TreeList columns that can be placed inside a
- * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
- * Allows the user to sort the column.
+ * Represents the column-menu item for sorting TreeList columns.
  *
- * > You have to set the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) that is passed by
- * > the template to the service input of the `kendo-treelist-columnmenu-sort` component.
+ * The component can be placed inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ *
+ * To register the component as a known column menu item, set the [`ColumnMenuService`]({% slug api_treelist_columnmenuservice %})
+ * that is passed by the template to the service input of the `kendo-treelist-columnmenu-sort` component.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-sort/app.component.ts preview %}
- * {% embed_file column-menu/template-sort/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
  */
 export class ColumnMenuSortComponent extends ColumnMenuItemBase {
     constructor(localization, sortService) {

package/esm2020/column-menu/column-menu.component.mjs

@@ -21,7 +21,7 @@ import * as i8 from "./column-menu-filter.component";
 import * as i9 from "@angular/common";
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
 /**
- * Represents the [column menu]({% slug columnmenu_treelist %}) component.
+ * Represents the [column menu]({% slug columnmenu_treelist %}) component of the TreeList.
  */
 export class ColumnMenuComponent {
     constructor(popupService, localization, service) {
@@ -153,7 +153,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [expanded]="expandedFilter" (expand)="onFilterExpand()">
             </kendo-treelist-columnmenu-filter>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { type: i6.ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { type: i7.ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded"], outputs: ["expand", "collapse"] }, { type: i8.ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded"], outputs: ["expand", "collapse"] }], directives: [{ type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i5.ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { type: i6.ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { type: i7.ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded"], outputs: ["expand", "collapse"] }, { type: i8.ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded"], outputs: ["expand", "collapse"] }], directives: [{ type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/column-menu/column-menu.service.mjs

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <ng-template
  *     kendoTreeListColumnMenuTemplate
  *     let-service="service"

package/esm2020/columns/checkbox-column.component.mjs

@@ -8,7 +8,7 @@ import { CellTemplateDirective } from '../rendering/cell-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./column-base";
 /**
- * Represents the checkbox for selecting rows in the TreeList.
+ * Represents the checkbox for selecting rows in the TreeList. [See example](slug:selection_treelist#toc-select-all-checkbox).
  */
 export class CheckboxColumnComponent extends ColumnBase {
     constructor(parent) {

package/esm2020/columns/column-base.mjs

@@ -17,6 +17,10 @@ export const isSpanColumn = column => column.isSpanColumn;
  * @hidden
  */
 export const isCheckboxColumn = column => column.isCheckboxColumn;
+/**
+ * @hidden
+ */
+export const isRowReorderColumn = column => column.isRowReorderColumn;
 const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
 /**
  * The base class for the column components of the TreeList.

package/esm2020/columns/column-group.component.mjs

@@ -19,12 +19,15 @@ export function isColumnGroupComponent(column) {
  * Represents the column group header of the TreeList
  * ([more information and examples]({% slug multicolumnheaders_columns_treelist %})).
  *
- * {% meta height:533 %}
- * {% embed_file configuration/multi-column-headers/app.component.ts preview %}
- * {% embed_file configuration/multi-column-headers/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/filesystem.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <kendo-treelist-column-group title="File Info">
+ *     <kendo-treelist-column field="type" title="Type"> </kendo-treelist-column>
+ *     <kendo-treelist-column field="size" title="Size"> </kendo-treelist-column>
+ *   </kendo-treelist-column-group>
+ * </kendo-treelist>
+ * ```
  */
 export class ColumnGroupComponent extends ColumnBase {
     constructor(parent, optionChanges) {

package/esm2020/columns/column.component.mjs

@@ -20,14 +20,15 @@ export function isColumnComponent(column) {
     return isPresent(column.field);
 }
 /**
- * Represents the columns of the [Angular TreeList]({% slug getstarted_treelist %}).
+ * Represents the columns of the TreeList.
  *
- * {% meta height:470 %}
- * {% embed_file basic-usage/app.component.ts preview %}
- * {% embed_file basic-usage/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist [kendoTreeListFlatBinding]="data" ...>
+ *   <kendo-treelist-column field="name" title="Name"></kendo-treelist-column>
+ *   <kendo-treelist-column field="title"title="Title"></kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 export class ColumnComponent extends ColumnBase {
     constructor(parent, optionChanges) {
@@ -39,51 +40,27 @@ export class ColumnComponent extends ColumnBase {
         this.sortable = true;
         /**
          * Defines the editor type ([see example]({% slug editing_reactive_forms_treelist %}#toc-setup)).
-         * Used when the column enters the edit mode. The default value is `text`.
+         * Used when the column enters the edit mode. [See example](slug:editing_reactive_forms_treelist).
          *
-         * @example
-         * ```html-no-run
-         * <kendo-treelist>
-         *    <kendo-treelist-column field="UnitPrice" editor="numeric">
-         *    </kendo-treelist-column>
-         * </kendo-treelist>
-         * ```
+         * @default 'text'
          */
         this.editor = 'text';
         /**
-         * Defines the filter type that is displayed inside the filter row. The default value is `text`.
+         * Defines the filter type that is displayed inside the filter row.
          *
-         * @example
-         * ```html-no-run
-         * <kendo-treelist>
-         *    <kendo-treelist-column field="UnitPrice" filter="numeric">
-         *    </kendo-treelist-column>
-         * </kendo-treelist>
-         * ```
+         * @default 'text'
          */
         this.filter = 'text';
         /**
-         * Defines if a filter UI will be displayed for this column. The default value is `true`.
+         * Defines if a filter UI will be displayed for this column.
          *
-         * @example
-         * ```html-no-run
-         * <kendo-treelist>
-         *    <kendo-treelist-column field="UnitPrice" [filterable]="false">
-         *    </kendo-treelist-column>
-         * </kendo-treelist>
-         * ```
+         * @default true
          */
         this.filterable = true;
         /**
-         * Defines whether the column is editable. The default value is `true`.
+         * Defines whether the column is editable.
          *
-         * @example
-         * ```html-no-run
-         * <kendo-treelist>
-         *    <kendo-treelist-column field="UnitPrice" [editable]="false">
-         *    </kendo-treelist-column>
-         * </kendo-treelist>
-         * ```
+         * @default true
          */
         this.editable = true;
     }

package/esm2020/columns/command-column.component.mjs

@@ -11,30 +11,28 @@ import * as i1 from "./column-base";
 import * as i2 from "../common/option-changes.service";
 /**
  * Represents the command columns of the TreeList. You have to define the content of the
- * column inside an `<ng-template>` tag. The template context is set to the current
- * data item. For more information and examples on using the passed fields
+ * column inside an `<ng-template>` tag. For more information and examples on using the passed fields
  * and the command directives, refer to the article on
  * [editing the TreeList in Angular Reactive Forms]({% slug editing_reactive_forms_treelist %}).
  *
- * The following additional fields are passed:
- * - `columnIndex`&mdash;The current column index.
- * - `rowIndex`&mdash;The current data row index. If inside a new item row, `rowIndex`is `-1`.
- * - `dataItem`&mdash;The current data item.
- * - `column`&mdash;The current column instance.
- * - `isNew`&mdash;The state of the current item.
- *
  * Usually, the template contains CRUD command directives such as:
  * - [`EditCommandDirective`]({% slug api_treelist_editcommanddirective %})
  * - [`RemoveCommandDirective`]({% slug api_treelist_removecommanddirective %})
  * - [`CancelCommandDirective`]({% slug api_treelist_cancelcommanddirective %})
  * - [`SaveCommandDirective`]({% slug api_treelist_savecommanddirective %})
  *
- * {% meta height:590 %}
- * {% embed_file editing/editing-directives/reactive-editing/app.component.ts preview %}
- * {% embed_file shared/employees.ts %}
- * {% embed_file editing/editing-directives/reactive-editing/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <kendo-treelist-column field="ProductID"></kendo-treelist-column>
+ *   <kendo-treelist-command-column title="command" >
+ *      <ng-template kendoTreeListCellTemplate>
+ *         <button kendoTreeListEditCommand class="k-primary">Edit</button>
+ *         <button kendoTreeListRemoveCommand>Remove</button>
+ *      </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
  */
 export class CommandColumnComponent extends ColumnBase {
     constructor(parent, optionChanges) {

package/esm2020/columns/rowreorder-column.component.mjs

@@ -0,0 +1,47 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, SkipSelf, Host, Optional } from '@angular/core';
+import { ColumnBase } from './column-base';
+import * as i0 from "@angular/core";
+import * as i1 from "./column-base";
+/**
+ * Represents the drag handle for reordering rows in the TreeList.
+ */
+export class RowReorderColumnComponent extends ColumnBase {
+    constructor(parent) {
+        super(parent);
+        this.parent = parent;
+        /**
+         * @hidden
+         */
+        this.isRowReorderColumn = true;
+    }
+}
+RowReorderColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderColumnComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+RowReorderColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RowReorderColumnComponent, selector: "kendo-treelist-rowreorder-column", providers: [
+        {
+            provide: ColumnBase,
+            useExisting: forwardRef(() => RowReorderColumnComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ColumnBase,
+                            useExisting: forwardRef(() => RowReorderColumnComponent)
+                        }
+                    ],
+                    selector: 'kendo-treelist-rowreorder-column',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ColumnBase, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Host
+                }, {
+                    type: Optional
+                }] }]; } });

package/esm2020/columns/span-column.component.mjs

@@ -25,25 +25,15 @@ export function isSpanColumnComponent(column) {
  * [sorting]({% slug sorting_treelist %}) and [filtering]({% slug filtering_treelist %}). Wrap the columns that will be
  * merged inside the `<kendo-treelist-span-column>` tag.
  *
- * {% meta height:570 %}
- * {% embed_file configuration/span-column/app.component.ts preview %}
- * {% embed_file configuration/span-column/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
- *
- * By default, the data cell displays the data for the specified fields. To further customize
- * the span-column functionality, use a [cell template]({% slug api_treelist_celltemplatedirective %}).
- *
- * ```html-no-run
+ * ```html
  * <kendo-treelist-span-column>
- *  <kendo-treelist-column field="field1" title="Field 1"></kendo-treelist-column>
- *  <kendo-treelist-column field="field2" title="Field 2"></kendo-treelist-column>
- *    <ng-template kendoTreeListCellTemplate let-dataItem>
- *        <h5>{{ dataItem.field1 }}</h5>
- *        <p>{{ dataItem.field2 }}</p>
- *    </ng-template>
- *  </kendo-treelist-span-column>
+ *   <kendo-treelist-column field="field1" ></kendo-treelist-column>
+ *   <kendo-treelist-column field="field2" ></kendo-treelist-column>
+ *   <ng-template kendoTreeListCellTemplate let-dataItem>
+ *     <h5>{{ dataItem.field1 }}</h5>
+ *     <p>{{ dataItem.field2 }}</p>
+ *   </ng-template>
+ * </kendo-treelist-span-column>
  * ```
  */
 export class SpanColumnComponent extends ColumnBase {
@@ -71,22 +61,8 @@ export class SpanColumnComponent extends ColumnBase {
     /**
      * Defines whether the edit template of the column will be rendered. The default value is `false`.
      *
-     * > To enable the editing functionality for a spanned column, set an edit template for it.
+     * To enable the editing functionality for a spanned column, set an edit template for it.
      *
-     * @example
-     * ```html-no-run
-     * <kendo-treelist>
-     *    <kendo-treelist-span-column [editable]="false">
-     *      <kendo-treelist-column field="UnitPrice">
-     *      </kendo-treelist-column>
-     *      <kendo-treelist-column field="ProductName">
-     *      </kendo-treelist-column>
-     *      <ng-template kendoTreeListEditTemplate>
-     *         .....
-     *      </ng-template>
-     *    </kendo-treelist-span-column>
-     * </kendo-treelist>
-     * ```
      */
     set editable(value) {
         this._editable = value;
@@ -131,56 +107,9 @@ export class SpanColumnComponent extends ColumnBase {
     }
     /**
      * Toggles the locked (frozen) state of the columns. Locked columns are visible
-     * at all times during the horizontal scrolling of the TreeList.
-     *
-     * For the option to work properly, make sure that:
-     * - Scrolling is enabled.
-     * - The `height` option of the TreeList is set.
-     * - The widths of all TreeList columns are explicitly set in pixels. In this way,
-     * the TreeList adjusts the layout of the locked and unlocked columns.
+     * at all times during the horizontal scrolling of the TreeList. [See example](slug:locked_columns_treelist).
      *
      * @default false
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" [scrollable]="scrollable" style="height: 200px">
-     *          <kendo-treelist-span-column [locked]="true">
-     *             <kendo-treelist-column field="ProductID" title="Product ID" [width]="120">
-     *             </kendo-treelist-column>
-     *             <kendo-treelist-column field="ProductName" title="Product Name" [width]="200">
-     *             </kendo-treelist-column>
-     *          </kendo-treelist-span-column>
-     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public treelistData: any[];
-     *
-     *    constructor() {
-     *        this.treelistData = products;
-     *    }
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     *
-     * ```
      */
     set locked(value) {
         this._locked = value;

package/esm2020/data/data.collection.mjs

@@ -9,22 +9,22 @@ import { EventEmitter } from '@angular/core';
  * @hidden
  */
 export const EXPANDED_STATE = {
-    isExpanded: () => true
+    isExpanded: () => true,
 };
 /**
  * @hidden
  */
 export const UNSELECTED_STATE = {
-    isRowSelected: () => false
+    isRowSelected: () => false,
 };
 /**
  * @hidden
  */
 export const NOT_EDITED_STATE = {
     hasNew: () => false,
-    context: () => null
+    context: () => null,
 };
-const identity = item => item;
+const identity = (item) => item;
 function loadView(view, subject) {
     view.loadData();
     if (view.loading) {
@@ -69,10 +69,11 @@ class ViewRange {
         return true;
     }
     includeParents(_children) {
+        // eslint-disable-next-line no-empty
     }
 }
 function isPagerSettings(pageable) {
-    return typeof pageable === "object";
+    return typeof pageable === 'object';
 }
 class PagerRange extends ViewRange {
     constructor(skip, pageSize, pageable) {
@@ -86,8 +87,8 @@ class PagerRange extends ViewRange {
         return this.skip <= index && index < this.skip + this.pageSize;
     }
     levelInRange(parent, items, _rowIndex) {
-        return parent.level === -1 ||
-            (this.skip <= parent.index + items.length && parent.index + 1 < this.skip + this.pageSize);
+        return (parent.level === -1 ||
+            (this.skip <= parent.index + items.length && parent.index + 1 < this.skip + this.pageSize));
     }
     includeParents(children) {
         let parentLevel = children.parentLevel;
@@ -130,7 +131,7 @@ export class ViewItemFactory {
             this.rootLevel = this.dataLevel({
                 level: -1,
                 id: null,
-                expanded: true
+                expanded: true,
             }, options.data);
         }
     }
@@ -145,7 +146,8 @@ export class ViewItemFactory {
             while (dataLevels[0] && dataLevels[0].idx >= dataLevels[0].items.length) {
                 const dataLevel = dataLevels.shift();
                 if (this.hasFooter && dataLevel.expanded && dataLevel.items.length) {
-                    if (dataLevel.inRange || this.viewRange.levelInRange(dataLevel.parent, dataLevel.items, this.rowIndex)) {
+                    if (dataLevel.inRange ||
+                        this.viewRange.levelInRange(dataLevel.parent, dataLevel.items, this.rowIndex)) {
                         result.push({
                             type: 'footer',
                             items: dataLevel.items,
@@ -153,7 +155,7 @@ export class ViewItemFactory {
                             level: dataLevel.level,
                             parentItem: dataLevel.parent.data,
                             parentIndex: dataLevel.parentIndex,
-                            rowIndex: this.rowIndex
+                            rowIndex: this.rowIndex,
                         });
                         this.viewRange.includeParents(dataLevel);
                     }
@@ -173,7 +175,7 @@ export class ViewItemFactory {
                 index: itemIndex,
                 level: currentLevel.level,
                 hasChildren: this.hasChildren(dataItem),
-                parent: currentLevel.parent
+                parent: currentLevel.parent,
             };
             if (currentLevel.expanded) {
                 this.rowIndex++;
@@ -206,7 +208,7 @@ export class ViewItemFactory {
             observables: this.observables,
             total: itemCount,
             totalVisible: itemIndex,
-            totalRows: this.rowIndex
+            totalRows: this.rowIndex,
         };
     }
     loadChildren(parent) {
@@ -225,7 +227,7 @@ export class ViewItemFactory {
             if (isObservable(children)) {
                 this.observables.push({
                     observable: children,
-                    parentId: parentId
+                    parentId: parentId,
                 });
                 parent.loading = true;
             }
@@ -246,7 +248,7 @@ export class ViewItemFactory {
             aggregates: children.aggregates,
             expanded: parent.expanded,
             parentIndex: parent.index,
-            parent: parent
+            parent: parent,
         };
     }
     addNew(result, parent) {
@@ -259,7 +261,7 @@ export class ViewItemFactory {
                 type: 'data',
                 data: this.editState.newItem.dataItem,
                 editContext: this.editState.newItem,
-                rowIndex: rowIndex
+                rowIndex: rowIndex,
             });
             if (parent || inRange) {
                 this.rowIndex++;
@@ -295,7 +297,7 @@ export class ViewCollection {
             idGetter: identity,
             pageable: false,
             isVirtual: false,
-            skip: 0
+            skip: 0,
         }, options.fields);
         const childrenView = new ViewCollection(viewFields, options.expandState || EXPANDED_STATE, options.editState || NOT_EDITED_STATE, options.selectionState || UNSELECTED_STATE);
         if (options.loaded) {
@@ -316,20 +318,28 @@ export class ViewCollection {
         }
         return this._data;
     }
-    get length() { return this.data.length; }
-    get first() { return this.data[0]; }
+    get length() {
+        return this.data.length;
+    }
+    get first() {
+        return this.data[0];
+    }
     get firstItem() {
-        return this.find(item => item.type === 'data');
+        return this.find((item) => item.type === 'data');
+    }
+    get last() {
+        return this.data[this.data.length - 1];
     }
-    get last() { return this.data[this.data.length - 1]; }
     at(index) {
         return this.data[index];
     }
     itemIndex(item) {
         const idGetter = this.fieldAccessor().idGetter;
-        return this.data.findIndex(i => i.id === idGetter(item));
+        return this.data.findIndex((i) => i.id === idGetter(item));
+    }
+    map(fn) {
+        return this.data.map(fn);
     }
-    map(fn) { return this.data.map(fn); }
     filter(fn) {
         return this.data.filter(fn);
     }
@@ -348,16 +358,18 @@ export class ViewCollection {
     find(fn) {
         return this.data.find(fn);
     }
-    toString() { return this.data.toString(); }
+    toString() {
+        return this.data.toString();
+    }
     updateSelectedState() {
-        this.forEach(item => {
+        this.forEach((item) => {
             if (item.type === 'data') {
                 item.selected = this.selectionState.isRowSelected(item.data);
             }
         });
     }
     updateEditedState() {
-        this.forEach(item => {
+        this.forEach((item) => {
             if (item.type === 'data') {
                 item.editContext = this.editState.context(item.data);
             }
@@ -390,7 +402,7 @@ export class ViewCollection {
     loadData() {
         const itemFactory = new ViewItemFactory(this.expandState, this.editState, this.selectionState, this.loaded, this.fieldAccessor);
         let result = itemFactory.generate();
-        if (!result.loading && result.total && (!result.items.length || !result.items.some(i => i.type === 'data'))) {
+        if (!result.loading && result.total && (!result.items.length || !result.items.some((i) => i.type === 'data'))) {
             this.resetPage.emit();
             result = new ViewItemFactory(this.expandState, this.editState, this.selectionState, this.loaded, this.fieldAccessor).generate();
         }
@@ -404,9 +416,10 @@ export class ViewCollection {
             if (!this.childrenSubscription) {
                 this.childrenSubscription = new Subscription();
             }
-            result.observables.forEach(o => {
+            result.observables.forEach((o) => {
                 this.loaded.set(o.parentId, LOADING);
-                this.childrenSubscription.add(o.observable.subscribe(children => {
+                this.childrenSubscription.add(o.observable.subscribe((children) => {
+                    // handle error, might show reload icon
                     this.clear();
                     this.loaded.set(o.parentId, children);
                     this.childrenLoaded.emit();