Angular Tree Grid Column Resizing

지연된 그리드 열 크기 조정을 사용하면 Angular 드래그 크기 조정 작업이 실행되는 동안 사용자에게 임시 크기 조정 표시기가 표시됩니다. 드래그 작업이 끝나면 새 그리드 열 너비가 적용됩니다.

Angular Tree Grid Column Resizing Example

열 크기 조정은 열 수준별로 활성화됩니다. 즉, igx-tree-grid에는 크기 조정 가능한 열과 크기 조정 불가능한 열이 혼합되어 있을 수 있습니다. 이는 igx-column의 resizable 입력을 통해 수행됩니다.

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

​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>

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

허용되는 최소 및 최대 열 너비를 구성할 수도 있습니다. 이는 igx-column의 minWidth 및 maxWidth 입력을 통해 수행됩니다. 이 경우 크기 조정 표시기 끌기 작업은 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 값에 따라 크기가 조정됩니다.

​IgxColumnComponent에 노출된 autosize() 메서드를 사용하여 열 크기를 동적으로 자동 조정할 수도 있습니다.

@ViewChild('treeGrid') treeGrid: IgxTreeGridComponent;

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

Auto-size columns on initialization

너비를 '자동'으로 설정하여 초기화 시 각 width 크기가 자동으로 조정되도록 설정할 수 있습니다.

<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';

이를 달성하는 가장 간단한 접근 방식은 grid-theme 확장하고 $resize-line-color 매개변수뿐만 아니라 많은 매개변수를 허용하는 새로운 테마를 만드는 것입니다.

$custom-grid-theme: grid-theme(
    $resize-line-color: #0288D1
);

Note

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.

:host {
    ::ng-deep {
        @include grid($custom-grid-theme);
    }
}

Defining a color palette

색상 값을 하드 코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.

igx-palette 지정된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.

$primary-color: #0288D1;
$secondary-color: #BDBDBD;

$custom-theme-palette: palette($primary: $primary-color, $secondary: $secondary-color);

그런 다음 igx-color 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.

$custom-grid-theme: grid-theme(
    $palette: $custom-theme-palette,
    $resize-line-color: color($custom-theme-palette, 'secondary', 500)
);

Note

​igx-color 및 igx-palette 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.

Using Schemas

테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.

모든 구성 요소에 제공된 사전 정의된 스키마(이 경우 light-grid 스키마)를 확장합니다.

// Extending the light grid schema
$light-grid-schema: extend($_light-grid,
    (
        resize-line-color: (
           color: ('secondary', 500)
            ),
        header-background: (
           color: ("primary", 100)
            ),
        header-text-color: (
           color: ("primary", 600)
            )
    )
);

사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(light 또는 dark), 이는 기본적으로 사용자 정의 스키마로 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.

// Extending the global light-schema
$custom-light-grid-schema: extend($light-schema,(
    igx-grid: $light-grid-schema
));

// Specifying the palette and schema of the custom grid theme
$custom-grid-theme: grid-theme(
    $palette: $custom-theme-palette,
    $schema: $custom-light-grid-schema
);

위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.

Demo

Note

샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.

API References

• IgxColumnComponent
• IgxTreeGridComponent
• IgxTreeGridComponent Styles

Additional Resources

• 트리 그리드 개요
• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 선택

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub