@syncfusion/ej2-treegrid 19.3.55 → 19.4.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.3.55
+*  version : 19.4.41
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-treegrid@*",
-  "_id": "@syncfusion/ej2-treegrid@19.3.53",
+  "_id": "@syncfusion/ej2-treegrid@19.4.38",
   "_inBundle": false,
-  "_integrity": "sha512-Z/LVb/49/OB2E5RfAdGBhYIzZPC4UTL3FLHkIwHIVuNI+dvP6+VMwRID54qqG01YiuVdkxpuk15UzfBeXEzs5Q==",
+  "_integrity": "sha512-NwDwtzhLP8hC/gjz6VcKbRdeMwAhQTOgXsLPqwNOBrpn4GLKk5BTqejDBL7mXEMy1NUJO/uJayEaV10xFh+mLA==",
   "_location": "/@syncfusion/ej2-treegrid",
   "_phantomChildren": {},
   "_requested": {
@@ -24,8 +24,8 @@
     "/@syncfusion/ej2-react-treegrid",
     "/@syncfusion/ej2-vue-treegrid"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-treegrid/-/ej2-treegrid-19.3.53.tgz",
-  "_shasum": "a52a629c706c322c28b139bd916dd151872304c0",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-treegrid/-/ej2-treegrid-19.4.38.tgz",
+  "_shasum": "e86288528d767c8bdb8b1653b00b2651d1cabacf",
   "_spec": "@syncfusion/ej2-treegrid@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -36,10 +36,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.54",
-    "@syncfusion/ej2-data": "~19.3.53",
-    "@syncfusion/ej2-grids": "~19.3.55",
-    "@syncfusion/ej2-popups": "~19.3.53"
+    "@syncfusion/ej2-base": "~19.4.38",
+    "@syncfusion/ej2-data": "~19.4.38",
+    "@syncfusion/ej2-grids": "~19.4.41",
+    "@syncfusion/ej2-popups": "~19.4.41"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeGrid Component",
@@ -60,6 +60,6 @@
     "url": "git+https://github.com/syncfusion/ej2-treegrid.git"
   },
   "typings": "index.d.ts",
-  "version": "19.3.55",
+  "version": "19.4.41",
   "sideEffects": false
 }

package/src/treegrid/actions/batch-edit.js

@@ -404,11 +404,6 @@ var BatchEdit = /** @class */ (function () {
         var data = (this.parent.grid.dataSource instanceof DataManager ?
             this.parent.grid.dataSource.dataSource.json : this.parent.grid.dataSource);
         var primaryKey = this.parent.grid.getPrimaryKeyFieldNames()[0];
-        if (!isNullOrUndefined(this.parent[targetElement])) {
-            var row = this.parent[targetElement].closest('tr');
-            this.parent.collapseRow(row);
-            this.parent[targetElement] = null;
-        }
         if (!isNullOrUndefined(this.batchAddedRecords)) {
             for (var i = 0; i < this.batchAddedRecords.length; i++) {
                 index = data.map(function (e) { return e[primaryKey]; }).indexOf(this.batchAddedRecords[i][primaryKey]);
@@ -428,6 +423,11 @@ var BatchEdit = /** @class */ (function () {
                 }
             }
         }
+        if (!isNullOrUndefined(this.parent[targetElement])) {
+            var row = this.parent[targetElement].closest('tr');
+            this.parent.collapseRow(row);
+            this.parent[targetElement] = null;
+        }
         if (!isNullOrUndefined(this.batchDeletedRecords)) {
             for (var i = 0; i < this.batchDeletedRecords.length; i++) {
                 if (!isNullOrUndefined(this.batchDeletedRecords[i][parentItem])) {

package/src/treegrid/actions/edit.js

@@ -712,14 +712,28 @@ var Edit = /** @class */ (function () {
             return;
         }
         if (args.requestType === 'delete') {
-            var data = args.data;
-            for (var i = 0; i < data.length; i++) {
-                this.deleteUniqueID(data[i].uniqueID);
-                var childs = findChildrenRecords(data[i]);
+            var data_1 = args.data;
+            if (isNullOrUndefined(args.data[0].uniqueID)) {
+                var primaryKeys_2 = this.parent.getPrimaryKeyFieldNames();
+                var _loop_1 = function (i) {
+                    this_1.parent.flatData.filter(function (e) {
+                        if (e[primaryKeys_2[0]] === args.data[i][primaryKeys_2[0]]) {
+                            data_1[i] = e;
+                        }
+                    });
+                };
+                var this_1 = this;
+                for (var i = 0; i < data_1.length; i++) {
+                    _loop_1(i);
+                }
+            }
+            for (var i = 0; i < data_1.length; i++) {
+                this.deleteUniqueID(data_1[i].uniqueID);
+                var childs = findChildrenRecords(data_1[i]);
                 for (var c = 0; c < childs.length; c++) {
                     this.deleteUniqueID(childs[c].uniqueID);
                 }
-                args.data = data.concat(childs);
+                args.data = args.data.concat(childs);
             }
         }
         if (args.requestType === 'add' || (this.isAddedRowByMethod && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling))) {
@@ -795,8 +809,7 @@ var Edit = /** @class */ (function () {
             var currentData = this.parent.grid.getCurrentViewRecords();
             if (this.parent.enableVirtualization && args.index !== 0) {
                 this.addRowIndex = this.parent.grid.getCurrentViewRecords().indexOf(this.addRowRecord);
-                this.selectedIndex = parseInt(this.parent.getRows()[this.addRowIndex].getAttribute('aria-rowindex'));
-                ;
+                this.selectedIndex = parseInt(this.parent.getRows()[this.addRowIndex].getAttribute('aria-rowindex'), 10);
             }
             var index = this.addRowIndex;
             value.uniqueID = getUid(this.parent.element.id + '_data_');

package/src/treegrid/base/interface.d.ts

@@ -128,6 +128,8 @@ export interface RowExpandingEventArgs {
     row?: HTMLTableRowElement;
     /** Cancel the row expanding action */
     cancel?: boolean;
+    /** Provides an option to ExpandAll the nested parent rows of the current row. */
+    expandAll?: boolean;
 }
 export interface RowCollapsedEventArgs {
     /**
@@ -150,6 +152,8 @@ export interface RowCollapsingEventArgs {
     row?: HTMLTableRowElement;
     /** Cancel the row collapsing action */
     cancel?: boolean;
+    /** Provides an option to CollapseAll the nested parent rows of the current row. */
+    collapseAll?: boolean;
 }
 export interface CellSaveEventArgs extends SaveEventArgs {
     /** Defines edited column */

package/src/treegrid/base/treegrid-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, addClass, createElement, EventHandler, isNullOrUndefined, Ajax, ModuleDeclaration, extend} from '@syncfusion/ej2-base';import { removeClass, EmitType, Complex, Collection, KeyboardEventArgs, getValue } from '@syncfusion/ej2-base';import {Event, Property, NotifyPropertyChanges, INotifyPropertyChanged, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { Column, ColumnModel } from '../models/column';import { BeforeBatchSaveArgs, BeforeBatchAddArgs, BatchDeleteArgs, BeforeBatchDeleteArgs } from '@syncfusion/ej2-grids';import { GridModel, ColumnQueryModeType, HeaderCellInfoEventArgs, EditSettingsModel as GridEditModel } from '@syncfusion/ej2-grids';import {RowDragEventArgs, RowDropEventArgs, RowDropSettingsModel, RowDropSettings, getUid } from '@syncfusion/ej2-grids';import { ActionEventArgs } from'@syncfusion/ej2-grids';import { DetailDataBoundEventArgs, ClipMode, ColumnChooser}  from '@syncfusion/ej2-grids';import { SearchEventArgs, AddEventArgs, EditEventArgs, DeleteEventArgs}  from '@syncfusion/ej2-grids';import { SaveEventArgs, CellSaveArgs, BatchAddArgs, BatchCancelArgs,  BeginEditArgs, CellEditArgs}  from '@syncfusion/ej2-grids';import { FilterSettings } from '../models/filter-settings';import { TextWrapSettings } from '../models/textwrap-settings';import { TextWrapSettingsModel } from '../models/textwrap-settings-model';import {Filter} from '../actions/filter';import { Logger as TreeLogger } from '../actions/logger';import { BeforeCopyEventArgs, BeforePasteEventArgs } from '@syncfusion/ej2-grids';import { TreeClipboard } from '../actions/clipboard';import {Aggregate} from '../actions/summary';import { Reorder } from '../actions/reorder';import { Resize } from '../actions/resize';import { Selection as TreeGridSelection } from '../actions/selection';import { ColumnMenu } from '../actions/column-menu';import { DetailRow } from '../actions/detail-row';import { Freeze } from '../actions/freeze-column';import { Print } from '../actions/print';import * as events from '../base/constant';import { FilterSettingsModel } from '../models/filter-settings-model';import { SearchSettings} from '../models/search-settings';import { SearchSettingsModel } from '../models/search-settings-model';import {RowInfo, RowDataBoundEventArgs, PageEventArgs, FilterEventArgs, FailureEventArgs, SortEventArgs } from '@syncfusion/ej2-grids';import { RowSelectingEventArgs, RowSelectEventArgs, RowDeselectEventArgs, IIndex, ISelectedCell } from '@syncfusion/ej2-grids';import {ColumnModel as GridColumnModel, Column as GridColumn, CellSelectEventArgs, CellDeselectEventArgs } from '@syncfusion/ej2-grids';import { SelectionSettings } from '../models/selection-settings';import { SelectionSettingsModel } from '../models/selection-settings-model';import {getActualProperties, SortDirection, getObject, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { PrintMode, Data, IGrid, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { ColumnMenuItem, ColumnMenuItemModel, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { PdfExportCompleteArgs, PdfHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, PdfExportProperties, CellSelectingEventArgs, PrintEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import {BeforeDataBoundArgs} from '@syncfusion/ej2-grids';import { DataManager, ReturnOption, RemoteSaveAdaptor, Query, JsonAdaptor, Deferred } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner, Dialog } from '@syncfusion/ej2-popups';import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenRecords } from '../utils';import { Grid, QueryCellInfoEventArgs, Logger } from '@syncfusion/ej2-grids';import { Render } from '../renderer/render';import { VirtualTreeContentRenderer } from '../renderer/virtual-tree-content-render';import { DataManipulation } from './data';import { RowDD } from '../actions/rowdragdrop';import { Sort } from '../actions/sort';import { ITreeData, RowExpandedEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs, TreeGridExcelExportProperties } from './interface';import { CellSaveEventArgs, DataStateChangeEventArgs, RowExpandingEventArgs, TreeGridPdfExportProperties } from './interface';import { iterateArrayOrObject, GridLine } from '@syncfusion/ej2-grids';import { DataSourceChangedEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { ToolbarItems, ToolbarItem, ContextMenuItem, ContextMenuItems, RowPosition, CopyHierarchyType } from '../enum';import { ItemModel, ClickEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { PageSettings } from '../models/page-settings';import { PageSettingsModel } from '../models/page-settings-model';import { AggregateRow } from '../models/summary';import { AggregateRowModel } from '../models/summary-model';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Toolbar } from '../actions/toolbar';import { Page } from '../actions/page';import { ContextMenu } from '../actions/context-menu';import { EditSettings } from '../models/edit-settings';import { EditSettingsModel } from '../models/edit-settings-model';import { Edit} from '../actions/edit';import { SortSettings } from '../models/sort-settings';import { SortSettingsModel } from '../models/sort-settings-model';import { isHidden } from '../utils';import { editAction } from '../actions/crud-actions';import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';import { InfiniteScrollSettingsModel } from '../models/infinite-scroll-settings-model';
+import { Component, addClass, createElement, EventHandler, isNullOrUndefined, Ajax, ModuleDeclaration, extend} from '@syncfusion/ej2-base';import { removeClass, EmitType, Complex, Collection, KeyboardEventArgs, getValue } from '@syncfusion/ej2-base';import {Event, Property, NotifyPropertyChanges, INotifyPropertyChanged, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { Column, ColumnModel } from '../models/column';import { BeforeBatchSaveArgs, BeforeBatchAddArgs, BatchDeleteArgs, BeforeBatchDeleteArgs, Row, CellRenderer, Cell } from '@syncfusion/ej2-grids';import { GridModel, ColumnQueryModeType, HeaderCellInfoEventArgs, EditSettingsModel as GridEditModel } from '@syncfusion/ej2-grids';import {RowDragEventArgs, RowDropEventArgs, RowDropSettingsModel, RowDropSettings, getUid } from '@syncfusion/ej2-grids';import { ActionEventArgs } from'@syncfusion/ej2-grids';import { DetailDataBoundEventArgs, ClipMode, ColumnChooser}  from '@syncfusion/ej2-grids';import { SearchEventArgs, AddEventArgs, EditEventArgs, DeleteEventArgs}  from '@syncfusion/ej2-grids';import { SaveEventArgs, CellSaveArgs, BatchAddArgs, BatchCancelArgs,  BeginEditArgs, CellEditArgs}  from '@syncfusion/ej2-grids';import { FilterSettings } from '../models/filter-settings';import { TextWrapSettings } from '../models/textwrap-settings';import { TextWrapSettingsModel } from '../models/textwrap-settings-model';import {Filter} from '../actions/filter';import { Logger as TreeLogger } from '../actions/logger';import { BeforeCopyEventArgs, BeforePasteEventArgs } from '@syncfusion/ej2-grids';import { TreeClipboard } from '../actions/clipboard';import {Aggregate} from '../actions/summary';import { Reorder } from '../actions/reorder';import { Resize } from '../actions/resize';import { Selection as TreeGridSelection } from '../actions/selection';import { ColumnMenu } from '../actions/column-menu';import { DetailRow } from '../actions/detail-row';import { Freeze } from '../actions/freeze-column';import { Print } from '../actions/print';import * as events from '../base/constant';import { FilterSettingsModel } from '../models/filter-settings-model';import { SearchSettings} from '../models/search-settings';import { SearchSettingsModel } from '../models/search-settings-model';import {RowInfo, RowDataBoundEventArgs, PageEventArgs, FilterEventArgs, FailureEventArgs, SortEventArgs } from '@syncfusion/ej2-grids';import { RowSelectingEventArgs, RowSelectEventArgs, RowDeselectEventArgs, IIndex, ISelectedCell } from '@syncfusion/ej2-grids';import {ColumnModel as GridColumnModel, Column as GridColumn, CellSelectEventArgs, CellDeselectEventArgs } from '@syncfusion/ej2-grids';import { SelectionSettings } from '../models/selection-settings';import { SelectionSettingsModel } from '../models/selection-settings-model';import {getActualProperties, SortDirection, getObject, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { PrintMode, Data, IGrid, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { ColumnMenuItem, ColumnMenuItemModel, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { PdfExportCompleteArgs, PdfHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, PdfExportProperties, CellSelectingEventArgs, PrintEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import {BeforeDataBoundArgs} from '@syncfusion/ej2-grids';import { DataManager, ReturnOption, RemoteSaveAdaptor, Query, JsonAdaptor, Deferred } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner, Dialog } from '@syncfusion/ej2-popups';import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenRecords } from '../utils';import { Grid, QueryCellInfoEventArgs, Logger } from '@syncfusion/ej2-grids';import { Render } from '../renderer/render';import { VirtualTreeContentRenderer } from '../renderer/virtual-tree-content-render';import { DataManipulation } from './data';import { RowDD } from '../actions/rowdragdrop';import { Sort } from '../actions/sort';import { ITreeData, RowExpandedEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs, TreeGridExcelExportProperties } from './interface';import { CellSaveEventArgs, DataStateChangeEventArgs, RowExpandingEventArgs, TreeGridPdfExportProperties } from './interface';import { iterateArrayOrObject, GridLine } from '@syncfusion/ej2-grids';import { DataSourceChangedEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { ToolbarItems, ToolbarItem, ContextMenuItem, ContextMenuItems, RowPosition, CopyHierarchyType } from '../enum';import { ItemModel, ClickEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { PageSettings } from '../models/page-settings';import { PageSettingsModel } from '../models/page-settings-model';import { AggregateRow } from '../models/summary';import { AggregateRowModel } from '../models/summary-model';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Toolbar } from '../actions/toolbar';import { Page } from '../actions/page';import { ContextMenu } from '../actions/context-menu';import { EditSettings } from '../models/edit-settings';import { EditSettingsModel } from '../models/edit-settings-model';import { Edit} from '../actions/edit';import { SortSettings } from '../models/sort-settings';import { SortSettingsModel } from '../models/sort-settings-model';import { isHidden, getExpandStatus } from '../utils';import { editAction } from '../actions/crud-actions';import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';import { InfiniteScrollSettingsModel } from '../models/infinite-scroll-settings-model';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -432,6 +432,21 @@ export interface TreeGridModel extends ComponentModel{
      */
     enableAutoFill?: boolean;
 
+    /**
+     * If `enableAdaptiveUI` is set to true, the pop-up UI will become adaptive to small screens,
+     * and be used for filtering and other features.
+     * ```html
+     * <div id='treegrid'></div>
+     * <script>
+     *  var treegridObj = new TreeGrid({ enableAdaptiveUI: true });
+     *  treegridObj.appendTo('#treegrid');
+     * </script>
+     * ```
+     *
+     * @default false
+     */
+    enableAdaptiveUI?: boolean;
+
     /**
      * If `enableImmutableMode`  is set to true, the TreeGrid will reuse old rows if it exists in the new result instead of
      * full refresh while performing the TreeGrid actions.

package/src/treegrid/base/treegrid.d.ts

@@ -540,6 +540,20 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @default false
      */
     enableAutoFill: boolean;
+    /**
+     * If `enableAdaptiveUI` is set to true, the pop-up UI will become adaptive to small screens,
+     * and be used for filtering and other features.
+     * ```html
+     * <div id='treegrid'></div>
+     * <script>
+     *  var treegridObj = new TreeGrid({ enableAdaptiveUI: true });
+     *  treegridObj.appendTo('#treegrid');
+     * </script>
+     * ```
+     *
+     * @default false
+     */
+    enableAdaptiveUI: boolean;
     /**
      * If `enableImmutableMode`  is set to true, the TreeGrid will reuse old rows if it exists in the new result instead of
      * full refresh while performing the TreeGrid actions.
@@ -1514,6 +1528,12 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      */
     getColumns(isRefresh?: boolean): Column[];
     private updateColumnModel;
+    /**
+     * @param {string} columnUid - Defines column uid
+     * @returns {void}
+     * @hidden
+     */
+    private refreshReactColumnTemplateByUid;
     /**
      * Gets the content div of the TreeGrid.
      *
@@ -1658,9 +1678,12 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      *
      * @param {HTMLTableRowElement} row - Expands the given row
      * @param {Object} record - Expands the given record
+     * @param {Object} key - Primary key value
+     * @param {number} level - Specifies the hierarchical level of the record
      * @returns {void}
      */
-    expandRow(row: HTMLTableRowElement, record?: Object): void;
+    expandRow(row: HTMLTableRowElement, record?: Object, key?: Object, level?: number): void;
+    private expandCollapseAllChildren;
     private setHeightForFrozenContent;
     private getCollapseExpandRecords;
     /**
@@ -1668,9 +1691,10 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      *
      * @param {HTMLTableRowElement} row - Collapse the given row
      * @param {Object} record - Collapse the given record
+     * @param {Object} key - Primary key value
      * @returns {void}
      */
-    collapseRow(row: HTMLTableRowElement, record?: Object): void;
+    collapseRow(row: HTMLTableRowElement, record?: Object, key?: Object): void;
     /**
      * Expands the records at specific hierarchical level
      *
@@ -1678,6 +1702,14 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     expandAtLevel(level: number): void;
+    /**
+     * Expands the records by given primary key value
+     *
+     * @param {Object} key - Expands the parent rows with given primary key value
+     * @returns {void}
+     */
+    expandByKey(key: Object): void;
+    private expandAction;
     private getRecordDetails;
     /**
      * Collapses the records at specific hierarchical level
@@ -1686,6 +1718,15 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     collapseAtLevel(level: number): void;
+    /**
+     * Collapses the records by given primary key value
+     *
+     * @param {Object} key - Collapses the parent rows with given primary key value
+     * @returns {void}
+     */
+    collapseByKey(key: Object): void;
+    private expandCollapseActionByKey;
+    private collapseAction;
     /**
      * Expands All the rows
      *

package/src/treegrid/base/treegrid.js

@@ -21,6 +21,7 @@ import { Component, addClass, createElement, EventHandler, isNullOrUndefined, ex
 import { removeClass, Complex, Collection, getValue } from '@syncfusion/ej2-base';
 import { Event, Property, NotifyPropertyChanges, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';
 import { Column } from '../models/column';
+import { CellRenderer } from '@syncfusion/ej2-grids';
 import { RowDropSettings, getUid } from '@syncfusion/ej2-grids';
 import { FilterSettings } from '../models/filter-settings';
 import { TextWrapSettings } from '../models/textwrap-settings';
@@ -32,7 +33,7 @@ import * as events from '../base/constant';
 import { SearchSettings } from '../models/search-settings';
 import { SelectionSettings } from '../models/selection-settings';
 import { getActualProperties, getObject } from '@syncfusion/ej2-grids';
-import { DataManager, RemoteSaveAdaptor, JsonAdaptor, Deferred } from '@syncfusion/ej2-data';
+import { DataManager, RemoteSaveAdaptor, Query, JsonAdaptor, Deferred } from '@syncfusion/ej2-data';
 import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenRecords } from '../utils';
 import { Grid, Logger } from '@syncfusion/ej2-grids';
@@ -44,7 +45,7 @@ import { PageSettings } from '../models/page-settings';
 import { AggregateRow } from '../models/summary';
 import { EditSettings } from '../models/edit-settings';
 import { SortSettings } from '../models/sort-settings';
-import { isHidden } from '../utils';
+import { isHidden, getExpandStatus } from '../utils';
 import { editAction } from '../actions/crud-actions';
 import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';
 /**
@@ -674,6 +675,7 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.allowResizing = this.allowResizing;
         this.grid.enableHover = this.enableHover;
         this.grid.enableAutoFill = this.enableAutoFill;
+        this.grid.enableAdaptiveUI = this.enableAdaptiveUI;
         this.grid.enableImmutableMode = this.enableImmutableMode;
         this.grid.allowRowDragAndDrop = this.allowRowDragAndDrop;
         this.grid.rowDropSettings = getActualProperties(this.rowDropSettings);
@@ -723,7 +725,7 @@ var TreeGrid = /** @class */ (function (_super) {
                 _this.grid.currentViewData.length !== _this.grid.selectionModule.selectedRowIndexes.length) {
                 var updateRowSelection = 'updateRowSelection';
                 for (var i = 0; i < _this.getRows().length; i++) {
-                    if (_this.getRows()[i].getElementsByClassName("e-frame e-icons e-uncheck").length) {
+                    if (_this.getRows()[i].getElementsByClassName('e-frame e-icons e-uncheck').length) {
                         _this.grid.selectionModule[updateRowSelection](_this.getRows()[i], _this.getCurrentViewRecords()[i].index);
                     }
                 }
@@ -1035,8 +1037,11 @@ var TreeGrid = /** @class */ (function (_super) {
                 _this.notify('clearFilters', { flatData: _this.grid.dataSource });
                 _this.grid.setProperties({ dataSource: _this.dataResults.result }, true);
                 if (isNullOrUndefined(_this.grid['changedProperties'].dataSource)) {
-                    _this.grid.renderModule.data.dataManager = _this.grid.dataSource instanceof DataManager ? _this.grid.dataSource :
+                    _this.grid.renderModule.data.dataManager = _this.grid.dataSource instanceof DataManager ?
+                        _this.grid.dataSource :
                         (isNullOrUndefined(_this.grid.dataSource) ? new DataManager() : new DataManager(_this.grid.dataSource));
+                    _this.grid.renderModule.data.isQueryInvokedFromData = true;
+                    _this.grid.query = _this.grid.query instanceof Query ? _this.grid.query : new Query();
                 }
             }
             var callBackPromise = new Deferred();
@@ -1486,6 +1491,9 @@ var TreeGrid = /** @class */ (function (_super) {
                 case 'enableAutoFill':
                     this.grid.enableAutoFill = this.enableAutoFill;
                     break;
+                case 'enableAdaptiveUI':
+                    this.grid.enableAdaptiveUI = this.enableAdaptiveUI;
+                    break;
                 case 'enableImmutableMode':
                     this.grid.enableImmutableMode = this.enableImmutableMode;
                     break;
@@ -2082,6 +2090,32 @@ var TreeGrid = /** @class */ (function (_super) {
         this[merge] = undefined; // Workaround for blazor updateModel
         return this.columnModel;
     };
+    /**
+     * @param {string} columnUid - Defines column uid
+     * @returns {void}
+     * @hidden
+     */
+    TreeGrid.prototype.refreshReactColumnTemplateByUid = function (columnUid) {
+        var _this = this;
+        if (this.isReact) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.clearTemplate(['columnTemplate'], undefined, function () {
+                var cells = 'cells';
+                var rowIdx = 'index';
+                var rowsObj = _this.grid.getRowsObject();
+                var indent = _this.grid.getIndentCount();
+                var cellIndex = _this.grid.getNormalizedColumnIndex(columnUid);
+                for (var j = 0; j < rowsObj.length; j++) {
+                    if (rowsObj[j].isDataRow && !isNullOrUndefined(rowsObj[j].index)) {
+                        var cell = rowsObj[j][cells][cellIndex];
+                        var cellRenderer = new CellRenderer(_this.grid, _this.grid.serviceLocator);
+                        var td = _this.getCellFromIndex(rowsObj[j].index, cellIndex - indent);
+                        cellRenderer.refreshTD(td, cell, rowsObj[j].data, { index: rowsObj[j][rowIdx] });
+                    }
+                }
+            });
+        }
+    };
     /**
      * Gets the content div of the TreeGrid.
      *
@@ -2351,9 +2385,11 @@ var TreeGrid = /** @class */ (function (_super) {
      *
      * @param {HTMLTableRowElement} row - Expands the given row
      * @param {Object} record - Expands the given record
+     * @param {Object} key - Primary key value
+     * @param {number} level - Specifies the hierarchical level of the record
      * @returns {void}
      */
-    TreeGrid.prototype.expandRow = function (row, record) {
+    TreeGrid.prototype.expandRow = function (row, record, key, level) {
         var _this = this;
         record = this.getCollapseExpandRecords(row, record);
         if (!isNullOrUndefined(row) && row.cells[0].classList.contains('e-lastrowcell')) {
@@ -2363,6 +2399,9 @@ var TreeGrid = /** @class */ (function (_super) {
         this.trigger(events.expanding, args, function (expandingArgs) {
             if (!expandingArgs.cancel) {
                 _this.expandCollapse('expand', row, record);
+                if (expandingArgs.expandAll) {
+                    _this.expandCollapseAllChildren(record, 'expand', key, level);
+                }
                 var children = 'Children';
                 if (!(isRemoteData(_this) && !isOffline(_this)) && (!isCountRequired(_this) || !isNullOrUndefined(record[children]))) {
                     var collapseArgs = { data: record, row: row };
@@ -2372,6 +2411,19 @@ var TreeGrid = /** @class */ (function (_super) {
             }
         });
     };
+    TreeGrid.prototype.expandCollapseAllChildren = function (record, action, key, level) {
+        if ((!isNullOrUndefined(key) && record[this.getPrimaryKeyFieldNames()[0]] !== key) ||
+            (!isNullOrUndefined(level) && level !== record.level)) {
+            return;
+        }
+        var records = findChildrenRecords(record).filter(function (e) {
+            return e.hasChildRecords;
+        });
+        records.unshift(record);
+        for (var i = 0; i < records.length; i++) {
+            this.expandCollapse(action, null, records[i]);
+        }
+    };
     TreeGrid.prototype.setHeightForFrozenContent = function () {
         var freeze = (this.grid.getFrozenLeftColumnsCount() > 0 || this.grid.getFrozenRightColumnsCount() > 0) ? true : false;
         if (this.grid.getFrozenColumns() > 0 || freeze) {
@@ -2395,14 +2447,18 @@ var TreeGrid = /** @class */ (function (_super) {
      *
      * @param {HTMLTableRowElement} row - Collapse the given row
      * @param {Object} record - Collapse the given record
+     * @param {Object} key - Primary key value
      * @returns {void}
      */
-    TreeGrid.prototype.collapseRow = function (row, record) {
+    TreeGrid.prototype.collapseRow = function (row, record, key) {
         var _this = this;
         record = this.getCollapseExpandRecords(row, record);
         var args = { data: record, row: row, cancel: false };
         this.trigger(events.collapsing, args, function (collapsingArgs) {
             if (!collapsingArgs.cancel) {
+                if (collapsingArgs.collapseAll) {
+                    _this.expandCollapseAllChildren(record, 'collapse', key);
+                }
                 _this.expandCollapse('collapse', row, record);
                 var collapseArgs = { data: record, row: row };
                 if (!isRemoteData(_this)) {
@@ -2433,22 +2489,58 @@ var TreeGrid = /** @class */ (function (_super) {
                 }
                 return e.hasChildRecords && e.level === level;
             });
-            this.expandRow(null, rec);
+            this.expandAction(rec, null, level, true);
         }
         else {
             var rec = this.getRecordDetails(level);
-            var row = getObject('rows', rec);
             var record = getObject('records', rec);
-            for (var i = 0; i < record.length; i++) {
-                if (record[i].parentItem !== undefined) {
-                    var pindex = this.flatData[record[i].parentItem.index].index;
-                    if (this.flatData[pindex].expanded === false) {
-                        record.push(this.flatData[pindex]);
-                        this.flatData[pindex].expanded = true;
+            this.expandAction(record, null, level);
+        }
+    };
+    /**
+     * Expands the records by given primary key value
+     *
+     * @param {Object} key - Expands the parent rows with given primary key value
+     * @returns {void}
+     */
+    TreeGrid.prototype.expandByKey = function (key) {
+        this.expandCollapseActionByKey(key, 'Expand');
+    };
+    TreeGrid.prototype.expandAction = function (record, key, level, isPaging) {
+        if (isPaging === void 0) { isPaging = false; }
+        var _loop_1 = function (i) {
+            if (!isNullOrUndefined(record[i].parentItem)) {
+                var puniqueID_1 = record[i].parentItem.uniqueID;
+                var parentItem = this_1.flatData.filter(function (e) {
+                    return e.uniqueID === puniqueID_1;
+                });
+                if (isRemoteData(this_1)) {
+                    parentItem = this_1.getCurrentViewRecords().filter(function (e) {
+                        return e.uniqueID === puniqueID_1;
+                    });
+                }
+                if (parentItem[0].expanded === false) {
+                    record.push(parentItem[0]);
+                    parentItem[0].expanded = true;
+                }
+                else {
+                    if (!getExpandStatus(this_1, parentItem[0], this_1.parentData)) {
+                        if (parentItem[0].expanded && parentItem[0].parentItem !== undefined) {
+                            record.push(parentItem[0]);
+                        }
                     }
                 }
-                this.expandRow(row[i], record[i]);
             }
+            if (!isPaging) {
+                this_1.expandRow(null, record[i], key, level);
+            }
+        };
+        var this_1 = this;
+        for (var i = 0; i < record.length; i++) {
+            _loop_1(i);
+        }
+        if (isPaging) {
+            this.expandRow(null, record, key, level);
         }
     };
     TreeGrid.prototype.getRecordDetails = function (level) {
@@ -2476,14 +2568,46 @@ var TreeGrid = /** @class */ (function (_super) {
                 }
                 return e.hasChildRecords && e.level === level;
             });
-            this.collapseRow(null, record);
+            this.collapseAction(record, null, true);
         }
         else {
             var rec = this.getRecordDetails(level);
-            var rows = getObject('rows', rec);
             var records = getObject('records', rec);
-            for (var i = 0; i < records.length; i++) {
-                this.collapseRow(rows[i], records[i]);
+            this.collapseAction(records);
+        }
+    };
+    /**
+     * Collapses the records by given primary key value
+     *
+     * @param {Object} key - Collapses the parent rows with given primary key value
+     * @returns {void}
+     */
+    TreeGrid.prototype.collapseByKey = function (key) {
+        this.expandCollapseActionByKey(key, 'Collapse');
+    };
+    TreeGrid.prototype.expandCollapseActionByKey = function (key, action) {
+        var primaryKeyField = this.getPrimaryKeyFieldNames()[0];
+        var dataSource = isRemoteData(this) ? this.getCurrentViewRecords() : this.grid.dataSource;
+        if (!isNullOrUndefined(primaryKeyField)) {
+            var rec = dataSource.filter(function (e) {
+                return e[primaryKeyField].toString() === key.toString();
+            });
+            if (action === 'Expand') {
+                this.expandAction(rec, key, null);
+            }
+            else {
+                this.collapseAction(rec, key);
+            }
+        }
+    };
+    TreeGrid.prototype.collapseAction = function (record, key, isPaging) {
+        if (isPaging === void 0) { isPaging = false; }
+        if (isPaging) {
+            this.collapseRow(null, record);
+        }
+        else {
+            for (var i = 0; i < record.length; i++) {
+                this.collapseRow(null, record[i], key);
             }
         }
         if (!this.grid.contentModule.isDataSourceChanged && this.enableVirtualization && this.getRows()
@@ -3393,6 +3517,9 @@ var TreeGrid = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "enableAutoFill", void 0);
+    __decorate([
+        Property(false)
+    ], TreeGrid.prototype, "enableAdaptiveUI", void 0);
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "enableImmutableMode", void 0);

package/src/treegrid/models/column.d.ts

@@ -326,7 +326,16 @@ export declare class Column {
      * @default null
      */
     freeze: freezeDirection;
+    private parent;
     constructor(options: ColumnModel);
+    /**
+     * Update the State changes reflected for TreeGrid columndirective in react platform.
+     *
+     * @param {Column} column - specifies the column
+     * @returns {void}
+     * @hidden
+     */
+    private setProperties;
 }
 /**
  * Interface for a TreeGrid class Column
@@ -694,7 +703,7 @@ export interface ColumnModel {
      *
      * @default Syncfusion.EJ2.Grids.FreezeDirection.None
      * @isEnumeration true
-     * @aspType Syncfusion.EJ2.Grids.FreezeDirection.None
+     * @aspType Syncfusion.EJ2.Grids.FreezeDirection
      */
     freeze?: freezeDirection;
 }

package/src/treegrid/models/column.js

@@ -71,6 +71,25 @@ var Column = /** @class */ (function () {
         this.filter = {};
         merge(this, options);
     }
+    /**
+     * Update the State changes reflected for TreeGrid columndirective in react platform.
+     *
+     * @param {Column} column - specifies the column
+     * @returns {void}
+     * @hidden
+     */
+    Column.prototype.setProperties = function (column) {
+        //Angular two way binding
+        var keys = Object.keys(column);
+        for (var i = 0; i < keys.length; i++) {
+            this[keys[i]] = column[keys[i]];
+            //Refresh the react columnTemplates on state change
+            if (this.parent && this.parent['isReact'] && keys[i] === 'template') {
+                var refreshReactColumnTemplateByUid = 'refreshReactColumnTemplateByUid';
+                this.parent.clipboardModule['treeGridParent'][refreshReactColumnTemplateByUid](this.uid);
+            }
+        }
+    };
     return Column;
 }());
 export { Column };

package/src/treegrid/renderer/virtual-row-model-generator.js

@@ -38,6 +38,12 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
         return _super.prototype.getData.call(this);
     };
     TreeVirtualRowModelGenerator.prototype.generateRows = function (data, notifyArgs) {
+        if (!isNullOrUndefined(notifyArgs.virtualInfo) && notifyArgs.virtualInfo.loadNext && notifyArgs.virtualInfo.nextInfo.page !== this.parent.pageSettings.currentPage) {
+            this.parent.setProperties({ pageSettings: { currentPage: notifyArgs.virtualInfo.nextInfo.page } }, true);
+        }
+        else if (!isNullOrUndefined(notifyArgs.virtualInfo) && !notifyArgs.virtualInfo.loadNext && notifyArgs.virtualInfo.page !== this.parent.pageSettings.currentPage) {
+            this.parent.setProperties({ pageSettings: { currentPage: notifyArgs.virtualInfo.page } }, true);
+        }
         var info = this.getDataInfo();
         if (!isNullOrUndefined(notifyArgs.virtualInfo)) {
             if (notifyArgs.virtualInfo.direction !== 'right' && notifyArgs.virtualInfo.direction !== 'left') {

package/src/treegrid/renderer/virtual-tree-content-render.js

@@ -186,7 +186,8 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         if (isNullOrUndefined(this.observer[containerRect])) {
             this.observer[containerRect] = this.observers[containerRect];
         }
-        if (args.selectedIndex !== 0 || isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule['addRowIndex'])) {
+        if (isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule) || args.selectedIndex !== 0 ||
+            isNullOrUndefined(this.parent['clipboardModule'].treeGridParent.editModule['addRowIndex'])) {
             _super.prototype[selectVirtualRow].call(this, args);
         }
     };