@syncfusion/ej2-vue-treegrid 19.4.56 → 20.1.47

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-treegrid@*",
-  "_id": "@syncfusion/ej2-vue-treegrid@19.4.55",
+  "_id": "@syncfusion/ej2-vue-treegrid@18.16.3",
   "_inBundle": false,
-  "_integrity": "sha512-7hu/IdKiPuV0oqzRx+gUIiQoCZFpL5Ubih+C/miIykoLUza6Bt01hqlHlpYZHt/25gOqm3ELSYBZPcu/w8ZffA==",
+  "_integrity": "sha512-ueuddTef2hLlCoW1LF8xR+R/2rTlYlpQb9G6Uc3PRDgmIuu9Kd5LlWRnrfknBAnZom8wVKA9izRkls0eWwlyVQ==",
   "_location": "/@syncfusion/ej2-vue-treegrid",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-treegrid/-/ej2-vue-treegrid-19.4.55.tgz",
-  "_shasum": "c78910a0c7b1164a3b1eff0934af4e5d374d3417",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-vue-treegrid/-/ej2-vue-treegrid-18.16.3.tgz",
+  "_shasum": "f89da58bdb90413cbefd97664005269296719f21",
   "_spec": "@syncfusion/ej2-vue-treegrid@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-treegrid": "19.4.56",
-    "@syncfusion/ej2-vue-base": "~19.4.56"
+    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-treegrid": "20.1.47",
+    "@syncfusion/ej2-vue-base": "~20.1.47"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeGrid Component for Vue",
@@ -62,6 +62,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-vue-ui-components.git"
   },
-  "version": "19.4.56",
+  "version": "20.1.47",
   "sideEffects": false
 }

package/src/treegrid/aggregate-columns.directive.d.ts

@@ -1,7 +1,9 @@
 export declare const isExecute: any;
 declare let vueImport: any;
 export declare class AggregateColumnsDirective extends vueImport {
-    render(): void;
+    constructor();
+    render(createElement: any): void;
+    updated(): void;
     getTag(): string;
 }
 export declare const AggregateColumnsPlugin: {

package/src/treegrid/aggregate-columns.directive.js

@@ -19,7 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
 import * as Vue3 from 'vue-class-component';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import Vue from 'vue';
+import { Options } from 'vue-class-component';
 export var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
@@ -31,16 +33,36 @@ else {
 var AggregateColumnsDirective = /** @class */ (function (_super) {
     __extends(AggregateColumnsDirective, _super);
     function AggregateColumnsDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    AggregateColumnsDirective.prototype.render = function () {
+    AggregateColumnsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    AggregateColumnsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     AggregateColumnsDirective.prototype.getTag = function () {
         return 'e-columns';
     };
     AggregateColumnsDirective = __decorate([
         EJComponentDecorator({}, isExecute)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], AggregateColumnsDirective);
     return AggregateColumnsDirective;
 }(vueImport));

package/src/treegrid/aggregates.directive.d.ts

@@ -1,7 +1,9 @@
 export declare const isExecute: any;
 declare let vueImport: any;
 export declare class AggregatesDirective extends vueImport {
-    render(): void;
+    constructor();
+    render(createElement: any): void;
+    updated(): void;
     getTag(): string;
 }
 export declare const AggregatesPlugin: {

package/src/treegrid/aggregates.directive.js

@@ -19,7 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
 import * as Vue3 from 'vue-class-component';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import Vue from 'vue';
+import { Options } from 'vue-class-component';
 export var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
@@ -31,16 +33,36 @@ else {
 var AggregatesDirective = /** @class */ (function (_super) {
     __extends(AggregatesDirective, _super);
     function AggregatesDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    AggregatesDirective.prototype.render = function () {
+    AggregatesDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    AggregatesDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     AggregatesDirective.prototype.getTag = function () {
         return 'e-aggregates';
     };
     AggregatesDirective = __decorate([
         EJComponentDecorator({}, isExecute)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], AggregatesDirective);
     return AggregatesDirective;
 }(vueImport));

package/src/treegrid/columns.directive.d.ts

@@ -1,7 +1,9 @@
 export declare const isExecute: any;
 declare let vueImport: any;
 export declare class ColumnsDirective extends vueImport {
-    render(): void;
+    constructor();
+    render(createElement: any): void;
+    updated(): void;
     getTag(): string;
 }
 export declare const ColumnsPlugin: {

package/src/treegrid/columns.directive.js

@@ -19,7 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
 import * as Vue3 from 'vue-class-component';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import Vue from 'vue';
+import { Options } from 'vue-class-component';
 export var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
@@ -31,16 +33,36 @@ else {
 var ColumnsDirective = /** @class */ (function (_super) {
     __extends(ColumnsDirective, _super);
     function ColumnsDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    ColumnsDirective.prototype.render = function () {
+    ColumnsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    ColumnsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     ColumnsDirective.prototype.getTag = function () {
         return 'e-columns';
     };
     ColumnsDirective = __decorate([
         EJComponentDecorator({}, isExecute)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], ColumnsDirective);
     return ColumnsDirective;
 }(vueImport));

package/src/treegrid/treegrid.component.d.ts

@@ -31,6 +31,7 @@ export declare class TreeGridComponent extends ComponentBase {
         [key: string]: Object;
     }, successHandler?: Function): void;
     render(createElement: any): any;
+    custom(): void;
     addRecord(data?: Object, index?: number, position?: Object): void;
     autoFitColumns(fieldNames?: string | string[]): void;
     clearFiltering(): void;

package/src/treegrid/treegrid.component.js

@@ -61,6 +61,7 @@ var TreeGridComponent = /** @class */ (function (_super) {
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
         _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
         return _this;
     }
     TreeGridComponent.prototype.clearTemplate = function (templateNames) {
@@ -157,6 +158,9 @@ var TreeGridComponent = /** @class */ (function (_super) {
         }
         return h('div', slots);
     };
+    TreeGridComponent.prototype.custom = function () {
+        this.updated();
+    };
     TreeGridComponent.prototype.addRecord = function (data, index, position) {
         return this.ej2Instances.addRecord(data, index, position);
     };
@@ -455,7 +459,12 @@ var TreeGridComponent = /** @class */ (function (_super) {
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], TreeGridComponent);
     return TreeGridComponent;

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;
 }

package/styles/bootstrap4.css

@@ -213,6 +213,11 @@
   width: 20px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 20px;
+  width: 20px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 16px;
 }
@@ -473,8 +478,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 +488,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,
@@ -206,6 +213,11 @@
   width: 18px;
 }
 
+.e-bigger .e-treegrid .e-hierarchycheckbox .e-frame {
+  height: 18px;
+  width: 18px;
+}
+
 .e-bigger .e-treegrid .e-treecell {
   line-height: 22px;
 }
@@ -309,7 +321,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 +373,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 +399,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 +423,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 +468,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 +480,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 +488,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 +515,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 +529,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 +552,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 {