#74198 Добавлена возможность отключения автоматического растягивания колонок в PivotGrid

README.md

@@ -1,8 +1,17 @@
 # Пропатченная версия DevExtreme (by TilliWilli)
 
-## Руководство по патчингу
 0. Вызвать ```npm install``` в проекте, чтобы установились все тулзы необходимые для билдинга
 
+## Запуск в режиме разработки
+1. Выполнить команду ```npm run dev``` 
+
+2. Выполнить команду ```http-server -c-1```
+
+3. Открыть страницу ```/playground/jquery.html``` или создать свою
+
+## Руководство по патчингу
+
+
 1. Внести изменения в коде в файлах находящихся в папке ```/js```
 
 2. Запустить команду ```npm run build-dist```

js/ui/pivot_grid/ui.pivot_grid.area_item.js

@@ -66,6 +66,10 @@ export const AreaItem = Class.inherit({
         this.component = component;
     },
 
+    _isAutoSizeColumns: function() {
+        return true;
+    },
+
     option: function() {
         return this.component.option.apply(this.component, arguments);
     },
@@ -478,24 +482,35 @@ export const AreaItem = Class.inherit({
     },
 
     reset: function() {
+        this._reset(this._isAutoSizeColumns());
+    },
+
+    fullReset: function() {
+        this._reset(true);
+    },
+
+    _reset: function(fullClear) {
         const that = this;
         const tableElement = that._tableElement[0];
 
         that._fakeTable && that._fakeTable.detach();
         that._fakeTable = null;
-
         that.disableVirtualMode();
-        that.setGroupWidth('100%');
         that.setGroupHeight('auto');
 
-        that.resetColumnsWidth();
+        if(fullClear) {
+            that.setGroupWidth('100%');
+            that.resetColumnsWidth();
+        }
 
         if(tableElement) {
             for(let i = 0; i < tableElement.rows.length; i++) {
                 tableElement.rows[i].style.height = '';
             }
             tableElement.style.height = '';
-            tableElement.style.width = '100%';
+            if(fullClear) {
+                tableElement.style.width = '100%';
+            }
         }
     },
 

js/ui/pivot_grid/ui.pivot_grid.data_area.js

@@ -10,6 +10,11 @@ const PIVOTGRID_GRAND_TOTAL_CLASS = 'dx-grandtotal';
 const PIVOTGRID_ROW_TOTAL_CLASS = 'dx-row-total';
 
 export const DataArea = AreaItem.inherit({
+
+    _isAutoSizeColumns: function() {
+        return this.component.option('autoSizeColumns');
+    },
+
     _getAreaName: function() {
         return 'data';
     },

js/ui/pivot_grid/ui.pivot_grid.headers_area.js

@@ -33,6 +33,10 @@ export const HorizontalHeadersArea = AreaItem.inherit({
         this._scrollBarWidth = 0;
     },
 
+    _isAutoSizeColumns: function() {
+        return this.component.option('autoSizeColumns');
+    },
+
     _getAreaName: function() {
         return 'column';
     },
@@ -159,6 +163,13 @@ export const HorizontalHeadersArea = AreaItem.inherit({
 });
 
 export const VerticalHeadersArea = HorizontalHeadersArea.inherit({
+    ctor: function(component) {
+        this.callBase(component);
+    },
+
+    _isManualColumnSize: function() {
+        return false;
+    },
     _getAreaClassName: function() {
         return PIVOTGRID_AREA_ROW_CLASS;
     },

js/ui/pivot_grid/ui.pivot_grid.js

@@ -160,6 +160,7 @@ const PivotGrid = Widget.inherit({
                 applyChangesMode: 'instantly'
             },
             onContextMenuPreparing: null,
+            autoSizeColumns: true,
             allowSorting: false,
             allowSortingBySummary: false,
             allowFiltering: false,
@@ -1164,6 +1165,22 @@ const PivotGrid = Widget.inherit({
         return this.callBase() && !this._dataController.isLoading();
     },
 
+    getColumnWidth: function() {
+        return this._dataArea.getColumnsWidth();
+    },
+
+    setColumnWidth: function(sizes) {
+        this._dataArea.setColumnsWidth(sizes);
+        this._columnsArea.setColumnsWidth(sizes);
+        this.resize();
+    },
+
+    resetColumnsWidth: function() {
+        this._dataArea.fullReset();
+        this._columnsArea.fullReset();
+        this.resize();
+    },
+
     updateDimensions: function() {
         const that = this;
         let groupWidth;
@@ -1261,6 +1278,7 @@ const PivotGrid = Widget.inherit({
             rowsAreaWidth = getArraySum(rowsAreaColumnWidths);
 
             const elementWidth = that.$element().width();
+            const autoSizeColumns = that.option('autoSizeColumns');
 
             bordersWidth = getCommonBorderWidth([rowAreaCell, dataAreaCell, tableElement], 'width');
             groupWidth = elementWidth - rowsAreaWidth - bordersWidth;
@@ -1269,7 +1287,9 @@ const PivotGrid = Widget.inherit({
             const diff = totalWidth - groupWidth;
             const needAdjustWidthOnZoom = diff >= 0 && diff <= 2;
             if(needAdjustWidthOnZoom) { // T914454
-                adjustSizeArray(resultWidths, diff);
+                if(autoSizeColumns) {
+                    adjustSizeArray(resultWidths, diff);
+                }
                 totalWidth = groupWidth;
             }
 
@@ -1291,7 +1311,9 @@ const PivotGrid = Widget.inherit({
                 rowFieldsHeader.tableElement().append(that._rowsArea.headElement());
 
                 if(!hasColumnsScroll && hasRowsScroll && scrollBarWidth) {
-                    adjustSizeArray(resultWidths, scrollBarWidth);
+                    if(autoSizeColumns) {
+                        adjustSizeArray(resultWidths, scrollBarWidth);
+                    }
                     totalWidth -= scrollBarWidth;
                 }
 
@@ -1321,12 +1343,15 @@ const PivotGrid = Widget.inherit({
 
                 dataAreaCell.toggleClass(BOTTOM_BORDER_CLASS, !hasRowsScroll);
                 rowAreaCell.toggleClass(BOTTOM_BORDER_CLASS, !hasRowsScroll);
+                tableElement.toggleClass('dx-lastcells-right-border', !hasColumnsScroll && !autoSizeColumns);
 
                 // T317921
                 if(!that._hasHeight && (elementWidth !== that.$element().width())) {
                     const diff = elementWidth - that.$element().width();
                     if(!hasColumnsScroll) {
-                        adjustSizeArray(resultWidths, diff);
+                        if(autoSizeColumns) {
+                            adjustSizeArray(resultWidths, diff);
+                        }
                         that._columnsArea.setColumnsWidth(resultWidths);
                         that._dataArea.setColumnsWidth(resultWidths);
                     }

package.json

@@ -58,6 +58,7 @@
     "@devextreme-generator/react": "1.2.1",
     "@devextreme-generator/vue": "1.2.1",
     "@types/enzyme": "^3.10.5",
+    "@types/estree": "^1.0.7",
     "@types/jest": "^24.0.24",
     "@types/jquery": "^2.0.34",
     "@types/react": "16.9.16",
@@ -127,7 +128,7 @@
     "gulp-template": "^4.0.0",
     "gulp-typescript": "^5.0.0",
     "gulp-uglify": "^1.5.3",
-    "gulp-uglify-es": "^2.0.0",
+    "gulp-uglify-es": "^3.0.0",
     "gulp-watch": "^5.0.0",
     "handlebars": "^4.7.3",
     "hogan.js": "3.0.2",
@@ -177,8 +178,9 @@
     "typescript-min": "npm:typescript@3.1",
     "underscore": "^1.9.2",
     "vinyl-named": "^1.1.0",
-    "webpack": "^3.10.0",
-    "webpack-stream": "^3.2.0",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-stream": "^7.0.0",
     "yargs": "^4.6.0"
   },
   "bin": {
@@ -229,4 +231,4 @@
     ]
   },
   "pre-commit": "lint-staged"
-}
+}

scss/widgets/base/pivotGrid/_index.scss

@@ -458,6 +458,24 @@ $pivotgrid-expand-icon-text-offset: 0;
       }
     }
   }
+
+  .dx-lastcells-right-border {
+    .dx-pivotgrid-horizontal-headers {
+      tr {
+        td:last-child {
+          border-right: $pivotgrid-border !important; // stylelint-disable-line declaration-no-important
+        }
+      }
+    }
+
+    .dx-area-data-cell {
+      tr {
+        td:last-child {
+          border-right: $pivotgrid-border;
+        }
+      }
+    }
+  }
 }
 
 .dx-pivotgridfieldchooser {