@syncfusion/ej2-treegrid 20.1.47 → 20.1.52

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, 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, TextAlign } 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 { TreeActionEventArgs } from '..';
+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, TextAlign } 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 { TreeActionEventArgs } from '..';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

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

@@ -82,11 +82,16 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private addedRecords;
     private targetElement;
     private isGantt;
+    private isIndentEnabled;
+    private indentOutdentAction;
     /**
      * The `sortModule` is used to manipulate sorting in TreeGrid.
      */
     sortModule: Sort;
     private action;
+    private dropIndex;
+    private dropPosition;
+    private modifiedRecords;
     private selectedRecords;
     private selectedRows;
     private loggerModule;
@@ -99,6 +104,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private isEditCollapse;
     private treeColumnTextAlign;
     private treeColumnField;
+    private stackedHeader;
     /** @hidden */
     initialRender: boolean;
     /** @hidden */
@@ -1211,6 +1217,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     protected render(): void;
+    private refreshToolbarItems;
     private afterGridRender;
     private convertTreeData;
     private bindGridProperties;
@@ -1534,12 +1541,6 @@ 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.
      *
@@ -1701,6 +1702,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     collapseRow(row: HTMLTableRowElement, record?: Object, key?: Object): void;
+    private updateExpandStateMapping;
     /**
      * Expands the records at specific hierarchical level
      *
@@ -2020,6 +2022,20 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     reorderRows(fromIndexes: number[], toIndex: number, position: string): void;
+    /**
+     * Indents the record to one level of hierarchy. Moves the selected row as the last child of its previous row.
+     *
+     * @param {Object} record – specifies the record to do indented
+     * @returns {void}
+     */
+    indent(record?: Object): void;
+    /**
+     * Outdent the record to one level of hierarchy. Moves the selected row as sibling to its parent row.
+     *
+     * @param {Object} record – specifies the record to do outdented
+     * @returns {void}
+     */
+    outdent(record?: Object): void;
     /**
      * `columnchooserModule` is used to dynamically show or hide the TreeGrid columns.
      *

package/src/treegrid/base/treegrid.js

@@ -21,7 +21,6 @@ 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';
@@ -39,7 +38,6 @@ import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenReco
 import { Grid, Logger } from '@syncfusion/ej2-grids';
 import { Render } from '../renderer/render';
 import { DataManipulation } from './data';
-import { RowDD } from '../actions/rowdragdrop';
 import { iterateArrayOrObject } from '@syncfusion/ej2-grids';
 import { ToolbarItem, ContextMenuItems } from '../enum';
 import { PageSettings } from '../models/page-settings';
@@ -69,6 +67,9 @@ var TreeGrid = /** @class */ (function (_super) {
         _this.changedRecords = 'changedRecords';
         _this.deletedRecords = 'deletedRecords';
         _this.addedRecords = 'addedRecords';
+        _this.indentOutdentAction = 'indentOutdentAction';
+        _this.modifiedRecords = [];
+        _this.stackedHeader = false;
         _this.objectEqualityChecker = function (old, current) {
             if (old) {
                 var keys = Object.keys(old);
@@ -477,14 +478,14 @@ var TreeGrid = /** @class */ (function (_super) {
         return modules;
     };
     TreeGrid.prototype.extendRequiredModules = function (modules) {
-        if (this.allowRowDragAndDrop) {
-            modules.push({
-                member: 'rowDragAndDrop',
-                args: [this]
-            });
-        }
-        if (!isNullOrUndefined(this.toolbar) && (this.toolbar['includes']('Indent') || this.toolbar['includes']('Outdent'))) {
-            TreeGrid_1.Inject(RowDD);
+        var IsRowDDInjected = this.injectedModules.filter(function (e) {
+            return e.name === 'RowDD';
+        });
+        if (this.allowRowDragAndDrop || IsRowDDInjected.length) {
+            if ((!isNullOrUndefined(this.toolbar) && (this.toolbar['includes']('Indent') ||
+                this.toolbar['includes']('Outdent')))) {
+                this.isIndentEnabled = true;
+            }
             modules.push({
                 member: 'rowDragAndDrop',
                 args: [this]
@@ -613,6 +614,9 @@ var TreeGrid = /** @class */ (function (_super) {
         var root = 'root';
         this.grid[root] = this[root] ? this[root] : this;
         this.grid.appendTo(gridContainer);
+        if (this.isIndentEnabled) {
+            this.refreshToolbarItems();
+        }
         this.wireEvents();
         this.renderComplete();
         var destroyTemplate = 'destroyTemplate';
@@ -626,6 +630,15 @@ var TreeGrid = /** @class */ (function (_super) {
             }
         };
     };
+    TreeGrid.prototype.refreshToolbarItems = function () {
+        var toolbarElement = this.toolbarModule.getToolbar();
+        var indentID = this.element.id + '_gridcontrol_indent';
+        var outdentID = this.element.id + '_gridcontrol_outdent';
+        var indentElement = toolbarElement.querySelector('#' + indentID).parentElement;
+        var outdentElement = toolbarElement.querySelector('#' + outdentID).parentElement;
+        indentElement.classList.add('e-hidden');
+        outdentElement.classList.add('e-hidden');
+    };
     TreeGrid.prototype.afterGridRender = function () {
         if (!isNullOrUndefined(this.grid.clipboardModule)) {
             this.grid.clipboardModule.destroy();
@@ -1105,14 +1118,24 @@ var TreeGrid = /** @class */ (function (_super) {
             }
             if (_this.action === 'indenting' || _this.action === 'outdenting') {
                 _this.action = _this.action === 'indenting' ? 'indented' : 'outdented';
+                var selectedItem_1 = [_this.selectedRecords];
                 var actionArgs = {
+                    data: selectedItem_1,
+                    dropIndex: _this.dropIndex,
+                    dropPosition: _this.dropPosition,
+                    modifiedRecords: _this.modifiedRecords,
                     requestType: _this.action,
-                    data: _this.selectedRecords,
                     row: _this.selectedRows
                 };
                 _this.trigger(events.actionComplete, actionArgs);
+                var currentPageItem = _this.getCurrentViewRecords().filter(function (e) {
+                    return e.uniqueID === selectedItem_1[0].uniqueID;
+                });
+                if (!currentPageItem.length) {
+                    _this.refreshToolbarItems();
+                }
                 _this.action = '';
-                _this.selectedRecords = _this.selectedRows = [];
+                _this.selectedRecords = _this.selectedRows = _this.modifiedRecords = [];
             }
             else {
                 _this.trigger(events.actionComplete, args);
@@ -1316,7 +1339,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     case ToolbarItem.RowIndent:
                         tooltipText = this.l10n.getConstant('RowIndent');
                         items.push({
-                            text: tooltipText, tooltipText: tooltipText, disabled: true,
+                            text: tooltipText, tooltipText: tooltipText,
                             prefixIcon: 'e-indent', id: this.element.id + '_gridcontrol_indent'
                         });
                         break;
@@ -1324,7 +1347,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     case ToolbarItem.RowOutdent:
                         tooltipText = this.l10n.getConstant('RowOutdent');
                         items.push({
-                            text: tooltipText, tooltipText: tooltipText, disabled: true,
+                            text: tooltipText, tooltipText: tooltipText,
                             prefixIcon: 'e-outdent', id: this.element.id + '_gridcontrol_outdent'
                         });
                         break;
@@ -1943,10 +1966,13 @@ var TreeGrid = /** @class */ (function (_super) {
         rowData.parentUniqueID = record.parentUniqueID;
         rowData.expanded = record.expanded;
         this.grid.setRowData(key, rowData);
-        var table = this.getContentTable();
-        var sHeight = table.scrollHeight;
-        var clientHeight = this.getContent().clientHeight;
-        this.lastRowBorder(this.getRows()[record.index], sHeight <= clientHeight);
+        var visibleRecords = this.getVisibleRecords();
+        if (visibleRecords.length > 0 && key === (visibleRecords[visibleRecords.length - 1])[primaryKey]) {
+            var table = this.getContentTable();
+            var sHeight = table.scrollHeight;
+            var clientHeight = this.getContent().clientHeight;
+            this.lastRowBorder(this.getRows()[currentRecords.indexOf(record)], sHeight <= clientHeight);
+        }
     };
     /**
      * Navigates to the specified target page.
@@ -2002,6 +2028,10 @@ var TreeGrid = /** @class */ (function (_super) {
      */
     TreeGrid.prototype.getColumnByUid = function (uid) {
         var Columns = this.initialRender ? this.grid.columns : this.columns;
+        var columnModel = 'columnModel';
+        if (this.grid.columns.length !== this.columnModel.length) {
+            Columns = this.grid[columnModel];
+        }
         return iterateArrayOrObject(Columns, function (item) {
             if (item.uid === uid) {
                 return item;
@@ -2129,7 +2159,6 @@ var TreeGrid = /** @class */ (function (_super) {
             temp = this.columnModel[this.treeColumnIndex].template;
             field = this.columnModel[this.treeColumnIndex].field;
         }
-        var stackedHeader = false;
         var gridColumn;
         if (!this.enableColumnVirtualization || (this.enableColumnVirtualization && this.columnModel.length === gridColumns.length)) {
             this.columnModel = [];
@@ -2148,40 +2177,14 @@ var TreeGrid = /** @class */ (function (_super) {
         var merge = 'deepMerge';
         this[merge] = ['columns']; // Workaround for blazor updateModel
         if (this.grid.columns.length !== this.columnModel.length) {
-            stackedHeader = true;
+            this.stackedHeader = true;
         }
-        if (!stackedHeader) {
+        if (!this.stackedHeader) {
             this.setProperties({ columns: this.columnModel }, true);
         }
         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.
      *
@@ -2327,8 +2330,14 @@ var TreeGrid = /** @class */ (function (_super) {
         this.uniqueIDCollection = {};
         this.convertTreeData(this.dataSource);
         if (!isCountRequired(this)) {
-            this.grid.dataSource = !(this.dataSource instanceof DataManager) ? this.flatData :
-                new DataManager(this.dataSource.dataSource, this.dataSource.defaultQuery, this.dataSource.adaptor);
+            if (!(this.dataSource instanceof DataManager)) {
+                this.grid.dataSource = this.flatData;
+            }
+            else {
+                this.grid.setProperties({
+                    dataSource: new DataManager(this.dataSource.dataSource, this.dataSource.defaultQuery, this.dataSource.adaptor)
+                }, true);
+            }
         }
         this.grid.refresh();
     };
@@ -2472,6 +2481,9 @@ var TreeGrid = /** @class */ (function (_super) {
                 if (!(isRemoteData(_this) && !isOffline(_this)) && (!isCountRequired(_this) || !isNullOrUndefined(record[children]))) {
                     var collapseArgs = { data: record, row: row };
                     _this.setHeightForFrozenContent();
+                    if (!isNullOrUndefined(_this.expandStateMapping)) {
+                        _this.updateExpandStateMapping(collapseArgs.data, true);
+                    }
                     _this.trigger(events.expanded, collapseArgs);
                 }
             }
@@ -2534,6 +2546,9 @@ var TreeGrid = /** @class */ (function (_super) {
                 var collapseArgs = { data: record, row: row };
                 if (!isRemoteData(_this)) {
                     _this.setHeightForFrozenContent();
+                    if (!isNullOrUndefined(_this.expandStateMapping)) {
+                        _this.updateExpandStateMapping(collapseArgs.data, false);
+                    }
                     _this.trigger(events.collapsed, collapseArgs);
                     if (_this.enableInfiniteScrolling) {
                         var scrollHeight = _this.grid.getContent().firstElementChild.scrollHeight;
@@ -2546,6 +2561,19 @@ var TreeGrid = /** @class */ (function (_super) {
             }
         });
     };
+    TreeGrid.prototype.updateExpandStateMapping = function (record, state) {
+        var totalRecords = record;
+        if (totalRecords.length) {
+            for (var i = 0; i < totalRecords.length; i++) {
+                totalRecords[i][this.expandStateMapping] = state;
+                editAction({ value: totalRecords[i], action: 'edit' }, this, this.isSelfReference, totalRecords[i].index, this.grid.selectedRowIndex, this.expandStateMapping);
+            }
+        }
+        else {
+            record[this.expandStateMapping] = state;
+            editAction({ value: record, action: 'edit' }, this, this.isSelfReference, record.index, this.grid.selectedRowIndex, this.expandStateMapping);
+        }
+    };
     /**
      * Expands the records at specific hierarchical level
      *
@@ -3462,6 +3490,30 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.reorderRows = function (fromIndexes, toIndex, position) {
         this.rowDragAndDropModule.reorderRows(fromIndexes, toIndex, position);
     };
+    /**
+     * Indents the record to one level of hierarchy. Moves the selected row as the last child of its previous row.
+     *
+     * @param {Object} record – specifies the record to do indented
+     * @returns {void}
+     */
+    TreeGrid.prototype.indent = function (record) {
+        if (!isNullOrUndefined(this.rowDragAndDropModule)) {
+            record = record;
+            this.rowDragAndDropModule[this.indentOutdentAction](record, 'indent');
+        }
+    };
+    /**
+     * Outdent the record to one level of hierarchy. Moves the selected row as sibling to its parent row.
+     *
+     * @param {Object} record – specifies the record to do outdented
+     * @returns {void}
+     */
+    TreeGrid.prototype.outdent = function (record) {
+        if (!isNullOrUndefined(this.rowDragAndDropModule)) {
+            record = record;
+            this.rowDragAndDropModule[this.indentOutdentAction](record, 'outdent');
+        }
+    };
     var TreeGrid_1;
     __decorate([
         Property(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

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'].renderModule[refreshReactColumnTemplateByUid](this.uid);
+            }
+        }
+    };
     return Column;
 }());
 export { Column };

package/src/treegrid/models/rowdrop-settings.d.ts

@@ -13,7 +13,15 @@ export declare class RowDropSettings extends ChildProperty<RowDropSettings> {
 }
 export interface TreeActionEventArgs {
     requestType?: string;
-    data?: ITreeData[];
+    data?: ITreeData | ITreeData[];
     row?: Object[];
     cancel?: boolean;
+    /** Defines the corresponding action */
+    action?: string;
+    /** Defines the target element from index. */
+    dropIndex?: number;
+    /** Defines drop position of the dragged record */
+    dropPosition?: string;
+    /** Defines the modified records. */
+    modifiedRecords?: ITreeData[];
 }

package/src/treegrid/renderer/render.d.ts

@@ -29,6 +29,12 @@ export declare class Render {
      */
     cellRender(args: QueryCellInfoEventArgs): void;
     private updateTreeCell;
+    /**
+    * @param {string} columnUid - Defines column uid
+    * @returns {void}
+    * @hidden
+    */
+    private refreshReactColumnTemplateByUid;
     private columnTemplateResult;
     private reactTemplateRender;
     destroy(): void;

package/src/treegrid/renderer/render.js

@@ -1,5 +1,5 @@
 import { getObject, appendChildren } from '@syncfusion/ej2-grids';
-import { templateCompiler, extend } from '@syncfusion/ej2-grids';
+import { templateCompiler, extend, CellRenderer } from '@syncfusion/ej2-grids';
 import { addClass, createElement, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 import { isRemoteData, isOffline, getExpandStatus, isFilterChildHierarchy } from '../utils';
@@ -275,6 +275,32 @@ var Render = /** @class */ (function () {
             args.cell.innerHTML = '';
         }
     };
+    /**
+    * @param {string} columnUid - Defines column uid
+    * @returns {void}
+    * @hidden
+    */
+    Render.prototype.refreshReactColumnTemplateByUid = function (columnUid) {
+        var _this = this;
+        if (this.parent.isReact) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.parent.clearTemplate(['columnTemplate'], undefined, function () {
+                var cells = 'cells';
+                var rowIdx = 'index';
+                var rowsObj = _this.parent.grid.getRowsObject();
+                var indent = _this.parent.grid.getIndentCount();
+                var cellIndex = _this.parent.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.parent.grid, _this.parent.grid.serviceLocator);
+                        var td = _this.parent.getCellFromIndex(rowsObj[j].index, cellIndex - indent);
+                        cellRenderer.refreshTD(td, cell, rowsObj[j].data, { index: rowsObj[j][rowIdx] });
+                    }
+                }
+            });
+        }
+    };
     Render.prototype.columnTemplateResult = function (args) {
         this.templateResult = args.template;
     };

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

@@ -126,7 +126,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                     getValue('virtualEle', this).setVirtualHeight(this.parent.getRowHeight() * e.count, '100%');
                 }
             }
-            if ((!isNullOrUndefined(e.requestType) && e.requestType.toString() === 'collapseAll') || this.isDataSourceChanged) {
+            if ((!isNullOrUndefined(e.requestType) && e.requestType.toString() === 'collapseAll') || (this.isDataSourceChanged && this.startIndex === -1)) {
                 this.contents.scrollTop = 0;
                 this.isDataSourceChanged = false;
             }

package/styles/bootstrap-dark.css

@@ -159,10 +159,6 @@
   width: 18px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -216,10 +212,6 @@
   color: #f0f0f0;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }

package/styles/bootstrap.css

@@ -160,10 +160,6 @@
   width: 18px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -217,10 +213,6 @@
   color: #333;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }

package/styles/bootstrap4.css

@@ -200,10 +200,6 @@
   width: 16px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 12px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -254,10 +250,6 @@
   color: #343a40;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 9px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }

package/styles/bootstrap5-dark.css

@@ -200,10 +200,6 @@
   width: 22px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 7px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -254,10 +250,6 @@
   color: #dee2e6;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 12px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }

package/styles/bootstrap5.css

@@ -200,10 +200,6 @@
   width: 22px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 7px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -254,10 +250,6 @@
   color: #343a40;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 12px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }

package/styles/fabric-dark.css

@@ -133,10 +133,6 @@
   width: 18px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 9px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -190,10 +186,6 @@
   color: #dadada;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }