@syncfusion/ej2-treegrid 19.4.54 → 20.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.54
+*  version : 20.1.47
 *  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.4.52",
+  "_id": "@syncfusion/ej2-treegrid@18.16.3",
   "_inBundle": false,
-  "_integrity": "sha512-B6Doo437VJTVspTB15gVZ40BpaqThNJQJ6/Gl/Ei7zTnJY6Tg/NEyW8hajktphWX264WotqDWdruY1UfNY6pkA==",
+  "_integrity": "sha512-OaaaeQK1Wag332oQTxhdgffuJg+IQA9aBRYfHc5OgYGw+FgdJAu4y/XBVY3LTgkZ0Z1qKxZIU2KxTjs/m0n7vg==",
   "_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-new/@syncfusion/ej2-treegrid/-/ej2-treegrid-19.4.52.tgz",
-  "_shasum": "88f378640e61e1f0fb7be34f3f84685a3b015430",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-treegrid/-/ej2-treegrid-18.16.3.tgz",
+  "_shasum": "348932505ec2558f8d30b8ffead3f508749563e8",
   "_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.4.52",
-    "@syncfusion/ej2-data": "~19.4.54",
-    "@syncfusion/ej2-grids": "~19.4.54",
-    "@syncfusion/ej2-popups": "~19.4.53"
+    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-data": "~20.1.47",
+    "@syncfusion/ej2-grids": "~20.1.47",
+    "@syncfusion/ej2-popups": "~20.1.47"
   },
   "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.4.54",
+  "version": "20.1.47",
   "sideEffects": false
 }

package/src/treegrid/actions/crud-actions.js

@@ -66,7 +66,9 @@ export function editAction(details, control, isSelfReference, addRowIndex, selec
                                 var childRecords = parentData ? parentData[control.childMapping] : [];
                                 for (var p = childRecords.length - 1; p >= 0; p--) {
                                     if (childRecords[p][control.idMapping] === currentData_1[control.idMapping]) {
-                                        parentData['childRecords'].splice(p, 1);
+                                        if (!control.enableImmutableMode) {
+                                            parentData['childRecords'].splice(p, 1);
+                                        }
                                         childRecords.splice(p, 1);
                                         if (!childRecords.length) {
                                             parentData.hasChildRecords = false;

package/src/treegrid/actions/edit.js

@@ -275,7 +275,7 @@ var Edit = /** @class */ (function () {
         var promise = 'promise';
         var prom = args[promise];
         delete args[promise];
-        if (this.parent.enableVirtualization && !isNullOrUndefined(this.prevAriaRowIndex)) {
+        if (this.parent.enableVirtualization && !isNullOrUndefined(this.prevAriaRowIndex) && this.prevAriaRowIndex !== '-1') {
             args.row.setAttribute('aria-rowindex', this.prevAriaRowIndex);
             this.prevAriaRowIndex = undefined;
         }

package/src/treegrid/actions/rowdragdrop.d.ts

@@ -24,6 +24,8 @@ export declare class RowDD {
     /** @hidden */
     isMultipleGrid: string;
     /** @hidden */
+    private hasDropItem;
+    /** @hidden */
     isaddtoBottom: boolean;
     /**
      * Constructor for render module

package/src/treegrid/actions/rowdragdrop.js

@@ -1,6 +1,6 @@
 import { Grid, RowDD as GridDragDrop, parentsUntil } from '@syncfusion/ej2-grids';
 import { getObject, Scroll } from '@syncfusion/ej2-grids';
-import { closest, isNullOrUndefined, classList, setValue, extend, getValue, removeClass, addClass } from '@syncfusion/ej2-base';
+import { closest, isNullOrUndefined, classList, setValue, extend, getValue, removeClass, addClass, setStyleAttribute } from '@syncfusion/ej2-base';
 import { DataManager } from '@syncfusion/ej2-data';
 import * as events from '../base/constant';
 import { editAction } from './crud-actions';
@@ -22,6 +22,8 @@ var RowDD = /** @class */ (function () {
         /** @hidden */
         this.isDraggedWithChild = false;
         /** @hidden */
+        this.hasDropItem = true;
+        /** @hidden */
         this.isaddtoBottom = false;
         Grid.Inject(GridDragDrop);
         this.parent = parent;
@@ -61,6 +63,7 @@ var RowDD = /** @class */ (function () {
     RowDD.prototype.reorderRows = function (fromIndexes, toIndex, position) {
         var tObj = this.parent;
         var action = 'action';
+        var updateRowAndCellElements = 'updateRowAndCellElements';
         if (fromIndexes[0] !== toIndex && ['above', 'below', 'child'].indexOf(position) !== -1) {
             if (position === 'above') {
                 this.dropPosition = 'topSegment';
@@ -94,7 +97,13 @@ var RowDD = /** @class */ (function () {
             }
             this.parent.grid.refresh();
             if (this.parent.enableImmutableMode && this.dropPosition === 'middleSegment') {
-                var index = this.parent.treeColumnIndex + 1;
+                var index = void 0;
+                if (this.parent.allowRowDragAndDrop) {
+                    index = this.parent.treeColumnIndex + 1;
+                }
+                else if (this.parent[action] === 'indenting') {
+                    index = this.parent.treeColumnIndex;
+                }
                 var row = this.parent.getRows()[fromIndexes[0]];
                 var dropData = args.data[0];
                 var totalRecord = [];
@@ -106,18 +115,23 @@ var RowDD = /** @class */ (function () {
                 var parentrow = this.parent.getRows()[toIndex];
                 totalRecord.push(parentData);
                 rows.push(parentrow);
-                for (var i = 0; i < totalRecord.length; i++) {
-                    this.parent.renderModule.cellRender({
-                        data: totalRecord[i], cell: rows[i].cells[index],
-                        column: this.parent.grid.getColumns()[this.parent.treeColumnIndex],
-                        requestType: 'rowDragAndDrop'
-                    });
-                    if (this.parent[action] === 'indenting' || this.parent[action] === 'outdenting') {
-                        this.parent.renderModule.RowModifier({
-                            data: totalRecord[i], row: rows[i]
-                        });
-                    }
+                this.parent[updateRowAndCellElements](totalRecord, rows, index);
+            }
+            if (this.parent.enableImmutableMode && this.parent[action] === 'outdenting') {
+                var index = void 0;
+                if (this.parent.allowRowDragAndDrop) {
+                    index = this.parent.treeColumnIndex + 1;
+                }
+                else if (this.parent[action] === 'outdenting') {
+                    index = this.parent.treeColumnIndex;
                 }
+                var record = args.data[0];
+                var row = this.parent.getRows()[fromIndexes[0]];
+                var totalRecord = [];
+                var rows = [];
+                totalRecord.push(record);
+                rows.push(row);
+                this.parent[updateRowAndCellElements](totalRecord, rows, index);
             }
         }
         else {
@@ -265,7 +279,8 @@ var RowDD = /** @class */ (function () {
         }
         // eslint-disable-next-line max-len
         if (tempDataSource && (!isNullOrUndefined(droppedRecord) && !droppedRecord.parentItem) && !isNullOrUndefined(droppedRecord.taskData)) {
-            for (var i = 0; i < Object.keys(tempDataSource).length; i++) {
+            var keys = Object.keys(tempDataSource);
+            for (var i = 0; i < keys.length; i++) {
                 if (tempDataSource[i][this.parent.childMapping] === droppedRecord.taskData[this.parent.childMapping]) {
                     idx = i;
                 }
@@ -469,13 +484,34 @@ var RowDD = /** @class */ (function () {
             spanContent.innerHTML = content;
             dragelem.querySelector('.e-rowcell').appendChild(ele);
             dragelem.querySelector('.e-rowcell').appendChild(spanContent);
+            var dropItemSpan = document.querySelector('.e-dropitemscount');
+            if (this.hasDropItem && dropItemSpan) {
+                var dropItemLeft = parseInt(dropItemSpan.style.left, 10) + ele.offsetWidth + 16;
+                var spanLeft = !this.parent.enableRtl ? dropItemLeft : 0;
+                dropItemSpan.style.left = spanLeft + "px";
+                this.hasDropItem = false;
+            }
         }
     };
     RowDD.prototype.removeErrorElem = function () {
         var errorelem = document.querySelector('.e-errorelem');
+        var errorValue = document.querySelector('.errorValue');
+        var dropItemSpan = document.querySelector('.e-dropitemscount');
         if (errorelem) {
+            if (dropItemSpan) {
+                var dropItemLeft = parseInt(dropItemSpan.style.left, 10) - errorelem.offsetWidth - 16;
+                setStyleAttribute(errorValue, {
+                    paddingLeft: '0px'
+                });
+                if (!this.parent.enableRtl) {
+                    setStyleAttribute(dropItemSpan, {
+                        left: dropItemLeft + "px"
+                    });
+                }
+            }
             errorelem.remove();
         }
+        this.hasDropItem = true;
     };
     RowDD.prototype.topOrBottomBorder = function (target) {
         var rowElement = [];
@@ -803,6 +839,7 @@ var RowDD = /** @class */ (function () {
                         }
                         if (isNullOrUndefined(droppedRecord.parentItem)) {
                             delete draggedRecord_2.parentItem;
+                            delete draggedRecord_2.parentUniqueID;
                             draggedRecord_2.level = 0;
                             if (this_1.parent.parentIdMapping) {
                                 draggedRecord_2[this_1.parent.parentIdMapping] = null;
@@ -1017,7 +1054,7 @@ var RowDD = /** @class */ (function () {
                 if (childRecords && childRecords.length > 0) {
                     childIndex = childRecords.indexOf(deletedRow);
                     flatParentData.childRecords.splice(childIndex, 1);
-                    if (!this.parent.parentIdMapping) {
+                    if (!this.parent.parentIdMapping || tObj.enableImmutableMode) {
                         editAction({ value: deletedRow, action: 'delete' }, this.parent, isSelfReference, deletedRow.index, deletedRow.index);
                     }
                 }

package/src/treegrid/actions/toolbar.js

@@ -47,7 +47,7 @@ var Toolbar = /** @class */ (function () {
         if (args.row.rowIndex === 0 || tObj.getSelectedRecords().length > 1) {
             this.enableItems([tObj.element.id + '_gridcontrol_indent', tObj.element.id + '_gridcontrol_outdent'], false);
         }
-        else if (args['name'] !== "rowDeselected") {
+        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 >
@@ -69,7 +69,7 @@ var Toolbar = /** @class */ (function () {
                 }
             }
         }
-        if (args['name'] === "rowDeselected") {
+        if (args['name'] === 'rowDeselected') {
             if (this.parent.toolbar['includes']('Indent')) {
                 this.enableItems([tObj.element.id + '_gridcontrol_indent'], false);
             }

package/src/treegrid/base/data.js

@@ -127,7 +127,8 @@ var DataManipulation = /** @class */ (function () {
             this.hierarchyData = data;
         }
         else {
-            for (var i = 0; i < Object.keys(data).length; i++) {
+            var keys = Object.keys(data);
+            for (var i = 0; i < keys.length; i++) {
                 var tempData = data[i];
                 this.hierarchyData.push(extend({}, tempData));
                 if (!isNullOrUndefined(tempData[this.parent.idMapping])) {
@@ -367,7 +368,8 @@ var DataManipulation = /** @class */ (function () {
     };
     DataManipulation.prototype.createRecords = function (data, parentRecords) {
         var treeGridData = [];
-        for (var i = 0, len = Object.keys(data).length; i < len; i++) {
+        var keys = Object.keys(data);
+        for (var i = 0, len = keys.length; i < len; i++) {
             var currentData = extend({}, data[i]);
             currentData.taskData = data[i];
             var level = 0;

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

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

@@ -97,6 +97,8 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private isExpandRefresh;
     private gridSettings;
     private isEditCollapse;
+    private treeColumnTextAlign;
+    private treeColumnField;
     /** @hidden */
     initialRender: boolean;
     /** @hidden */
@@ -1263,6 +1265,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).
      *
@@ -1750,6 +1753,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}

package/src/treegrid/base/treegrid.js

@@ -39,6 +39,7 @@ 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';
@@ -482,6 +483,13 @@ var TreeGrid = /** @class */ (function (_super) {
                 args: [this]
             });
         }
+        if (!isNullOrUndefined(this.toolbar) && (this.toolbar['includes']('Indent') || this.toolbar['includes']('Outdent'))) {
+            TreeGrid_1.Inject(RowDD);
+            modules.push({
+                member: 'rowDragAndDrop',
+                args: [this]
+            });
+        }
         if (this.editSettings.allowAdding || this.editSettings.allowDeleting || this.editSettings.allowEditing) {
             modules.push({
                 member: 'edit',
@@ -602,6 +610,8 @@ var TreeGrid = /** @class */ (function (_super) {
             }
             return modules;
         };
+        var root = 'root';
+        this.grid[root] = this[root] ? this[root] : this;
         this.grid.appendTo(gridContainer);
         this.wireEvents();
         this.renderComplete();
@@ -1358,7 +1368,7 @@ var TreeGrid = /** @class */ (function (_super) {
                         gridColumn[prop] = this.getGridColumns(column[i][prop], false, index);
                         treeGridColumn[prop] = column[i][prop];
                     }
-                    else {
+                    else if (!(treeColumn) || prop !== 'sortComparer') {
                         gridColumn[prop] = treeGridColumn[prop] = column[i][prop];
                     }
                 }
@@ -1367,6 +1377,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 +1558,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 +1601,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).
      *
@@ -2961,7 +2988,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 +3087,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}

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

@@ -326,16 +326,7 @@ 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,25 +71,6 @@ 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/utils.js

@@ -122,7 +122,8 @@ export function findChildrenRecords(records) {
     }
     if (!isNullOrUndefined(records.childRecords)) {
         var childRecords = records.childRecords;
-        for (var i = 0, len = Object.keys(childRecords).length; i < len; i++) {
+        var keys = Object.keys(childRecords);
+        for (var i = 0, len = keys.length; i < len; i++) {
             datas.push(childRecords[i]);
             if (childRecords[i].hasChildRecords || (!isNullOrUndefined(childRecords[i].childRecords) &&
                 childRecords[i].childRecords.length)) {

package/styles/bootstrap-dark.css

@@ -172,6 +172,14 @@
   width: 20px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  font-size: 12px;
+  line-height: 12px;
+  padding: 2px 0;
+  height: 20px;
+  width: 20px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 18px;
 }
@@ -250,8 +258,11 @@
 }
 
 .e-treegrid .e-hierarchycheckbox .e-frame {
-  height: 20px;
-  width: 20px;
+  font-size: 10px;
+  height: 16px;
+  line-height: 11px;
+  padding: 2px 0;
+  width: 16px;
 }
 
 .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
@@ -442,12 +453,24 @@
   border-top: 1px solid #0070f0;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
+  border-bottom: 1px solid #0070f0;
+  border-top: 1px solid #0070f0;
+  box-shadow: 0 0 0 0 #0070f0;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 1px solid #0070f0;
+  border-top: 1px solid #0070f0;
+  box-shadow: 0 0 0 0 #0070f0;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 1px solid #0070f0;
   box-shadow: 0 0 0 0 #0070f0;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
   border-bottom: 1px solid #0070f0;
   box-shadow: 0 0 0 0 #0070f0;
 }

package/styles/bootstrap.css

@@ -173,6 +173,14 @@
   width: 20px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  font-size: 12px;
+  line-height: 12px;
+  padding: 2px 0;
+  height: 20px;
+  width: 20px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 18px;
 }
@@ -251,8 +259,11 @@
 }
 
 .e-treegrid .e-hierarchycheckbox .e-frame {
-  height: 20px;
-  width: 20px;
+  font-size: 10px;
+  height: 16px;
+  line-height: 11px;
+  padding: 2px 0;
+  width: 16px;
 }
 
 .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
@@ -443,12 +454,24 @@
   border-top: 1px solid #317ab9;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
+  border-bottom: 1px solid #317ab9;
+  border-top: 1px solid #317ab9;
+  box-shadow: 0 0 0 0 #317ab9;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 1px solid #317ab9;
+  border-top: 1px solid #317ab9;
+  box-shadow: 0 0 0 0 #317ab9;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 1px solid #317ab9;
   box-shadow: 0 0 0 0 #317ab9;
 }
 
-.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder, .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
   border-bottom: 1px solid #317ab9;
   box-shadow: 0 0 0 0 #317ab9;
 }