Angular Tree Grid Column Resizing
지연된 그리드 열 크기 조정을 사용하면 Angular 드래그 크기 조정 작업이 적용되는 동안 사용자에게 임시 크기 조정 표시기가 표시됩니다. 드래그 작업이 끝나면 새 그리드 열 너비가 적용됩니다.
Angular 트리 그리드 열 크기 조정 예제
import { Component } from '@angular/core' ;
import { IgxColumnComponent, IgxTreeGridComponent } from 'igniteui-angular' ;
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-tree-grid-column-resizing-sample' ,
styleUrls : ['./tree-grid-column-resizing-sample.component.scss' ],
templateUrl : './tree-grid-column-resizing-sample.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent]
})
export class TreeGridColumnResizingSampleComponent {
public data: any [];
public col: IgxColumnComponent;
public pWidth: string ;
public nWidth: string ;
constructor ( ) {
this .data = generateEmployeeDetailedFlatData();
}
public onResize (event ) {
this .col = event.column;
this .pWidth = event.prevWidth;
this .nWidth = event.newWidth;
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" [data ]="data" primaryKey ="ID" foreignKey ="ParentID" (columnResized )="onResize($event)"
[autoGenerate ]="false" height ="500px" width ="100%" >
<igx-column [field ]="'Name'" [header ]="'Name'" dataType ="string" [resizable ]="true" [width ]="'220px'"
[minWidth ]="'200px'" [maxWidth ]="'250px'" > </igx-column >
<igx-column [field ]="'Title'" [header ]="'Title'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'HireDate'" [header ]="'Hire Date'" dataType ="date" [resizable ]="true" > </igx-column >
<igx-column [field ]="'Age'" [header ]="'Age'" dataType ="number" [resizable ]="true" > </igx-column >
<igx-column [field ]="'Address'" [header ]="'Address'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'City'" [header ]="'City'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'Country'" [header ]="'Country'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'Fax'" [header ]="'Fax'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'PostalCode'" [header ]="'Postal Code'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'Phone'" [header ]="'Phone'" dataType ="string" [resizable ]="true" > </igx-column >
</igx-tree-grid >
</div >
html コピー .grid__wrapper {
margin : 20px ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
열 크기 조정은 열 수준별로 활성화됩니다. 즉, igx-tree-grid에는 크기 조정 가능한 열과 크기 조정 불가능한 열이 혼합되어 있을 수 있습니다. 이는 igx-column
의 resizable
입력을 통해 수행됩니다.
<igx-column [field ]="'ID'" width ="100px" [resizable ]="true" > </igx-column >
html
igx-tree-grid
의 columnResized
이벤트를 구독하면 열 크기가 조정될 때 일부 사용자 지정 논리를 구현할 수 있습니다. 이전 및 새 열 너비와 IgxColumnComponent
객체 모두 이벤트 인수를 통해 노출됩니다.
<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 >
html
public onResize (event ) {
this .col = event.column;
this .pWidth = event.prevWidth;
this .nWidth = event.newWidth;
}
typescript
열 크기를 픽셀/백분율로 조정
사용자 시나리오에 따라 열 너비는 픽셀, 백분율 또는 두 가지의 혼합으로 정의될 수 있습니다. 이러한 모든 시나리오는 열 크기 조정 기능으로 지원됩니다. 기본적으로 열에 너비가 설정되지 않은 경우 너비가 픽셀 단위로 설정된 사용 가능한 공간에 맞춰집니다.
이는 다음 구성이 가능함을 의미합니다.
<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 >
html
픽셀 및 백분율로 설정된 열에 대해 크기 조정이 작동하는 방식에는 약간의 차이가 있습니다.
픽셀
너비(픽셀)로 열 크기를 조정하는 작업은 열 크기에서 마우스 이동의 수평 크기를 직접 더하거나 빼는 방식으로 수행됩니다.
백분율
너비(%)로 열 크기를 조정할 때 마우스 이동의 수평 크기(픽셀)는 대략 그리드 너비에 대한 백분율 크기로 변환됩니다. 열은 계속 반응하며 향후 그리드 크기 조정은 여전히 열에 반영됩니다.
열 크기 조정 제한
허용되는 최소 및 최대 열 너비를 구성할 수도 있습니다. 이는 igx-column
의 minWidth
및 maxWidth
입력을 통해 수행됩니다. 이 경우 크기 조정 표시기 끌기 작업은 minWidth
및 maxWidth
로 정의된 경계 밖에서 열 크기를 조정할 수 없음을 사용자에게 알리기 위해 제한됩니다.
<igx-column [field ]="'ID'" width ="100px" [resizable ]="true"
[minWidth ]="'60px'" [maxWidth ]="'230px'" > </igx-column >
html
최소 및 최대 열 너비 값 유형(픽셀 또는 백분율)을 혼합하는 것이 허용됩니다. 최소값과 최대값에 대해 설정된 값이 백분율로 설정되면 각 열 크기는 픽셀과 유사한 정확한 크기로 제한됩니다.
이는 다음과 같은 구성이 가능함을 의미합니다.
<igx-column [field ]="'ID'" width ="10%" [resizable ]="true"
[minWidth ]="'60px'" [maxWidth ]="'230px'" > </igx-column >
html
또는
<igx-column [field ]="'ID'" width ="100px" [resizable ]="true"
[minWidth ]="'5%'" [maxWidth ]="'15%'" > </igx-column >
html
두 번 클릭하면 열 크기 자동 조정
헤더의 오른쪽을 두 번 클릭하면 각 열의 크기가 자동으로 조정될 수 있습니다. 열의 크기는 헤더 자체를 포함하여 현재 표시되는 가장 긴 셀 값으로 조정됩니다. 이 동작은 기본적으로 활성화되어 있으며 추가 구성이 필요하지 않습니다. 그러나 해당 열에 maxWidth
설정되어 있고 새 너비가 해당 maxWidth
값을 초과하는 경우 열 크기가 자동으로 조정되지 않습니다. 이 경우 열은 미리 설정된 maxWidth
값에 따라 크기가 조정됩니다.
IgxColumnComponent
에 노출된 autosize()
메서드를 사용하여 열 크기를 동적으로 자동 조정할 수도 있습니다.
@ViewChild ('treeGrid' ) treeGrid: IgxTreeGridComponent;
let column = this .treeGrid.columnList.filter(c => c.field === 'ID' )[0 ];
column.autosize();
typescript
초기화 시 열 크기 자동 조정
너비를 '자동'으로 설정하여 초기화 시 각 width
크기가 자동으로 조정되도록 설정할 수 있습니다.
<igx-column width ='auto' > ...
html
열이 뷰에서 처음 초기화되면 너비가 표시되는 가장 긴 셀이나 머리글의 크기로 확인됩니다. 표시되는 행 외부에 있는 셀은 포함되지 않습니다. 이 접근 방식은 초기화 후 자동 크기 조정보다 성능이 더 최적화되어 있으며 특히 많은 수의 열 크기를 자동 조정해야 하는 경우에 권장됩니다.
import { Component } from '@angular/core' ;
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed' ;
import { IgxTreeGridComponent, IgxColumnComponent } from 'igniteui-angular' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
@Component ({
selector : 'tree-grid-columnAutoSizing-sample' ,
styleUrls : ['./treegrid-column-autosizing.component.scss' ],
templateUrl : './treegrid-column-autosizing.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent]
})
export class TreeGridColumnAutoSizingSampleComponent {
public data: any [];
constructor ( ) {
this .data = generateEmployeeDetailedFlatData();
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" [data ]="data" primaryKey ="ID" foreignKey ="ParentID"
[autoGenerate ]="false" height ="500px" width ="100%" >
<igx-column [field ]="'Name'" [header ]="'Name'" dataType ="string" [resizable ]="true" [width ]="'220px'"
[minWidth ]="'200px'" [maxWidth ]="'250px'" > </igx-column >
<igx-column [field ]="'Title'" width ="auto" [header ]="'Title'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'HireDate'" width ="auto" [header ]="'Hire Date'" dataType ="date" [resizable ]="true" > </igx-column >
<igx-column [field ]="'Age'" width ="auto" [header ]="'Age'" dataType ="number" [resizable ]="true" > </igx-column >
<igx-column [field ]="'Address'" width ="auto" [header ]="'Address'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'City' " width ="auto" [header ]="'City'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'Country'" width ="auto" [header ]="'Country'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'Fax'" width ="auto" [header ]="'Fax'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'PostalCode'" width ="auto" [header ]="'Postal Code'" dataType ="string" [resizable ]="true" > </igx-column >
<igx-column [field ]="'Phone'" width ="auto" [header ]="'Phone'" dataType ="string" [resizable ]="true" > </igx-column >
</igx-tree-grid >
</div >
html コピー .grid__wrapper {
margin : 20px ;
}
scss コピー
스타일링
Tree Grid 열 크기 조정 라인의 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 인덱스 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
scss
이를 달성하는 가장 간단한 접근 방식은 grid-theme
확장하고 $resize-line-color
매개변수뿐만 아니라 많은 매개변수를 허용하는 새로운 테마를 만드는 것입니다.
$custom-grid-theme : grid-theme(
$resize-line-color : #0288d1
);
scss
우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color
함수를 사용하여 palette
색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes
.
마지막 단계는 해당 테마와 함께 구성 요소 믹스인을 포함하는 것입니다.
@include css-vars($custom-grid-theme );
scss
데모
import { Component } from '@angular/core' ;
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed' ;
import { IgxTreeGridComponent, IgxColumnComponent } from 'igniteui-angular' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-tree-grid-resize-line-styling-sample' ,
styleUrls : ['./tree-grid-resize-line-styling-sample.component.scss' ],
templateUrl : './tree-grid-resize-line-styling-sample.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent]
})
export class TreeGridResizeLineStylingSampleComponent {
public data: any [];
constructor ( ) {
this .data = generateEmployeeDetailedFlatData();
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" [data ]="data" primaryKey ="ID" foreignKey ="ParentID" [autoGenerate ]="false" height ="500px"
width ="100%" >
<igx-column [field ]="'Name'" [header ]="'Name'" dataType ="string" [resizable ]="true" [width ]="'220px'"
[minWidth ]="'200px'" [maxWidth ]="'250px'" > </igx-column >
<igx-column [field ]="'Title'" [header ]="'Title'" dataType ="string" [resizable ]="true" >
</igx-column >
<igx-column [field ]="'HireDate'" [header ]="'Hire Date'" dataType ="date" [resizable ]="true" >
</igx-column >
<igx-column [field ]="'Age'" [header ]="'Age'" dataType ="number" [resizable ]="true" >
</igx-column >
<igx-column [field ]="'Address'" [header ]="'Address'" dataType ="string" [resizable ]="true" >
</igx-column >
<igx-column [field ]="'City'" [header ]="'City'" dataType ="string" [resizable ]="true" >
</igx-column >
<igx-column [field ]="'Country'" [header ]="'Country'" dataType ="string" [resizable ]="true" >
</igx-column >
<igx-column [field ]="'Fax'" [header ]="'Fax'" dataType ="string" [resizable ]="true" >
</igx-column >
<igx-column [field ]="'PostalCode'" [header ]="'Postal Code'" dataType ="string" [resizable ]="true"
> </igx-column >
<igx-column [field ]="'Phone'" [header ]="'Phone'" dataType ="string" [resizable ]="true" >
</igx-column >
</igx-tree-grid >
</div >
html コピー @use "layout.scss" ;
@use "igniteui-angular/theming" as *;
$custom-grid-theme : grid-theme(
$resize-line-color : #0288d1
);
@include css-vars($custom-grid-theme );
scss コピー
샘플은 Change Theme
에서 선택한 전역 테마의 영향을 받지 않습니다.
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.