@syncfusion/ej2-treegrid 32.1.25 → 32.2.3

package/dist/es6/ej2-treegrid.es2015.js

@@ -1,5 +1,5 @@
 import { merge, Property, ChildProperty, Collection, isNullOrUndefined, Browser, removeClass, addClass, getValue, createElement, setValue, extend as extend$1, Internationalization, getEnumValue, compile, Component, L10n, EventHandler, KeyboardEvents, SanitizeHtmlHelper, Complex, Event, NotifyPropertyChanges, closest, setStyleAttribute, select, classList, debounce, remove } from '@syncfusion/ej2-base';
-import { Logger as Logger$1, Grid, detailLists, Clipboard, getObject, parentsUntil, Print as Print$1, templateCompiler, appendChildren, extend, CellRenderer, getUid, CellType, Freeze as Freeze$1, getNumberFormat, getActualProperties, iterateArrayOrObject, RowDropSettings as RowDropSettings$1, Reorder as Reorder$1, Resize as Resize$1, RowDD as RowDD$1, Scroll, VirtualRowModelGenerator, Filter as Filter$1, ExcelExport as ExcelExport$1, Data, ExportHelper, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, Aggregate as Aggregate$1, calculateAggregate, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, Edit as Edit$1, resetRowIndex, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, VirtualContentRenderer, Cell, getVisiblePage, InterSectionObserver, getTransformValues, VirtualScroll as VirtualScroll$1, RenderType, VirtualHeaderRenderer, ColumnChooser as ColumnChooser$1, InfiniteScroll as InfiniteScroll$1, RowRenderer } from '@syncfusion/ej2-grids';
+import { Logger as Logger$1, Grid, detailLists, Clipboard, getObject, parentsUntil, Print as Print$1, templateCompiler, appendChildren, extend, CellRenderer, getUid, CellType, Freeze as Freeze$1, getNumberFormat, getActualProperties, iterateArrayOrObject, RowDropSettings as RowDropSettings$1, Reorder as Reorder$1, Resize as Resize$1, RowDD as RowDD$1, Scroll, VirtualRowModelGenerator, Filter as Filter$1, ExcelExport as ExcelExport$1, Data, ExportHelper, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, Aggregate as Aggregate$1, calculateAggregate, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, Edit as Edit$1, resetRowIndex, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, VirtualContentRenderer, Cell, getVisiblePage, InterSectionObserver, getTransformValues, VirtualScroll as VirtualScroll$1, RenderType, VirtualHeaderRenderer, ColumnChooser as ColumnChooser$1, InfiniteScroll as InfiniteScroll$1, getRowIndexFromElement, RowRenderer } from '@syncfusion/ej2-grids';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { DataManager, ODataAdaptor, WebApiAdaptor, WebMethodAdaptor, CacheAdaptor, UrlAdaptor, Query, DataUtil, RemoteSaveAdaptor, Deferred, JsonAdaptor, Predicate as Predicate$1 } from '@syncfusion/ej2-data';
 import { showSpinner, hideSpinner, createSpinner } from '@syncfusion/ej2-popups';
@@ -500,6 +500,8 @@ const ariaColIndex = 'aria-colindex';
 const ariaRowIndex = 'aria-rowindex';
 /** @hidden */
 const actionFailure = 'actionFailure';
+/** @hidden */
+const collapseActionComplete = 'collapseActionComplete';
 
 /**
  * The `Clipboard` module is used to handle clipboard copy action.
@@ -4035,6 +4037,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.componentRefresh = Component.prototype.refresh;
         this.isComponentRefresh = false;
         this.isVirtualExpandCollapse = false;
+        this.isInfiniteCollapse = false;
         this.objectEqualityChecker = (old, current) => {
             if (old) {
                 const keys = Object.keys(old);
@@ -4906,12 +4909,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         const checkboxColumn = this.columnModel.filter((col) => col.showCheckbox);
         const treeColumn = this.columns[this.treeColumnIndex];
         if (checkboxColumn.length !== 0) {
-            if (checkboxColumn !== treeColumn) {
-                failureCases.push('ShowCheckbox column should not be defined other than the tree column.');
-            }
             if (checkboxColumn.length > 1) {
                 failureCases.push('Only one column can have the ShowCheckbox option enabled.');
             }
+            else if (checkboxColumn[0].field !== treeColumn.field) {
+                failureCases.push('ShowCheckbox column should not be defined other than the tree column.');
+            }
         }
         let alignColumn;
         if (this.treeColumnIndex !== null && this.treeColumnIndex !== -1 && this.treeColumnIndex < this.columns.length) {
@@ -5531,6 +5534,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             if (args.action === 'clearFilter' && this.enableCollapseAll) {
                 this.collapseAll();
             }
+            if (args.action === 'clearFilter' && this.enableInfiniteScrolling) {
+                this.expandAll();
+            }
+            if (args.requestType === 'sorting' && this.enableInfiniteScrolling) {
+                this.expandAll();
+            }
             if (this.action === 'indenting' || this.action === 'outdenting') {
                 this.action = this.action === 'indenting' ? 'indented' : 'outdented';
                 const selectedItem = [this.selectedRecords];
@@ -7373,13 +7382,6 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             else if (!this.isCollapseAll) {
                 this.trigger(collapsed, collapseArgs);
             }
-            if (this.enableInfiniteScrolling) {
-                const scrollHeight = this.grid.getContent().firstElementChild.scrollHeight;
-                const scrollTop = this.grid.getContent().firstElementChild.scrollTop;
-                if ((scrollHeight - scrollTop) < this.grid.getRowHeight() + +this.height) {
-                    this.grid.getContent().firstElementChild.scrollBy(0, this.grid.getRowHeight());
-                }
-            }
         }
     }
     updateExpandStateMapping(record, state) {
@@ -7754,10 +7756,13 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 if ((!isCountRequired(this) || childRecords.length) || action === 'collapse') {
                     this.localExpand(action, row, record);
                 }
+                if (this.enableInfiniteScrolling && action === 'collapse' && !this.isCollapseAll) {
+                    this.notify(collapseActionComplete, { isCollapse: true, data: record, row: row });
+                }
                 const lastrowIdx = this.getVisibleRecords()[this.getVisibleRecords().length - 1]['index'];
                 const lastRow = this.getRowByIndex(lastrowIdx);
                 const borderElement = lastRow ? lastRow.nextElementSibling ? lastRow.nextElementSibling.classList.contains('e-detailrow') ? lastRow.nextElementSibling : lastRow : lastRow : null;
-                if (this.grid.getContentTable().clientHeight <= this.grid.getContent().clientHeight && !isNullOrUndefined(borderElement) && !borderElement.cells[0].classList.contains('e-lastrowcell')) {
+                if (!this.isInfiniteCollapse && this.grid.getContentTable().clientHeight <= this.grid.getContent().clientHeight && !isNullOrUndefined(borderElement) && !borderElement.cells[0].classList.contains('e-lastrowcell')) {
                     this.lastRowBorder(borderElement, true);
                 }
             }
@@ -7772,7 +7777,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 targetEle.closest('.e-treerowcell').classList.remove('e-cellselectionbackground');
                 targetEle.closest('.e-treerowcell').removeAttribute('aria-selected');
             }
-            if (this.isPixelHeight() && !row.cells[0].classList.contains('e-lastrowcell')) {
+            if (this.isPixelHeight() && !row.cells[0].classList.contains('e-lastrowcell') && !this.isInfiniteCollapse) {
                 let totalRows = this.getRows();
                 const rows = this.getContentTable().rows;
                 totalRows = [].slice.call(rows);
@@ -7789,6 +7794,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             this.notify('rowExpandCollapse', { detailrows: detailrows, action: displayAction, record: record, row: row });
             this.updateAltRow(gridRows);
         }
+        this.isInfiniteCollapse = false;
     }
     updateChildOnDemand(expandingArgs) {
         if (expandingArgs.requestType === 'collapse' && isCountRequired(this)) {
@@ -7920,9 +7926,15 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     localExpand(action, row, record) {
         let rows;
         const detailRow = row.nextElementSibling ? row.nextElementSibling.classList.contains('e-detailrow') ? row.nextElementSibling : null : null;
-        const childRecords = this.grid.currentViewData.filter((e) => {
-            return e.parentUniqueID === record.uniqueID;
-        });
+        let childRecords;
+        if (this.enableInfiniteScrolling) {
+            childRecords = this.grid.getRowsObject().filter((e) => { return e.data.parentUniqueID === record.uniqueID; });
+        }
+        else {
+            childRecords = this.grid.currentViewData.filter((e) => {
+                return e.parentUniqueID === record.uniqueID;
+            });
+        }
         if (this.isPixelHeight() && row.cells[0].classList.contains('e-lastrowcell')) {
             this.lastRowBorder(row, false);
         }
@@ -7956,9 +7968,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             freezeRightRows = this.getRows().filter((r) => r.querySelector('.e-gridrowindex' + record.index + 'level' + (record.level + 1)));
         }
         const gridRowsObject = this.grid.getRowsObject();
-        const currentViewData = this.grid.currentViewData;
+        const currentViewData = this.enableInfiniteScrolling ? this.grid.getRowsObject() : this.grid.currentViewData;
         const currentRecord = currentViewData.filter((e) => {
-            return e.uniqueID === record.uniqueID;
+            return this.enableInfiniteScrolling ? e.data.uniqueID === record.uniqueID : e.uniqueID === record.uniqueID;
         });
         const currentIndex = currentViewData.indexOf(currentRecord[0]);
         if (!isNullOrUndefined(gridRowsObject[parseInt(currentIndex.toString(), 10)].visible) &&
@@ -16164,6 +16176,10 @@ class InfiniteScroll {
         this.parent.grid.on('infinite-edit-handler', this.infiniteEditHandler, this);
         this.parent.grid.on('infinite-crud-cancel', this.createRows, this);
         this.parent.grid.on('content-ready', this.contentready, this);
+        this.parent.on(collapseActionComplete, this.collapseActionComplete, this);
+        this.parent.grid.on('data-ready', this.onDataReady, this);
+        this.dataBoundFunction = this.dataBound.bind(this);
+        this.parent.addEventListener(dataBound, this.dataBoundFunction);
     }
     /**
      * @hidden
@@ -16179,6 +16195,53 @@ class InfiniteScroll {
         this.parent.off(pagingActions, this.infinitePageAction);
         this.parent.grid.off('infinite-crud-cancel', this.createRows);
         this.parent.grid.off('content-ready', this.contentready);
+        this.parent.off(collapseActionComplete, this.collapseActionComplete);
+        this.parent.grid.off('data-ready', this.onDataReady);
+        this.parent.removeEventListener(dataBound, this.dataBoundFunction);
+    }
+    dataBound() {
+        if (this.treeAction === 'collapse') {
+            this.treeAction = 'refresh';
+            this.makeCollapseRequest();
+        }
+        else if (this.treeAction === 'refresh') {
+            this.treeAction = null;
+        }
+    }
+    onDataReady(e) {
+        if (!isNullOrUndefined(e.count) && e.requestType !== 'infiniteScroll') {
+            this.maxPage = Math.ceil(e.count / this.parent.pageSettings.pageSize);
+        }
+    }
+    collapseActionComplete(args) {
+        if (!this.parent.infiniteScrollSettings.enableCache && args.isCollapse) {
+            const contentBounds = this.parent.getContent().firstElementChild.getBoundingClientRect();
+            const tableBounds = this.parent.grid.contentModule.getTable().getBoundingClientRect();
+            if (Math.round(tableBounds.bottom - this.parent.grid.getRowHeight()) <= Math.round(contentBounds.bottom)) {
+                this.treeAction = 'collapse';
+                this.collapsedData = args.data;
+                this.makeCollapseRequest(args);
+            }
+        }
+    }
+    makeCollapseRequest(args) {
+        const rows = this.parent.getRows();
+        const index = getRowIndexFromElement(rows[rows.length - 1]);
+        const previousPage = this.parent.grid.pageSettings.currentPage;
+        const nextPage = Math.ceil(index / this.parent.grid.pageSettings.pageSize) + 1;
+        if ((previousPage >= this.maxPage) || (nextPage > this.maxPage)) {
+            return;
+        }
+        this.parent.grid.pageSettings.currentPage = nextPage;
+        this.parent['isInfiniteCollapse'] = true;
+        const scrollArg = {
+            requestType: 'infiniteScroll',
+            currentPage: this.parent.grid.pageSettings.currentPage,
+            prevPage: previousPage,
+            startIndex: index + 1,
+            direction: 'down'
+        };
+        this.parent.grid.notify('model-changed', scrollArg);
     }
     /**
      * Handles the Expand Collapse action for Remote data with infinite scrolling.
@@ -16269,7 +16332,12 @@ class InfiniteScroll {
                 if (!isCache && actionArgs.requestType === 'delete') {
                     const skip = lastIndex - actionArgs.data.length + 1;
                     const take = actionArgs.data.length;
-                    query = query.skip(skip).take(take);
+                    if (skip < 0) {
+                        query = query.take(take);
+                    }
+                    else {
+                        query = query.skip(skip).take(take);
+                    }
                 }
                 else if (isCache && actionArgs.requestType === 'delete' ||
                     (actionArgs.requestType === 'save' && actionArgs.action === 'add')) {
@@ -16277,13 +16345,36 @@ class InfiniteScroll {
                     query = query.take(this.parent.infiniteScrollSettings.initialBlocks * this.parent.pageSettings.pageSize);
                 }
                 else {
-                    query = query.page(current, size);
+                    if (this.treeAction !== 'collapse' && this.treeAction !== 'refresh') {
+                        query = query.page(current, size);
+                    }
                 }
             }
             else {
                 query = query.page(current, size);
             }
             dm.dataSource.json = visualData;
+            if (this.treeAction === 'collapse') {
+                const rows = this.parent.getRows();
+                const skip = getRowIndexFromElement(rows[rows.length - 1]) + 1;
+                query = query.skip(skip);
+                const renderedChildDataCount = this.parent.grid.getRowsObject().filter((record) => {
+                    return record.data.parentUniqueID === this.collapsedData.uniqueID;
+                }).length;
+                const remainingChildDataCount = this.collapsedData.childRecords.length - renderedChildDataCount;
+                if (remainingChildDataCount > 0) {
+                    query = query.take(Math.max(remainingChildDataCount, 0));
+                }
+                else {
+                    query = query.take(this.parent.pageSettings.pageSize);
+                }
+            }
+            else if (this.treeAction === 'refresh') {
+                const rows = this.parent.getRows();
+                const skip = getRowIndexFromElement(rows[rows.length - 1]) + 1;
+                query = query.skip(skip);
+                query = query.take(this.parent.infiniteScrollSettings.initialBlocks * this.parent.pageSettings.pageSize);
+            }
             if (!isCache && !isNullOrUndefined(actionArgs) && actionArgs.requestType === 'save' && actionArgs.action === 'add') {
                 pageingDetails.result = [actionArgs.data];
             }
@@ -16430,5 +16521,5 @@ class InfiniteScroll {
     }
 }
 
-export { Aggregate, AggregateColumn, AggregateRow, Column, ColumnChooser, ColumnMenu, CommandColumn, ContextMenu, ContextMenuItems, DataManipulation, DetailRow, Edit, EditSettings, ExcelExport, Filter, FilterSettings, Freeze, InfiniteScroll, InfiniteScrollSettings, LoadingIndicator, Logger, Page, PageSettings, PdfExport, Predicate, Render, Reorder, Resize, RowDD, RowDropSettings, SearchSettings, Selection, SelectionSettings, Sort, SortDescriptor, SortSettings, StackedColumn, Toolbar, ToolbarItem, TreeClipboard, TreeGrid, TreeGridColumn, TreeVirtual, TreeVirtualRowModelGenerator, VirtualScroll, actionBegin, actionComplete, actionFailure, ariaColIndex, ariaRowIndex, autoCol, batchAdd, batchCancel, batchDelete, batchEditFormRendered, batchSave, beforeBatchAdd, beforeBatchCancel, beforeBatchDelete, beforeBatchSave, beforeCopy, beforeDataBound, beforeExcelExport, beforePaste, beforePdfExport, beforeStartEdit, beginAdd, beginEdit, cellEdit, cellSave, cellSaved, checkboxChange, collapsed, collapsing, content, contextMenuClick, contextMenuOpen, crudAction, dataBound, dataListener, dataStateChange, destroy, detailDataBound, doubleTap, expanded, expanding, extendArray, findChildrenRecords, findParentRecords, frozenContent, frozenHeader, frozenLeft, frozenRight, getExpandStatus, getParentData, getPlainData, headerContent, indexModifier, isCheckboxcolumn, isCountRequired, isFilterChildHierarchy, isHidden, isOffline, isRemoteData, keyPressed, leftRight, load, localPagedExpandCollapse, movableContent, movableHeader, pagingActions, printGridInit, queryCellInfo, recordDoubleClick, remoteExpand, resizeStop, rowDataBound, rowDeselected, rowDeselecting, rowDrag, rowDragStart, rowDragStartHelper, rowDrop, rowDropped, rowSelected, rowSelecting, rowdraging, rowsAdd, rowsRemove, savePreviousRowPosition, table, toolbarClick, treeGridDetails, updateData, virtualActionArgs, virtualColumnIndex };
+export { Aggregate, AggregateColumn, AggregateRow, Column, ColumnChooser, ColumnMenu, CommandColumn, ContextMenu, ContextMenuItems, DataManipulation, DetailRow, Edit, EditSettings, ExcelExport, Filter, FilterSettings, Freeze, InfiniteScroll, InfiniteScrollSettings, LoadingIndicator, Logger, Page, PageSettings, PdfExport, Predicate, Render, Reorder, Resize, RowDD, RowDropSettings, SearchSettings, Selection, SelectionSettings, Sort, SortDescriptor, SortSettings, StackedColumn, Toolbar, ToolbarItem, TreeClipboard, TreeGrid, TreeGridColumn, TreeVirtual, TreeVirtualRowModelGenerator, VirtualScroll, actionBegin, actionComplete, actionFailure, ariaColIndex, ariaRowIndex, autoCol, batchAdd, batchCancel, batchDelete, batchEditFormRendered, batchSave, beforeBatchAdd, beforeBatchCancel, beforeBatchDelete, beforeBatchSave, beforeCopy, beforeDataBound, beforeExcelExport, beforePaste, beforePdfExport, beforeStartEdit, beginAdd, beginEdit, cellEdit, cellSave, cellSaved, checkboxChange, collapseActionComplete, collapsed, collapsing, content, contextMenuClick, contextMenuOpen, crudAction, dataBound, dataListener, dataStateChange, destroy, detailDataBound, doubleTap, expanded, expanding, extendArray, findChildrenRecords, findParentRecords, frozenContent, frozenHeader, frozenLeft, frozenRight, getExpandStatus, getParentData, getPlainData, headerContent, indexModifier, isCheckboxcolumn, isCountRequired, isFilterChildHierarchy, isHidden, isOffline, isRemoteData, keyPressed, leftRight, load, localPagedExpandCollapse, movableContent, movableHeader, pagingActions, printGridInit, queryCellInfo, recordDoubleClick, remoteExpand, resizeStop, rowDataBound, rowDeselected, rowDeselecting, rowDrag, rowDragStart, rowDragStartHelper, rowDrop, rowDropped, rowSelected, rowSelecting, rowdraging, rowsAdd, rowsRemove, savePreviousRowPosition, table, toolbarClick, treeGridDetails, updateData, virtualActionArgs, virtualColumnIndex };
 //# sourceMappingURL=ej2-treegrid.es2015.js.map