홈>
지금, 열 그리드 너비를 지정하는 유일한 방법은 다음과 같이 열 정의에 너비 속성을 추가하는 것입니다.
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
- 답변 # 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) } ]
이것은 저에게 잘 작동했습니다.
관련 자료
- pandas - 파이썬에서 열 값을 파일 이름으로 출력 할 가능성이 있습니까?
- r에서 열당 하나 이상의 경우가 있는지 확인하는 방법은 무엇입니까?
- pandas - 해당 데이터 프레임의 열에 해당 데이터 프레임의 다른 열의 하위 문자열이 포함되어있는 경우 DataFrame의 행만 유지하는 방법이 있습니까?
- python - Pandas 열에 단어 만있는 경우 Pandas 데이터 프레임에서 행을 삭제하는 방법
- angular - ag-grid가 ColumnDefinitions에 설정된 열 순서를 따르지 않음
- ms access - 자동으로 재설정되는 시퀀스 열을 만드는 방법이 있습니까?
- python argparser를 사용하여 두 개의 arg 중 1 개만 제공 할 수 있음을 지정하는 방법이 있습니까?
- laravel - 모델을 감사 할 때 특정 사용자를 지정하는 방법이 있습니까?
- python - Pandas 피벗 테이블에서 열 수와 각 열의 너비를 얻는 방법은 무엇입니까?
- excel - VBA 새로 고침 쿼리 후 열 너비 조정
- html - 레이아웃 = 고정 일 때 열 너비와 여백을 변경할 수 없습니다
- 열 Apexcharts 차트의 최소 높이 또는 너비 설정
- html - 왼쪽 열이 백분율 너비를 사용하는 경우 오른쪽 열이 고정 너비를 사용하도록하려면 어떻게해야합니까?
- cocoa - outlineViewItemDidExpand에 대한 응답으로 열 너비를 변경할 수 없습니다
- ios - 유연성을 유지하기 위해 폭의 프레임 수정자를 사용하여 여러 열 목록의 1 개 열이 동일한 너비가되는 방법
- string - psql에서 최대 열 너비를 어떻게 설정합니까?
- excel - 다른 셀을 기반으로 행과 열 모두 조건부 서식을 지정하는 방법이 있습니까?
관련 질문
- angular : AG-GRID: 행에 확장/축소 기능을 갖고 확장된 영역에 사용자 정의 콘텐츠를 표시하는 방법이 있습니까?
- angular : Api를 사용할 때 Ag Grid의 무한 스크롤이 작동하지 않음
- angular : 열의 maxWidth는 ag-grid의 autoAutoSize 기능으로 크기를 조정할 수 없습니다.
- 'ag-grid-angular'의 알려진 속성이 아니므로 'groupDisplayType'에 바인딩할 수 없습니다.
- ag-grid-angular에 Excel 파일을 넣는 방법
- 미국, 러시아, 호주, 캐나다 등의 확인란을 숨길 필요가 있습니다. 자식 행을 클릭하면 나타납니다. Angular에서 이를 어떻게 달성할 수 있습니까?
- javascript : ag-grid 확인란의 행 인덱스를 얻는 방법
- ag-grid Angular에서 Excel 파일을 가져오는 방법
- Angular의 ag-grid에 그리드 API를 테스트하는 방법은 무엇입니까?
아니요, 기본적으로 불가능합니다. 너비, 최소 너비 및 최대 너비는 절대 숫자로만 설정할 수 있습니다. AgGrid에서 동적 너비를 갖는 가장 쉬운 방법은
this.gridOptions.api.sizeColumnsToFit();
를 사용하는 것입니다. 따라서 셀의 기존 값에 대해 가장 작은 너비 (colDef의 지정된 너비에 따라)를 사용합니다.width
를 계산해 볼 수 있습니다 창 너비를 기준으로 수동으로 (onInit) 설정 한 다음 AgGrid를 다시 초기화하십시오. 그러나 사용자가 창 크기를 조정할 때 (Window-Resize-HostListener에서) 다시 계산하고 그리드를 다시 초기화해야하기 때문에 권장하지 않습니다. 디 바운스 타임으로 가능할 수 있으므로 (사용자가 브라우저 코너를 끌고있는 동안 밀리 초마다 다시 초기화하지는 않지만) 해킹이되어 결국에는 디버그하기가 매우 어렵습니다. 유지 관리하기 어려운 코드입니다.