@syncfusion/ej2-treegrid 19.4.55 → 20.1.48

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,6 +38,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 +482,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 +609,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 +1367,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 +1376,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 +1557,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 +1600,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 +1942,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 +2158,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 +2303,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 +2454,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 +2519,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 +2534,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 +2989,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 +3088,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

@@ -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;
 }
@@ -172,6 +168,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;
 }
@@ -208,10 +212,6 @@
   color: #f0f0f0;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }
@@ -250,8 +250,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 +445,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

@@ -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;
 }
@@ -173,6 +169,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;
 }
@@ -209,10 +213,6 @@
   color: #333;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }
@@ -251,8 +251,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 +446,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;
 }

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;
 }
@@ -213,6 +209,11 @@
   width: 20px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 20px;
+  width: 20px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 16px;
 }
@@ -249,10 +250,6 @@
   color: #343a40;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 9px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }
@@ -473,8 +470,8 @@
 
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-childborder,
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-childborder {
-  border-bottom: 1px solid #e3165b;
-  border-top: 1px solid #e3165b;
+  border-bottom: 1px solid;
+  border-top: 1px solid;
   box-shadow: 0 0 0 0 #e3165b;
 }
 
@@ -483,12 +480,24 @@
   border-top: 1px solid #e3165b;
 }
 
-.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;
+  border-top: 1px solid;
+  box-shadow: 0 0 0 0 #e3165b;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 1px solid;
+  border-top: 1px solid;
+  box-shadow: 0 0 0 0 #e3165b;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 1px solid #e3165b;
   box-shadow: 0 0 0 0 #e3165b;
 }
 
-.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 #e3165b;
   box-shadow: 0 0 0 0 #e3165b;
 }