@syncfusion/ej2-treegrid 19.4.56 → 20.1.51

package/src/treegrid/models/column.js

@@ -72,12 +72,12 @@ var Column = /** @class */ (function () {
         merge(this, options);
     }
     /**
-     * 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
+    */
     Column.prototype.setProperties = function (column) {
         //Angular two way binding
         var keys = Object.keys(column);
@@ -86,7 +86,7 @@ var Column = /** @class */ (function () {
             //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);
+                this.parent.clipboardModule['treeGridParent'].renderModule[refreshReactColumnTemplateByUid](this.uid);
             }
         }
     };

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

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

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

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

package/src/treegrid/renderer/render.js

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

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

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

package/styles/bootstrap-dark.css

@@ -159,10 +159,6 @@
   width: 18px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 5px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -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;
 }

package/styles/bootstrap5-dark.css

@@ -90,6 +90,13 @@
   color: #adb5bd;
 }
 
+.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
 .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -193,10 +200,6 @@
   width: 22px;
 }
 
-.e-bigger .e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 7px;
-}
-
 .e-bigger .e-treegrid .e-hierarchycheckbox {
   padding-left: 2px;
 }
@@ -206,6 +209,11 @@
   width: 18px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 18px;
+  width: 18px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
@@ -242,10 +250,6 @@
   color: #dee2e6;
 }
 
-.e-treegrid .e-rowcell.e-treerowcell {
-  padding-left: 12px;
-}
-
 .e-treegrid .e-rtl .e-treegridcollapse {
   transform: scale(-1);
 }
@@ -309,7 +313,7 @@
 
 .e-treegrid .e-treecell {
   display: table-cell;
-  line-height: normal;
+  line-height: 26px;
 }
 
 .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container {
@@ -361,22 +365,22 @@
 }
 
 .e-treegrid .e-errorelem::before {
-  color: #4f46e5;
+  color: #e4606d;
   content: "";
   transform: rotate(180deg);
 }
 
 .e-treegrid .e-gridcontent td.e-childborder {
-  border-color: #4f46e5;
+  border-color: #0d6efd;
   border-width: 2px 0 0;
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   position: relative;
   z-index: 1;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-childborder.e-dragborder,
 .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
 }
 
 .e-treegrid .e-gridcontent td.e-rowcell.e-dragborder,
@@ -387,7 +391,7 @@
 
 .e-treegrid .e-gridcontent td.e-childborder:first-child {
   border-left: 2px solid #4f46e5;
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   position: relative;
   z-index: 1;
 }
@@ -411,19 +415,19 @@
 .e-treegrid .e-gridcontent td.e-dropbottom:first-child,
 .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom,
 .e-treegrid .e-gridcontent td.e-dropbottom {
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   position: relative;
   z-index: 1;
 }
 
 .e-treegrid .e-gridcontent td.e-droptop:first-child,
 .e-treegrid .e-gridcontent td.e-rowcell.e-droptop {
-  border-top-color: #4f46e5;
+  border-top-color: #0d6efd;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #4f46e5;
+  border-bottom-color: #0d6efd;
 }
 
 .e-treegrid .e-gridcontent td.e-rowdragdrop.e-droptop.e-dragborder {
@@ -456,7 +460,7 @@
 
 .e-treegrid .e-gridheader .e-firstrow-border,
 .e-treegrid .e-gridcontent .e-lastrow-border {
-  background-color: #4f46e5;
+  background-color: #0d6efd;
   bottom: 0;
   display: none;
   height: 1px;
@@ -468,7 +472,7 @@
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-childborder {
   border-bottom: 2px solid #4f46e5;
   border-top: 2px solid #4f46e5;
-  box-shadow: 0 0 0 0 #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
 }
 
 .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-droptop,
@@ -476,14 +480,26 @@
   border-top: 2px solid #4f46e5;
 }
 
-.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: 2px solid #4f46e5;
+  border-top: 2px solid #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
+  border-bottom: 2px solid #4f46e5;
+  border-top: 2px solid #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
+}
+
+.e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
   border-bottom: 2px solid #4f46e5;
-  box-shadow: 0 0 0 0 #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
 }
 
-.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: 2px solid #4f46e5;
-  box-shadow: 0 0 0 0 #4f46e5;
+  box-shadow: 0 0 0 0 #0d6efd;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridheader .e-firstrow-dragborder {
@@ -491,7 +507,7 @@
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder {
-  border-color: #4f46e5;
+  border-color: #0d6efd;
   border-width: 2px 0 2px 0;
   position: relative;
   z-index: 1;
@@ -505,7 +521,7 @@
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder:first-child {
   border-right: 2px solid #4f46e5;
-  box-shadow: 0 1px 0 0 #4f46e5;
+  box-shadow: 0 1px 0 0 #0d6efd;
   position: relative;
   z-index: 1;
 }
@@ -528,12 +544,12 @@
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-droptop:first-child,
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-droptop {
-  border-top-color: #4f46e5;
+  border-top-color: #0d6efd;
   border-width: 2px 0 0;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-dropbottom {
-  border-bottom-color: #4f46e5;
+  border-bottom-color: #0d6efd;
 }
 
 .e-treegrid .e-grid.e-rtl .e-gridcontent .e-droptop .e-lastrow-dragborder {