크기를 사용하더라도 오는 불필요한 가로 스크롤 바아 ag-grid에서 ColumnsToFit

크기를 사용하더라도 오는 불필요한 가로 스크롤 바아 ag-grid에서 ColumnsToFit

ag-grid 버전을 7.2.0에서 v14.2.0으로 업그레이드했습니다.사용할때sizeColumnsToFit()와의 api.onGridReady아니면onGridSizeChanged이벤트, 작동하지만 불필요한 수평 스크롤을 유지합니다. 그리드 폭 계산이 잘못되어 있을 수 있습니다.

이 문제(?)는 ag-grid의 공식적인 예에서도 볼 수 있습니다.

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

이전 버전에서는 가로 스크롤 없이도 완전히 정상적으로 작동합니다.

수동으로 전화를 걸 때$scope.gridOptions.api.sizeColumnsToFit(), 수평 스크롤을 제거합니다.

다음은 내 그리드 옵션입니다.

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

전 재산 억제제를 사용할 수 있다는 걸 알아요HorizontalScroll= true입니다.그러나 사용자가 수동으로 열 크기를 조정할 때 스크롤이 나타나지 않기 때문에 사용하고 싶지 않습니다.

저는 같은/유사한 문제에 부딪쳤습니다.근본적인 문제는 세로 스크롤 바를 추가하기 전에 열 크기를 조정했다는 것입니다.이 문제를 해결하려면 행을 추가한 후 크기를 조정합니다.그럼에도 타임아웃 없이는 작동하지 않을 수 있습니다.

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

이것은 OP가 본 것과는 다른 증상일 수 있지만 다른 사람들에게는 유용할 수 있습니다.

저에게 가장 좋은 해결책은 api.sizeColumnsToFit()을 modelUpdate된 이벤트에 호출하는 것입니다.

Timeout을 설정할 필요가 없으며 너비를 설정합니다.

예제 코드:

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

onModelUpdate()에서 api.sizeColumnsToFit을 호출합니다.

private gridApi;

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

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

sizeToFit(): void {
  this.gridApi.sizeColumnsToFit();
}

이건 버그가 아니라 특징입니다.모든 열의 전체 너비 수가 래퍼보다 크면 스크롤 막대가 나타납니다.옷을 갈아입어야 합니다.minWidth/maxWidthheaderFields 속성이면 됩니다.

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

사이드 노트:범위 변경으로 인해 그리드 데이터가 변경되거나 초기 정의되지 않은 경우 호출해야 합니다.sizeColumnsToFit()같은 새로운 소화원에서setTimeout(() => {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#L889

또 다른 가능한 해결책, 방금 한 대학생이 제게 제시한 것입니다.

일반적으로 지시와 기능은 서로 다르다는 것을 명심해야 합니다; 전자는 다음에 의해 통제됩니다.

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

그리고 후자는 OpenMP 라이브러리에 링크하여 제어합니다.

(댓글을 통합하도록 업데이트됨)사용해 보십시오.sizeColumnsToFit그리고.onModelUpdatedOpenMP를 정적으로 연결하는 옵션. 왜냐하면 이것은

, 다음 명령은 당신이 위치를 지정하지 않는 한 정확하게 컴파일되지 않습니다.

.

(댓글을 통합하기 위해 업데이트됨) OpenMP 라이브러리가 이미 라이브러리 경로에 있고 시스템의 동적 링크기가 다음 명령어를 올바르게 컴파일하고 있다고 생각합니다.

1. .
2. 다음 명령은 OpenMP용 공유 개체에 링크되어 있으므로 올바르게 컴파일되고 있을 것입니다(

). 참고:

옵션이 사용되지 않습니다.

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

---

지정하지 않으시면