Ненужная горизонтальная полоса прокрутки, несмотря на использование sizeColumnsToFit в ag-grid

Я обновил свою версию ag-grid с 7.2.0 до v14.2.0. Когда я использую sizeColumnsToFit() API с onGridReady или же onGridSizeChanged Событие работает, но сохраняет ненужную горизонтальную прокрутку, возможно, из-за неправильного расчета ширины сетки.

Эту проблему (?) Можно также увидеть на официальном примере для ag-grid,

https://www.ag-grid.com/javascript-grid-responsiveness/

Ненужный свиток

В предыдущей версии это работает совершенно без горизонтальной прокрутки.

Когда я звоню вручную $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
        };

Я знаю, что могу использовать свойство suppressHor horizontalScroll = true. Но я не хочу использовать это, потому что с ним, прокрутка не появится, когда пользователь изменит размер столбца вручную.

Источник

8 ответов

Решение

Это не ошибка, это особенность. Полоса прокрутки появляется, если счетчик общей ширины всех столбцов больше вашей оболочки. Вы должны изменить minWidth / maxWidth свойство headerFields и у вас все будет хорошо.

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}
];
Источник

Я столкнулся с той же / похожей проблемой. Основная проблема заключалась в том, что я изменил размер своих столбцов до добавления вертикальной полосы прокрутки. Чтобы обойти это, измените размер ПОСЛЕ добавления строк. Даже тогда он может не работать без тайм-аута

    this.http.get('someEndPoint').subscribe(rows => {
      this.rowData = rows;
      setTimeout(()=>{params.api.sizeColumnsToFit()}, 50);
    });

Это может быть симптом, отличный от того, что видел ОП, но он может быть полезен другим.

Источник

Лучшее решение для меня - вызов api.sizeColumnsToFit() в событии modelUpdated

не нужно setTimeout и устанавливать ширину

пример кода:

<ag-grid-angular
  [defaultColDef]="defaultColumnDefs"
  [columnDefs]="columnDefs"
  [rowData]="data"
  (gridReady)="onGridReady($event)"
  (modelUpdated)="onModelUpdated()"
>
</ag-grid-angular>

в onModelUpdated() должен вызывать api.sizeColumnsToFit

private gridApi;

onGridReady(params): void {
  this.gridApi = params.api;
}

onModelUpdated(): void {
  this.sizeToFit();
}

sizeToFit(): void {
  this.gridApi.sizeColumnsToFit();
}
Источник

Немного поздно, но для тех, кто хочет полностью отключить горизонтальную прокрутку или настроить высоту горизонтальной прокрутки (даже установив их на 0). Вы также должны установитьscrollbarWidth.

gridOptions: {
   suppressHorizontalScroll: true,
   scrollbarWidth: 0
}

Вы можете посмотреть исходный код AgGrid о том, как они работают с горизонтальной прокруткой, здесь:https://github.com/ag-grid/ag-grid/blob/996ffcdcb828ffa3448d57fa919feb9eb465df15/community-modules/core/src/ts/gridPanel/gridPanel.ts

Источник

Еще одно возможное решение, представленное мне коллегой:

В пределах определения столбцов вы можете установить ширину для каждого столбца, рассчитав клиентскую ширину, а затем разделив ее на количество столбцов:

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

В этом случае 40 - это сумма отступов с любой стороны сетки (20 слева + 20 справа).

Источник

Эта проблема остается в версии 22, и приведенные выше решения не казались идеальными. Лучшее решение, которое я нашел, - это позвонитьsizeColumnsToFit в onModelUpdatedобработчик события. См. https://github.com/ag-grid/ag-grid/issues/2310.

Источник

для большой прокрутки, появляющейся на полосе прокрутки, нам нужно использовать событие onGridReady в сетке, которое дает gridApi в качестве параметра в функции обратного вызова, и использовать функцию sizeColumnsToFit , чтобы сохранить работу изменения размера.

Если длина прокрутки мала, то она появляется из-за введенной ширины вертикальной боковой панели (из-за изменения высоты сетки по вертикали).

Мое решение:

  1. Найдите селектор элемента, который вызывает появление вертикальной полосы прокрутки.
  2. У него будет overflow/overflow-y для "auto/scroll". Переполнение / overflow-y для «наложения» решит вашу проблему.

Это работало для меня везде.

Источник

Этот подход предназначен для Angular 2+, используйте sizeColumnsToFit() внутри события firstDataRendered вместо события gridReady или gridSizeChanged, он удалит горизонтальную полосу прокрутки.

       <ag-grid-angular
  [defaultColDef]="defaultColumnDefs"
  [columnDefs]="columnDefs"
  [rowData]="data"
  (gridReady)="onGridReady($event)"
  (firstDataRendered)="onFirstDataRendered($event)">
 </ag-grid-angular>

      private gridApi;

onGridReady(params): void {
  this.gridApi = params.api;
}

onFirstDataRendered(): void {
  this.gridApi.sizeColumnsToFit();
}
Источник
Другие вопросы по тегам