@syncfusion/ej2-treegrid 19.4.56 → 20.1.51

package/src/treegrid/actions/toolbar.js

@@ -44,46 +44,59 @@ var Toolbar = /** @class */ (function () {
     };
     Toolbar.prototype.refreshToolbar = function (args) {
         var tObj = this.parent;
-        if (args.row.rowIndex === 0 || tObj.getSelectedRecords().length > 1) {
-            this.enableItems([tObj.element.id + '_gridcontrol_indent', tObj.element.id + '_gridcontrol_outdent'], false);
+        var indentElement;
+        var outdentElement;
+        var indentID = tObj.element.id + '_gridcontrol_indent';
+        var outdentID = tObj.element.id + '_gridcontrol_outdent';
+        var toolbarElement = this.parent.grid.toolbarModule.getToolbar();
+        var indentEle = toolbarElement.querySelector('#' + indentID);
+        var outdentEle = toolbarElement.querySelector('#' + outdentID);
+        var row = args.row;
+        var selectedrow = tObj.getSelectedRows()[0];
+        if (!isNullOrUndefined(row[0])) {
+            row = row[0];
         }
-        else if (args['name'] !== "rowDeselected") {
-            if (!isNullOrUndefined(tObj.getCurrentViewRecords()[args.row.rowIndex])) {
-                if (!isNullOrUndefined(tObj.getCurrentViewRecords()[args.row.rowIndex]) &&
-                    (tObj.getCurrentViewRecords()[args.row.rowIndex].level >
-                        tObj.getCurrentViewRecords()[args.row.rowIndex - 1].level)) {
-                    this.enableItems([tObj.element.id + '_gridcontrol_indent'], false);
-                }
-                else {
-                    this.enableItems([tObj.element.id + '_gridcontrol_indent'], true);
-                }
-                if (tObj.getCurrentViewRecords()[args.row.rowIndex].level ===
-                    tObj.getCurrentViewRecords()[args.row.rowIndex - 1].level) {
-                    this.enableItems([tObj.element.id + '_gridcontrol_indent'], true);
+        row = (!isNullOrUndefined(selectedrow) && selectedrow.rowIndex !== row.rowIndex) ? selectedrow : row;
+        if (indentEle !== null && outdentEle !== null) {
+            indentElement = toolbarElement.querySelector('#' + indentID).parentElement;
+            outdentElement = toolbarElement.querySelector('#' + outdentID).parentElement;
+            if (row.rowIndex === 0 || tObj.getSelectedRowIndexes().length > 1) {
+                indentElement.classList.add('e-hidden');
+                outdentElement.classList.add('e-hidden');
+            }
+            else if (args['name'] !== 'rowDeselected' || (!isNullOrUndefined(selectedrow) && tObj.grid.isCheckBoxSelection)) {
+                var selectedItem = tObj.getCurrentViewRecords()[row.rowIndex];
+                if (!isNullOrUndefined(selectedItem)) {
+                    if ((selectedItem.level > tObj.getCurrentViewRecords()[row.rowIndex - 1].level)) {
+                        indentElement.classList.add('e-hidden');
+                    }
+                    else {
+                        indentElement.classList.remove('e-hidden');
+                    }
+                    if (selectedItem.level === tObj.getCurrentViewRecords()[row.rowIndex - 1].level) {
+                        indentElement.classList.remove('e-hidden');
+                    }
+                    if (selectedItem.level === 0) {
+                        outdentElement.classList.add('e-hidden');
+                    }
+                    if (selectedItem.level !== 0) {
+                        outdentElement.classList.remove('e-hidden');
+                    }
                 }
-                if (tObj.getCurrentViewRecords()[args.row.rowIndex].level === 0) {
-                    this.enableItems([tObj.element.id + '_gridcontrol_outdent'], false);
+            }
+            if (args['name'] === 'rowDeselected' && isNullOrUndefined(selectedrow) && !tObj.grid.isCheckBoxSelection) {
+                if (this.parent.toolbar['includes']('Indent')) {
+                    indentElement.classList.add('e-hidden');
                 }
-                if (tObj.getCurrentViewRecords()[args.row.rowIndex].level !== 0) {
-                    this.enableItems([tObj.element.id + '_gridcontrol_outdent'], true);
+                if (this.parent.toolbar['includes']('Outdent')) {
+                    outdentElement.classList.add('e-hidden');
                 }
             }
         }
-        if (args['name'] === "rowDeselected") {
-            if (this.parent.toolbar['includes']('Indent')) {
-                this.enableItems([tObj.element.id + '_gridcontrol_indent'], false);
-            }
-            if (this.parent.toolbar['includes']('Outdent')) {
-                this.enableItems([tObj.element.id + '_gridcontrol_outdent'], false);
-            }
-        }
-        if (args.row.rowIndex === 0 && !isNullOrUndefined(args.data.parentItem)) {
-            this.enableItems([tObj.element.id + '_gridcontrol_outdent'], true);
-        }
     };
     Toolbar.prototype.toolbarClickHandler = function (args) {
         var tObj = this.parent;
-        var action = 'action';
+        var indentOutdentAction = 'indentOutdentAction';
         if (this.parent.editSettings.mode === 'Cell' && this.parent.grid.editSettings.mode === 'Batch' &&
             args.item.id === this.parent.grid.element.id + '_update') {
             args.cancel = true;
@@ -95,57 +108,15 @@ var Toolbar = /** @class */ (function () {
         if (args.item.id === this.parent.grid.element.id + '_collapseall') {
             this.parent.collapseAll();
         }
-        if (args.item.id === tObj.grid.element.id + '_indent' && tObj.getSelectedRecords().length) {
-            var record = tObj.getCurrentViewRecords()[tObj.getSelectedRowIndexes()[0] - 1];
-            var dropIndex = void 0;
-            if (record.level > tObj.getSelectedRecords()[0].level) {
-                for (var i = 0; i < tObj.getCurrentViewRecords().length; i++) {
-                    if (tObj.getCurrentViewRecords()[i].taskData === record.parentItem.taskData) {
-                        dropIndex = i;
-                    }
-                }
-            }
-            else {
-                dropIndex = tObj.getSelectedRowIndexes()[0] - 1;
-            }
-            this.parent[action] = 'indenting';
-            this.eventTrigger('indenting', dropIndex);
+        if (args.item.id === tObj.grid.element.id + '_indent' && tObj.getSelectedRecords().length
+            && !isNullOrUndefined(tObj.rowDragAndDropModule)) {
+            this.parent.rowDragAndDropModule[indentOutdentAction](null, 'indent');
         }
-        if (args.item.id === tObj.grid.element.id + '_outdent' && tObj.getSelectedRecords().length) {
-            var dropIndex = void 0;
-            var parentItem = tObj.getSelectedRecords()[0].parentItem;
-            for (var i = 0; i < tObj.getCurrentViewRecords().length; i++) {
-                if (tObj.getCurrentViewRecords()[i].taskData === parentItem.taskData) {
-                    dropIndex = i;
-                }
-            }
-            this.parent[action] = 'outdenting';
-            this.eventTrigger('outdenting', dropIndex);
+        if (args.item.id === tObj.grid.element.id + '_outdent' && tObj.getSelectedRecords().length
+            && !isNullOrUndefined(tObj.rowDragAndDropModule)) {
+            this.parent.rowDragAndDropModule[indentOutdentAction](null, 'outdent');
         }
     };
-    Toolbar.prototype.eventTrigger = function (action, dropIndex) {
-        var _this = this;
-        var selectedRecords = 'selectedRecords';
-        var selectedRows = 'selectedRows';
-        this.parent[selectedRows] = this.parent.getSelectedRows();
-        this.parent[selectedRecords] = this.parent.getSelectedRecords();
-        var actionArgs = {
-            requestType: action,
-            data: this.parent.getSelectedRecords(),
-            row: this.parent.getSelectedRows(),
-            cancel: false
-        };
-        this.parent.trigger(events.actionBegin, actionArgs, function (actionArgs) {
-            if (!actionArgs.cancel) {
-                if (actionArgs.requestType === 'indenting') {
-                    _this.parent.reorderRows([_this.parent.getSelectedRowIndexes()[0]], dropIndex, 'child');
-                }
-                else if (actionArgs.requestType === 'outdenting') {
-                    _this.parent.reorderRows([_this.parent.getSelectedRowIndexes()[0]], dropIndex, 'below');
-                }
-            }
-        });
-    };
     /**
      * Gets the toolbar of the TreeGrid.
      *

package/src/treegrid/actions/virtual-scroll.js

@@ -117,7 +117,7 @@ var VirtualScroll = /** @class */ (function () {
         }
         else {
             var requestType = pageingDetails.actionArgs.requestType;
-            if (requestType === 'filtering' || requestType === 'collapseAll' ||
+            if (requestType === 'filtering' || requestType === 'collapseAll' || requestType === 'searching' ||
                 (requestType === 'refresh' && this.parent.enableCollapseAll && endIndex > visualData.length)) {
                 startIndex = 0;
                 endIndex = this.parent.grid.pageSettings.pageSize - 1;

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 } 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;
@@ -97,6 +102,8 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private isExpandRefresh;
     private gridSettings;
     private isEditCollapse;
+    private treeColumnTextAlign;
+    private treeColumnField;
     /** @hidden */
     initialRender: boolean;
     /** @hidden */
@@ -1209,6 +1216,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     protected render(): void;
+    private refreshToolbarItems;
     private afterGridRender;
     private convertTreeData;
     private bindGridProperties;
@@ -1263,6 +1271,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     onPropertyChanged(newProp: TreeGridModel): void;
+    private updateTreeColumnTextAlign;
     /**
      * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).
      *
@@ -1531,12 +1540,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.
      *
@@ -1698,6 +1701,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
      *
@@ -1750,6 +1754,15 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private updateAltRow;
     private treeColumnRowTemplate;
     private collapseRemoteChild;
+    /**
+     * Updates the rows and cells
+     *
+     * @param {Object[]} records - Updates the given records
+     * @param {HTMLTableRowElement[]} rows - Updates the given rows
+     * @param {number} index -  Updates the given cell index
+     * @returns {void}
+     */
+    private updateRowAndCellElements;
     /**
      * @hidden
      * @returns {void}
@@ -2008,6 +2021,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';
@@ -68,6 +67,8 @@ var TreeGrid = /** @class */ (function (_super) {
         _this.changedRecords = 'changedRecords';
         _this.deletedRecords = 'deletedRecords';
         _this.addedRecords = 'addedRecords';
+        _this.indentOutdentAction = 'indentOutdentAction';
+        _this.modifiedRecords = [];
         _this.objectEqualityChecker = function (old, current) {
             if (old) {
                 var keys = Object.keys(old);
@@ -476,7 +477,14 @@ var TreeGrid = /** @class */ (function (_super) {
         return modules;
     };
     TreeGrid.prototype.extendRequiredModules = function (modules) {
-        if (this.allowRowDragAndDrop) {
+        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]
@@ -602,7 +610,12 @@ var TreeGrid = /** @class */ (function (_super) {
             }
             return modules;
         };
+        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';
@@ -616,6 +629,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();
@@ -1095,14 +1117,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);
@@ -1306,7 +1338,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;
@@ -1314,7 +1346,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;
@@ -1367,6 +1399,15 @@ var TreeGrid = /** @class */ (function (_super) {
                 this.columnModel.push(new Column(treeGridColumn));
             }
             gridColumnCollection.push(gridColumn);
+            if (!isNullOrUndefined(this.columnModel[this.treeColumnIndex]) && this.enableRtl) {
+                if (gridColumn.field === this.columnModel[this.treeColumnIndex].field) {
+                    if (isNullOrUndefined(this.treeColumnTextAlign)) {
+                        this.treeColumnTextAlign = this.columnModel[this.treeColumnIndex].textAlign;
+                        this.treeColumnField = this.columnModel[this.treeColumnIndex].field;
+                    }
+                    gridColumn.textAlign = 'Right';
+                }
+            }
         }
         return gridColumnCollection;
     };
@@ -1539,6 +1580,9 @@ var TreeGrid = /** @class */ (function (_super) {
                     this.grid.allowPdfExport = this.allowPdfExport;
                     break;
                 case 'enableRtl':
+                    if (!isNullOrUndefined(this.treeColumnField)) {
+                        this.updateTreeColumnTextAlign();
+                    }
                     this.grid.enableRtl = this.enableRtl;
                     break;
                 case 'allowReordering':
@@ -1579,6 +1623,11 @@ var TreeGrid = /** @class */ (function (_super) {
             }
         }
     };
+    TreeGrid.prototype.updateTreeColumnTextAlign = function () {
+        var gridColumn = this.grid.getColumnByField(this.treeColumnField);
+        gridColumn.textAlign = this.enableRtl ? 'Right' : this.treeColumnTextAlign;
+        this.grid.refreshColumns();
+    };
     /**
      * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).
      *
@@ -1916,10 +1965,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.
@@ -2129,32 +2181,6 @@ 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.
      *
@@ -2300,8 +2326,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();
     };
@@ -2445,6 +2477,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);
                 }
             }
@@ -2507,6 +2542,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;
@@ -2519,6 +2557,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
      *
@@ -2961,7 +3012,7 @@ var TreeGrid = /** @class */ (function (_super) {
                 freezeRightRows[i].style.display = displayAction;
             }
             this.notify('childRowExpand', { row: rows[i] });
-            if (!isNullOrUndefined(childRecords[i].childRecords) && (action !== 'expand' ||
+            if ((!isNullOrUndefined(childRecords[i].childRecords) && childRecords[i].childRecords.length > 0) && (action !== 'expand' ||
                 isNullOrUndefined(childRecords[i].expanded) || childRecords[i].expanded)) {
                 this.expandCollapse(action, rows[i], childRecords[i], true);
                 if (this.frozenColumns <= this.treeColumnIndex && !isNullOrUndefined(movableRows)) {
@@ -3060,6 +3111,28 @@ var TreeGrid = /** @class */ (function (_super) {
             }
         }
     };
+    /**
+     * Updates the rows and cells
+     *
+     * @param {Object[]} records - Updates the given records
+     * @param {HTMLTableRowElement[]} rows - Updates the given rows
+     * @param {number} index -  Updates the given cell index
+     * @returns {void}
+     */
+    TreeGrid.prototype.updateRowAndCellElements = function (records, rows, index) {
+        for (var i = 0; i < records.length; i++) {
+            this.renderModule.cellRender({
+                data: records[i], cell: rows[i].cells[index],
+                column: this.grid.getColumns()[this.treeColumnIndex],
+                requestType: 'rowDragAndDrop'
+            });
+            if (this['action'] === 'indenting' || this['action'] === 'outdenting') {
+                this.renderModule.RowModifier({
+                    data: records[i], row: rows[i]
+                });
+            }
+        }
+    };
     /**
      * @hidden
      * @returns {void}
@@ -3413,6 +3486,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

@@ -329,12 +329,12 @@ export declare class Column {
     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
-     */
+    * Update the State changes reflected for TreeGrid columndirective in react platform.
+    *
+    * @param {Column} column - specifies the column
+    * @returns {void}
+    * @hidden
+    */
     private setProperties;
 }
 /**