Angular Tree Grid Column Resizing
지연된 그리드 열 크기 조정을 사용하면 Angular 드래그 크기 조정 작업이 적용되는 동안 사용자에게 임시 크기 조정 표시기가 표시됩니다. 드래그 작업이 끝나면 새 그리드 열 너비가 적용됩니다.
Angular Tree Grid Column Resizing Example
Column resizing is also enabled per-column level, meaning that the igx-tree-grid can have a mix of resizable and non-resizable columns. This is done via the resizable input of the igx-column.
<igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>
You can subscribe to the columnResized event of the igx-tree-grid to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the IgxColumnComponent object, are exposed through the event arguments.
<igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" (columnResized)="onResize($event)" [autoGenerate]="false">
<igx-column [field]="'Title'" [resizable]="true" [width]="'100px'"></igx-column>
<igx-column [field]="'HireDate'" [resizable]="true" [width]="'100px'"></igx-column>
</igx-tree-grid>
public onResize(event) {
this.col = event.column;
this.pWidth = event.prevWidth;
this.nWidth = event.newWidth;
}
Resizing columns in pixels/percentages
사용자 시나리오에 따라 열 너비는 픽셀, 백분율 또는 두 가지의 혼합으로 정의될 수 있습니다. 이러한 모든 시나리오는 열 크기 조정 기능으로 지원됩니다. 기본적으로 열에 너비가 설정되지 않은 경우 너비가 픽셀 단위로 설정된 사용 가능한 공간에 맞춰집니다.
이는 다음 구성이 가능함을 의미합니다.
<igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" (columnResized)="onResize($event)" [autoGenerate]="false">
<igx-column [field]="'Title'" [resizable]="true" [width]="'10%'"></igx-column>
<igx-column [field]="'HireDate'" [resizable]="true" [width]="'100px'"></igx-column>
<igx-column [field]="'Age'" dataType="number" [resizable]="true"></igx-column>
</igx-tree-grid>
Note
픽셀 및 백분율로 설정된 열에 대해 크기 조정이 작동하는 방식에는 약간의 차이가 있습니다.
픽셀
너비(픽셀)로 열 크기를 조정하는 작업은 열 크기에서 마우스 이동의 수평 크기를 직접 더하거나 빼는 방식으로 수행됩니다.
백분율
너비(%)로 열 크기를 조정할 때 마우스 이동의 수평 크기(픽셀)는 대략 그리드 너비에 대한 백분율 크기로 변환됩니다. 열은 계속 반응하며 향후 그리드 크기 조정은 여전히 열에 반영됩니다.
Restrict column resizing
최소 및 최대 허용 열의 너비도 설정할 수 있습니다. 이 작업은 의 와minWidth 입력maxWidth을 통해igx-column 수행됩니다. 이 경우 크기 조절 인디케이터 드래그 작업은 사용자가minWidth 열을 그리고 정의maxWidth 된 경계 밖으로는 크기 조절할 수 없음을 알려주기 위해 제한됩니다.
<igx-column [field]="'ID'" width="100px" [resizable]="true"
[minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
최소 및 최대 열 너비 값 유형(픽셀 또는 백분율)을 혼합하는 것이 허용됩니다. 최소값과 최대값에 대해 설정된 값이 백분율로 설정되면 각 열 크기는 픽셀과 유사한 정확한 크기로 제한됩니다.
이는 다음과 같은 구성이 가능함을 의미합니다.
<igx-column [field]="'ID'" width="10%" [resizable]="true"
[minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
또는
<igx-column [field]="'ID'" width="100px" [resizable]="true"
[minWidth]="'5%'" [maxWidth]="'15%'"></igx-column>
Auto-size columns on double click
각 열은 헤더 오른쪽을 더블 클릭하면 자동으로 크기를 조절 할 수 있으며, 열은 헤더 자체를 포함해 현재 보이는 가장 긴 셀 값으로 크기가 조정됩니다. 이 동작은 기본적으로 활성화되어 있으며, 추가 설정이 필요하지 않습니다. 하지만 해당 열에 설정된 경우 새로운 너비가 그maxWidth 값보다 커지면 열은 자동 크기maxWidth가 되지 않습니다. 이 경우 열은 미리 설정된maxWidth 값에 따라 크기가 조정됩니다.
노출autosize() 된 메서드를 사용IgxColumnComponent 해 열을 동적으로 자동 크기 조절할 수도 있습니다.
@ViewChild('treeGrid') treeGrid: IgxTreeGridComponent;
let column = this.treeGrid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();
Auto-size columns on initialization
Each column can be set to auto-size on initialization by setting width to 'auto':
<igx-column width='auto'>...
열이 뷰에서 처음 초기화되면 너비가 표시되는 가장 긴 셀이나 머리글의 크기로 확인됩니다. 표시되는 행 외부에 있는 셀은 포함되지 않습니다. 이 접근 방식은 초기화 후 자동 크기 조정보다 성능이 더 최적화되어 있으며 특히 많은 수의 열 크기를 자동 조정해야 하는 경우에 권장됩니다.
스타일링
Tree Grid 열 크기 조정 라인의 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 인덱스 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
The simplest approach to achieve this is to create a new theme that extends the grid-theme and accepts many parameters as well as the $resize-line-color parameter.
$custom-grid-theme: grid-theme(
$resize-line-color: #0288d1
);
Note
우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.
마지막 단계는 해당 테마와 함께 구성 요소 믹스인을 포함하는 것입니다.
@include css-vars($custom-grid-theme);
Demo
Note
샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub