web-dev-qa-db-ja.com

ag-gridでsizeColumnsToFitを使用しているにもかかわらず、不要な水平スクロールバーが表示される

Ag-gridのバージョンを7.2.0からv14.2.0にアップグレードしました。 sizeColumnsToFit() apiをonGridReadyまたはonGridSizeChangedイベントで使用すると、機能しますが、グリッド幅の誤った計算が原因で、不要な水平スクロールが維持されます。

この問題（？）は、ag-gridの公式の例でも確認できます。

https://www.ag-grid.com/javascript-grid-responsiveness/#example-example1

Un-necessary scroll

以前のバージョンでは、これは水平スクロールなしで完全に正常に機能します。

$scope.gridOptions.api.sizeColumnsToFit()を手動で呼び出すと、水平スクロールが削除されます。

これが私のgridOptionsです：

        $scope.ag_grid_options = {
            headerHeight: 50,
            rowHeight: 50,
            //rowModelType: 'virtual',
            rowModelType: 'infinite',
            rowBuffer: 0,
            cacheOverflowSize: 1,
            infiniteInitialRowCount: 1,
            cacheBlockSize: 50,
            paginationPageSize: 50,
            //virtualPaging: true,
            enableServerSideSorting: true,
            enableSorting: false,
            enableColResize: true,
            angularCompileRows: true,
            onGridSizeChanged: function (param) {
                $scope.ag_grid_options.api.doLayout();
                $scope.ag_grid_options.api.sizeColumnsToFit();
            },
            columnDefs: grid_column_definitions
        };

私はプロパティsuppressHorizo​​ntalScroll = trueを使用できることを知っています。しかし、ユーザーが手動で列のサイズを変更するときにスクロールが表示されないため、これを使用したくありません。

javascriptangularjsag-grid
11
undefined

これはバグではなく、その機能です。すべての列の合計幅カウントがラッパーより大きい場合、スクロールバーが表示されます。 headerFieldsのminWidth/maxWidthプロパティを変更する必要がありますが、問題ありません。

var columnDefs = [
  {headerName: 'Athlete', field: 'athlete', minWidth: 150},
  {headerName: 'Age', field: 'age', minWidth: 50},
  {headerName: 'Country', field: 'country', minWidth: 120},
  {headerName: 'Year', field: 'year', minWidth: 90},
  {headerName: 'Date', field: 'date', minWidth: 110}
];
2
lin

同僚からちょうど私に提示された別の可能な解決策：

列の定義内で、クライアントの幅を計算し、それを列の数で割ることによって、各列の幅を設定できます。

width: (document.documentElement.clientWidth - 40) / (this.numColumns)

この場合、40はグリッドの両側のパディングの合計です（左20 +右20）。

0
schuno