>

지금, 열 그리드 너비를 지정하는 유일한 방법은 다음과 같이 열 정의에 너비 속성을 추가하는 것입니다.

columnDefs: any[] = [
  { 
    headerName: 'ID',
    field: 'id',
    width: 50,
    type: 'numericColumn'
  }
];

하지만 다음 예에서 볼 수 있듯이 그리드의 열이 전체 화면 너비를 차지하지 않습니다.

https : // stackblitz .com/edit/ag-grid-bss-test-nnojxg? file = app % 2Fapp.component.ts

각 열의 너비를 백분율로 설정하고 싶지만이 작업을 수행하는 방법을 찾을 수 없습니다.

width: 10% 사용  작동하지 않습니다.

이 문제에 대한 해결책이 있습니까?


  • 답변 # 1

    아니요, 기본적으로 불가능합니다. 너비, 최소 너비 및 최대 너비는 절대 숫자로만 설정할 수 있습니다. AgGrid에서 동적 너비를 갖는 가장 쉬운 방법은 this.gridOptions.api.sizeColumnsToFit(); 를 사용하는 것입니다. 따라서 셀의 기존 값에 대해 가장 작은 너비 (colDef의 지정된 너비에 따라)를 사용합니다.

    width 를 계산해 볼 수 있습니다  창 너비를 기준으로 수동으로 (onInit) 설정 한 다음 AgGrid를 다시 초기화하십시오. 그러나 사용자가 창 크기를 조정할 때 (Window-Resize-HostListener에서) 다시 계산하고 그리드를 다시 초기화해야하기 때문에 권장하지 않습니다. 디 바운스 타임으로 가능할 수 있으므로 (사용자가 브라우저 코너를 끌고있는 동안 밀리 초마다 다시 초기화하지는 않지만) 해킹이되어 결국에는 디버그하기가 매우 어렵습니다. 유지 관리하기 어려운 코드입니다.

  • 답변 # 2

    @Phil이 제안한 방법을 사용하여 gridReady 를 사용하여 그리드를 사용 가능한 뷰 포트 너비로 가져갈 수 있습니다.  이 방법으로 이벤트 :

    구성 요소 템플릿 :

    <ag-grid-angular  class="ag-theme-balham" [gridOptions]="gridOptions"
      (gridReady)="onGridReady($event)"> 
    </ag-grid-angular>
    
    

    구성 요소 유형 스크립트 파일 :

    onGridReady(params) {
      params.api.sizeColumnsToFit();
    }
    
    

    데모 :

    https://stackblitz.com/edit/ag-grid-bss-test-aejozx?file=app%2Fapp.component.html

  • 답변 # 3

    내 해결 방법은 렘에서 픽셀까지의 숫자 값 :

    const remInPixel = parseFloat(getComputedStyle(document.documentElement).fontSize);
    const convertRemToPixel = (rem) => rem * remInPixel;
    
    
    그런 다음 width 에서 이것을 사용하십시오.  열 정의의 속성.

    ag-grid 에서의 사용 예  열 정의 :

    {
        headerName: "Example",
        field: "exampleField",
        width: convertRemToPixel(3)
    }
    
    

    실제로 여기에 이 함수를 사용할 수 있습니다.

  • 답변 # 4

    해결 방법은 AG-Grid의 부모 div의 너비를 계산하고 특정 열에 할당 할 백분율로 픽셀을 계산하는 것입니다. jQuery를 사용하는 솔루션은 다음과 같습니다.

     function columnWidth(id, percentage){
        var div = $("#" + id);  // HTML ID of Grid
        var parent = div.parent();
        var width = parent.width() * percentage/100;  // Pixel calculation
        return width;
    }
    var colDefs = [
           {
             field: "name",
             width: columnWidth("myGridId",25)
           } 
    ]
    
    

    이것은 저에게 잘 작동했습니다.

관련 자료

  • 이전 vue.js - id로 기사를 반환 — vue router, vuex
  • 다음 Espresso로 Android 앱에서 UI 테스트를 실행 중인지 감지하는 방법