Grid 열 크기 조정

열 크기 조정의 지연에서는 드래그 조작의 실행 중에 크기 조정 인디케이터가 일시적으로 표시됩니다. 드래그 조작이 완료되면 새로운 열 크기가 적용됩니다.

Grid 열 크기 조정 데모


열 크기 조정은 열 단위 수준에서도 사용할 수 있는데 즉, igx-grid에 크기를 조정 가능한 열 및 크기를 조정할 수 없는 열을 혼합하여 사용할 수 있습니다. 이는 igx-columnresizable 입력을 통해 제어할 수 있습니다.

<igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>

igx-gridonColumnResized 이벤트를 처리하고 열의 크기를 조정할 때 일부 사용자 논리를 구현할 수 있습니다. IgxColumnComponent 객체뿐 아니라 이전 및 새로운 열 너비는 이벤트 인수를 통해 공개됩니다.

<igx-grid [data]="data" (onColumnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" width="100px" [resizable]="true"></igx-column>
</igx-grid>
public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}

열 크기 조정 제한

최소 및 최대 허용 열 너비를 구성할 수도 있습니다. 이는 igx-columnminWidthmaxWidth 입력을 통해 제어할 수 있습니다. 이 경우, 크기 조정 인디케이터의 드래그 조작은 열이 minWidthmaxWidth에 의해 정의된 범위 이외로 크기를 조정할 수 없음을 사용자에게 알리도록 제한됩니다.

<igx-column [field]="'ID'" width="100px" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
Note

minWidth가 그보다 작은 값으로 설정된 경우에도 열 크기를 88px 미만으로 조정할 수 없습니다.

더블 클릭으로 자동 크기 열 조정

각 열은 헤더의 오른쪽을 더블 클릭하여 자동 크기 조정을 할 수 있는데, 열은 현재 표시되어있는 헤더를 포함하여 가장 긴 셀 값에 크기를 설정합니다. 이 동작은 기본적으로 사용되며 추가 구성이 필요하지 않습니다. 그러나, 해당 열에 maxWidth가 설정되고 새로운 너비가 maxWidth 값을 초과하는 경우, 열이 자동 크기 조정되지 않습니다. 이 경우, 열은 사전 설정된 maxWidth 값에 따라 크기가 조정됩니다.

또한, IgxColumnComponentautosize() 메소드를 사용하여 동적으로 열 크기를 자동 조정할 수 있습니다.

@ViewChild('grid') grid: IgxGridComponent;

let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();

핀 고정된 열 크기 조정

핀 고정된 열 크기를 조정할 수도 있습니다. 그러나, 핀 고정된 열 컨테이너의 전체 너비가 전체 Grid 너비의 80%보다 커지지 않도록 크기 조정이 제한됩니다. 핀 고정 열의 자동 크기 조정에서 새로운 너비에 대해 핀 고정 열 컨테이너가 전체 Grid 너비의 80%를 초과하는 경우, 자동 크기 조정은 무시됩니다. 이는 핀 고정되어 있지 않은 열을 항상 표시하여 사용자가 사용할 수 있도록 하기 위함입니다.

API 참조

추가 리소스

커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.