@syncfusion/ej2-treegrid 22.1.34 → 22.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.34
+*  version : 22.1.37
 *  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@20.12.0",
+  "_id": "@syncfusion/ej2-treegrid@22.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-eI+2miH8ZLzF4QW6Xym9f8zNRxApPW4I/6o1rW2RSYk8pFZ5c2JGa1Y2KH6UHgcfvgANjE4hdUg1hfponcqBzQ==",
+  "_integrity": "sha512-v4Iu+lVo/s6DbIN6B2tpcuh7jPfd9YmIexRJ36AEq/+COecwEQJ9Svj4BwgHhqmArel/uC7MIHXeiuyRU7/5nw==",
   "_location": "/@syncfusion/ej2-treegrid",
   "_phantomChildren": {},
   "_requested": {
@@ -24,8 +24,8 @@
     "/@syncfusion/ej2-react-treegrid",
     "/@syncfusion/ej2-vue-treegrid"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-treegrid/-/ej2-treegrid-20.12.0.tgz",
-  "_shasum": "68b2b0d2e867f79d44107046a375bb48405b2631",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-treegrid/-/ej2-treegrid-22.1.36.tgz",
+  "_shasum": "863e6c49ec54bc9b0717212ba2e55c6cd50f7467",
   "_spec": "@syncfusion/ej2-treegrid@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -37,9 +37,9 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~22.1.34",
-    "@syncfusion/ej2-data": "~22.1.34",
-    "@syncfusion/ej2-grids": "~22.1.34",
-    "@syncfusion/ej2-popups": "~22.1.34"
+    "@syncfusion/ej2-data": "~22.1.36",
+    "@syncfusion/ej2-grids": "~22.1.37",
+    "@syncfusion/ej2-popups": "~22.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeGrid Component",
@@ -66,6 +66,6 @@
     "url": "git+https://github.com/syncfusion/ej2-treegrid.git"
   },
   "typings": "index.d.ts",
-  "version": "22.1.34",
+  "version": "22.1.37",
   "sideEffects": false
 }

package/src/treegrid/actions/freeze-column.js

@@ -1,4 +1,4 @@
-import { ColumnFreezeContentRenderer, ColumnFreezeHeaderRenderer, FreezeContentRender, FreezeRender, parentsUntil, RenderType } from '@syncfusion/ej2-grids';
+import { ColumnFreezeContentRenderer, ColumnFreezeHeaderRenderer, FreezeRender, parentsUntil, RenderType } from '@syncfusion/ej2-grids';
 import { Grid, Freeze as FreezeColumn } from '@syncfusion/ej2-grids';
 import { addClass, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ColumnVirtualTreeFreezeRenderer, VirtualTreeFreezeRenderer, VirtualTreeFreezeHdrRenderer } from '../renderer/virtual-tree-freeze-render';
@@ -48,10 +48,6 @@ var Freeze = /** @class */ (function () {
                 getValue('addRenderer', renderer)
                     .apply(renderer, [RenderType.Content, new VirtualTreeFreezeRenderer(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
             }
-            else {
-                getValue('addRenderer', renderer)
-                    .apply(renderer, [RenderType.Content, new FreezeContentRender(getValue('grid', this.parent), getValue('serviceLocator', this.parent.grid))]);
-            }
         }
         if (this.parent.getFrozenLeftColumnsCount() || this.parent.getFrozenRightColumnsCount()) {
             getValue('addRenderer', renderer)

package/src/treegrid/actions/selection.js

@@ -355,11 +355,11 @@ var Selection = /** @class */ (function () {
         }
     };
     Selection.prototype.updateSelectedItems = function (currentRecord, checkState) {
-        var record = this.parent.getCurrentViewRecords().filter(function (e) {
+        var record = this.parent.grid.currentViewData.filter(function (e) {
             return e.uniqueID === currentRecord.uniqueID;
         });
         var checkedRecord;
-        var recordIndex = this.parent.getCurrentViewRecords().indexOf(record[0]);
+        var recordIndex = this.parent.grid.currentViewData.indexOf(record[0]);
         var checkboxRecord = getParentData(this.parent, currentRecord.uniqueID);
         var tr = this.parent.getRows()[parseInt(recordIndex.toString(), 10)];
         var checkbox;

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

@@ -86,6 +86,12 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private isAddedFromGantt;
     private isIndentEnabled;
     private indentOutdentAction;
+    private isCollapsedEventTriggered;
+    private isCollapsingEventTriggered;
+    private isExpandedEventTriggered;
+    private isExpandingEventTriggered;
+    private collapseAllPrevent;
+    private expandAllPrevent;
     /**
      * The `sortModule` is used to manipulate sorting in TreeGrid.
      */
@@ -1582,6 +1588,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      */
     getColumns(isRefresh?: boolean): Column[];
     private updateColumnModel;
+    private updateColumnsWidth;
     /**
      * Gets the content div of the TreeGrid.
      *
@@ -1731,6 +1738,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     expandRow(row: HTMLTableRowElement, record?: Object, key?: Object, level?: number): void;
+    private expandRows;
     private expandCollapseAllChildren;
     private setHeightForFrozenContent;
     private getCollapseExpandRecords;
@@ -1743,6 +1751,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     collapseRow(row: HTMLTableRowElement, record?: Object, key?: Object): void;
+    private collapseRows;
     private updateExpandStateMapping;
     /**
      * Expands the records at specific hierarchical level

package/src/treegrid/base/treegrid.js

@@ -2304,21 +2304,7 @@ var TreeGrid = /** @class */ (function (_super) {
             this.stackedHeader = true;
         }
         if (this.stackedHeader && this.allowResizing) {
-            for (var i = 0; i < this.columns.length; i++) {
-                if (!isNullOrUndefined(this.columns[parseInt(i.toString(), 10)].columns)) {
-                    for (var j = 0; j < this.columns[parseInt(i.toString(), 10)].columns.length; j++) {
-                        var stackedColumn = this.columns[parseInt(i.toString(), 10)]
-                            .columns[parseInt(j.toString(), 10)];
-                        var currentColumn = this.grid.getColumnByField(stackedColumn.field);
-                        stackedColumn.width = currentColumn.width;
-                    }
-                }
-                else if (!isNullOrUndefined(this.columns[parseInt(i.toString(), 10)].field)) {
-                    var currentColumn = this.grid.getColumnByField(this.columns[parseInt(i.toString(), 10)]
-                        .field);
-                    this.columns[parseInt(i.toString(), 10)].width = currentColumn.width;
-                }
-            }
+            this.updateColumnsWidth(this.columns);
         }
         if (!this.stackedHeader) {
             merge(this.columns, this.columnModel);
@@ -2326,6 +2312,18 @@ var TreeGrid = /** @class */ (function (_super) {
         this["" + deepMerge] = undefined; // Workaround for blazor updateModel
         return this.columnModel;
     };
+    TreeGrid.prototype.updateColumnsWidth = function (columns) {
+        var _this = this;
+        columns.forEach(function (column) {
+            if (column.columns) {
+                _this.updateColumnsWidth(column.columns);
+            }
+            else if (column.field) {
+                var currentColumn = _this.grid.getColumnByField(column.field);
+                column.width = currentColumn.width;
+            }
+        });
+    };
     /**
      * Gets the content div of the TreeGrid.
      *
@@ -2378,7 +2376,8 @@ var TreeGrid = /** @class */ (function (_super) {
      * @isGenericType true
      */
     TreeGrid.prototype.getCurrentViewRecords = function () {
-        return this.grid.currentViewData;
+        var isSummaryRow = 'isSummaryRow';
+        return this.grid.currentViewData.filter(function (e) { return isNullOrUndefined(e["" + isSummaryRow]); });
     };
     /**
      * Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.
@@ -2611,28 +2610,70 @@ var TreeGrid = /** @class */ (function (_super) {
      */
     TreeGrid.prototype.expandRow = function (row, record, key, level) {
         var _this = this;
+        var parentRec = this.parentData;
+        if (!this.enableVirtualization) {
+            parentRec = this.flatData.filter(function (e) {
+                return e.hasChildRecords;
+            });
+        }
         record = this.getCollapseExpandRecords(row, record);
         if (!isNullOrUndefined(row) && row.cells[0].classList.contains('e-lastrowcell')) {
             this.lastRowBorder(row, false);
         }
-        var args = { data: record, row: row, cancel: false };
-        this.trigger(events.expanding, args, function (expandingArgs) {
-            if (!expandingArgs.cancel) {
-                _this.expandCollapse('expand', row, record);
-                if (expandingArgs.expandAll) {
-                    _this.expandCollapseAllChildren(record, 'expand', key, level);
-                }
-                var children = 'Children';
-                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);
+        if (this.isExpandAll && !isRemoteData(this)) {
+            var args = { data: parentRec, row: row, cancel: false };
+            var pagerValuePresent = false;
+            if (this.grid.pagerModule && !isNullOrUndefined(this.grid.pagerModule.pagerObj.pagerdropdownModule)) {
+                pagerValuePresent = this.grid.pagerModule.pagerObj.pagerdropdownModule['dropDownListObject'].value ? true : false;
+            }
+            if (!this.isExpandingEventTriggered) {
+                this.trigger(events.expanding, args, function (expandingArgs) {
+                    _this.expandAllPrevent = expandingArgs.cancel;
+                    if (!expandingArgs.cancel) {
+                        if (expandingArgs.expandAll) {
+                            _this.expandCollapseAllChildren(record, 'expand', key, level);
+                        }
+                        _this.expandRows(row, record, parentRec, key, level);
                     }
-                    _this.trigger(events.expanded, collapseArgs);
+                });
+            }
+            else if ((!this.allowPaging || (pagerValuePresent && this.grid.pagerModule.pagerObj.pagerdropdownModule['dropDownListObject'].value === 'All')) &&
+                !this.expandAllPrevent && this.isExpandingEventTriggered) {
+                this.expandRows(row, record, parentRec, key, level);
+            }
+            this.isExpandingEventTriggered = true;
+        }
+        else if (!this.isExpandAll || (this.isExpandAll && isRemoteData(this))) {
+            var args = { data: record, row: row, cancel: false };
+            this.trigger(events.expanding, args, function (expandingArgs) {
+                if (!expandingArgs.cancel) {
+                    if (expandingArgs.expandAll) {
+                        _this.expandCollapseAllChildren(record, 'expand', key, level);
+                    }
+                    _this.expandRows(row, record, parentRec, key, level);
                 }
+            });
+        }
+    };
+    // Internal method to handle the rows expand
+    TreeGrid.prototype.expandRows = function (row, record, parentRec, key, level) {
+        this.expandCollapse('expand', row, record);
+        var children = 'Children';
+        if (!(isRemoteData(this) && !isOffline(this)) && (!isCountRequired(this) || !isNullOrUndefined(record["" + children]))) {
+            var expandArgs = { data: record, row: row };
+            this.setHeightForFrozenContent();
+            if (!isNullOrUndefined(this.expandStateMapping)) {
+                this.updateExpandStateMapping(expandArgs.data, true);
             }
-        });
+            if (this.isExpandAll && !this.isExpandedEventTriggered) {
+                this.isExpandedEventTriggered = true;
+                expandArgs = { data: parentRec, row: row };
+                this.trigger(events.expanded, expandArgs);
+            }
+            else if (!this.isExpandAll) {
+                this.trigger(events.expanded, expandArgs);
+            }
+        }
     };
     TreeGrid.prototype.expandCollapseAllChildren = function (record, action, key, level) {
         if ((!isNullOrUndefined(key) && record[this.getPrimaryKeyFieldNames()[0]] !== key) ||
@@ -2690,31 +2731,65 @@ var TreeGrid = /** @class */ (function (_super) {
      */
     TreeGrid.prototype.collapseRow = function (row, record, key) {
         var _this = this;
+        var parentRec = this.parentData;
+        if (!this.enableVirtualization) {
+            parentRec = this.flatData.filter(function (e) {
+                return e.hasChildRecords;
+            });
+        }
         record = this.getCollapseExpandRecords(row, record);
-        var args = { data: record, row: row, cancel: false };
-        this.trigger(events.collapsing, args, function (collapsingArgs) {
-            if (!collapsingArgs.cancel) {
-                if (collapsingArgs.collapseAll) {
-                    _this.expandCollapseAllChildren(record, 'collapse', key);
-                }
-                _this.expandCollapse('collapse', row, record);
-                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;
-                        var scrollTop = _this.grid.getContent().firstElementChild.scrollTop;
-                        if ((scrollHeight - scrollTop) < _this.grid.getRowHeight() + +_this.height) {
-                            _this.grid.getContent().firstElementChild.scrollBy(0, _this.grid.getRowHeight());
+        if (this.isCollapseAll && !isRemoteData(this)) {
+            var args = { data: parentRec, row: row, cancel: false };
+            if (!this.isCollapsingEventTriggered) {
+                this.trigger(events.collapsing, args, function (collapsingArgs) {
+                    _this.collapseAllPrevent = collapsingArgs.cancel;
+                    if (!collapsingArgs.cancel) {
+                        if (collapsingArgs.collapseAll) {
+                            _this.expandCollapseAllChildren(record, 'collapse', key);
                         }
+                        _this.collapseRows(row, record, parentRec, key);
                     }
+                });
+            }
+            else if (!this.allowPaging && !this.collapseAllPrevent && this.isCollapsingEventTriggered) {
+                this.collapseRows(row, record, parentRec, key);
+            }
+            this.isCollapsingEventTriggered = true;
+        }
+        else if (!this.isCollapseAll || (this.isCollapseAll && isRemoteData(this))) {
+            var args = { data: record, row: row, cancel: false };
+            this.trigger(events.collapsing, args, function (collapsingArgs) {
+                if (!collapsingArgs.cancel) {
+                    _this.collapseRows(row, record, parentRec, key);
+                }
+            });
+        }
+    };
+    // Internal method for handling the rows collapse
+    TreeGrid.prototype.collapseRows = function (row, record, parentRec, key) {
+        this.expandCollapse('collapse', row, record);
+        var collapseArgs = { data: record, row: row };
+        if (!isRemoteData(this)) {
+            this.setHeightForFrozenContent();
+            if (!isNullOrUndefined(this.expandStateMapping)) {
+                this.updateExpandStateMapping(collapseArgs.data, false);
+            }
+            if (this.isCollapseAll && !this.isCollapsedEventTriggered) {
+                this.isCollapsedEventTriggered = true;
+                collapseArgs = { data: parentRec, row: row };
+                this.trigger(events.collapsed, collapseArgs);
+            }
+            else if (!this.isCollapseAll) {
+                this.trigger(events.collapsed, collapseArgs);
+            }
+            if (this.enableInfiniteScrolling) {
+                var scrollHeight = this.grid.getContent().firstElementChild.scrollHeight;
+                var scrollTop = this.grid.getContent().firstElementChild.scrollTop;
+                if ((scrollHeight - scrollTop) < this.grid.getRowHeight() + +this.height) {
+                    this.grid.getContent().firstElementChild.scrollBy(0, this.grid.getRowHeight());
                 }
             }
-        });
+        }
     };
     TreeGrid.prototype.updateExpandStateMapping = function (record, state) {
         var totalRecords = record;
@@ -2877,6 +2952,8 @@ var TreeGrid = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeGrid.prototype.expandAll = function () {
+        this.isExpandedEventTriggered = false;
+        this.isExpandingEventTriggered = false;
         this.expandCollapseAll('expand');
     };
     /**
@@ -2885,6 +2962,8 @@ var TreeGrid = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeGrid.prototype.collapseAll = function () {
+        this.isCollapsedEventTriggered = false;
+        this.isCollapsingEventTriggered = false;
         this.expandCollapseAll('collapse');
     };
     TreeGrid.prototype.expandCollapseAll = function (action) {
@@ -2942,7 +3021,7 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.expandCollapse = function (action, row, record, isChild) {
         var _this = this;
         var expandingArgs = { row: row, data: record, childData: [], requestType: action };
-        var childRecords = this.getCurrentViewRecords().filter(function (e) {
+        var childRecords = this.grid.currentViewData.filter(function (e) {
             return e.parentUniqueID === record.uniqueID;
         });
         var targetEle;
@@ -2956,7 +3035,7 @@ var TreeGrid = /** @class */ (function (_super) {
         }
         var rowIndex;
         if (isNullOrUndefined(row)) {
-            rowIndex = this.getCurrentViewRecords().indexOf(record);
+            rowIndex = this.grid.currentViewData.indexOf(record);
             row = gridRows[parseInt(rowIndex.toString(), 10)];
         }
         else {
@@ -3184,7 +3263,7 @@ var TreeGrid = /** @class */ (function (_super) {
     };
     TreeGrid.prototype.localExpand = function (action, row, record) {
         var rows;
-        var childRecords = this.getCurrentViewRecords().filter(function (e) {
+        var childRecords = this.grid.currentViewData.filter(function (e) {
             return e.parentUniqueID === record.uniqueID;
         });
         if (this.isPixelHeight() && row.cells[0].classList.contains('e-lastrowcell')) {
@@ -3223,7 +3302,7 @@ var TreeGrid = /** @class */ (function (_super) {
             });
         }
         var gridRowsObject = this.grid.getRowsObject();
-        var currentViewData = this.getCurrentViewRecords();
+        var currentViewData = this.grid.currentViewData;
         var currentRecord = currentViewData.filter(function (e) {
             return e.uniqueID === record.uniqueID;
         });

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

@@ -105,8 +105,16 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             this.startIndex = 0;
             this.endIndex = this.parent.pageSettings.pageSize - 1;
         }
-        args.startIndex = this.startIndex;
-        args.endIndex = this.endIndex;
+        if ((this.endIndex - this.startIndex !== this.parent.pageSettings.pageSize) &&
+            (this.totalRecords > this.parent.pageSettings.pageSize) &&
+            (this.endIndex === this.totalRecords)) {
+            args.startIndex = this.endIndex - this.parent.pageSettings.pageSize;
+            args.endIndex = this.endIndex;
+        }
+        else {
+            args.startIndex = this.startIndex;
+            args.endIndex = this.endIndex;
+        }
     };
     VirtualTreeContentRenderer.prototype.eventListener = function (action) {
         var _this = this;
@@ -421,6 +429,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                     this.translateY = scrollArgs.offset.top - rowHeight * 2;
                 }
                 else {
+                    scrollArgs.offset.top = content.scrollTop;
                     this.translateY = scrollArgs.offset.top;
                 }
             }
@@ -441,7 +450,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 lastIndex = nextSetResIndex +
                     (this.totalRecords - nextSetResIndex);
             }
-            this.startIndex = !isLastBlock ? lastIndex - this.parent.pageSettings.pageSize : nextSetResIndex;
+            this.startIndex = !isLastBlock || isNullOrUndefined(this['' + selectedRowIndex]) ? lastIndex - this.parent.pageSettings.pageSize : nextSetResIndex;
             this.endIndex = lastIndex;
             if ((nextSetResIndex + this.parent.pageSettings.pageSize) > this.totalRecords && (this.endIndex - this.startIndex) <
                 (this.parent.pageSettings.pageSize / 2) && (this.endIndex - nextSetResIndex) < (this.parent.pageSettings.pageSize / 2)) {

package/styles/material3-dark.css

@@ -130,21 +130,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -164,7 +169,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -173,7 +178,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -183,8 +188,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -197,6 +202,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }

package/styles/material3.css

@@ -186,21 +186,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -220,7 +225,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -229,7 +234,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -239,8 +244,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -253,6 +258,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }

package/styles/treegrid/material3-dark.css

@@ -130,21 +130,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -164,7 +169,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -173,7 +178,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -183,8 +188,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -197,6 +202,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }