Angular 계층형 그리드 열 크기 조정

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

    Angular Hierarchical Grid Column Resizing Example

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

    <igx-column [field]="'Artist'" [resizable]="true"></igx-column>
    

    igx-hierarchical-gridcolumnResized 이벤트를 구독하면 열 크기가 조정될 때 일부 사용자 지정 논리를 구현할 수 있습니다. 이전 및 새 열 너비와 IgxColumnComponent 객체 모두 이벤트 인수를 통해 노출됩니다.

      <igx-hierarchical-grid class="hgrid" [data]="localdata" (columnResized)="onResize($event)" [autoGenerate]="false"
            [height]="'600px'" [width]="'100%'" #hierarchicalGrid>
            <igx-column field="Artist" [resizable]="true"></igx-column>
            ...
    </igx-hierarchical-grid>
    
    public onResize(event) {
        this.col = event.column;
        this.pWidth = event.prevWidth;
        this.nWidth = event.newWidth;
    }
    

    Resizing columns in pixels/percentages

    사용자 시나리오에 따라 열 너비는 픽셀, 백분율 또는 두 가지의 혼합으로 정의될 수 있습니다. 이러한 모든 시나리오는 열 크기 조정 기능으로 지원됩니다. 기본적으로 열에 너비가 설정되지 않은 경우 너비가 픽셀 단위로 설정된 사용 가능한 공간에 맞춰집니다.

    이는 다음 구성이 가능함을 의미합니다.

      <igx-hierarchical-grid class="hgrid" [data]="localdata" (columnResized)="onResize($event)" [autoGenerate]="false"
            [height]="'600px'" [width]="'100%'" #hierarchicalGrid>
            <igx-column field="Artist" [resizable]="true" [width]="'10%'"></igx-column>
            <igx-column field="GrammyNominations" [resizable]="true" [width]="'100px'"></igx-column>
            <igx-column field="GrammyAwards" [resizable]="true"></igx-column>
            ...
    </igx-hierarchical-grid>
    
    Note

    픽셀 및 백분율로 설정된 열에 대해 크기 조정이 작동하는 방식에는 약간의 차이가 있습니다.

    픽셀

    너비(픽셀)로 열 크기를 조정하는 작업은 열 크기에서 마우스 이동의 수평 크기를 직접 더하거나 빼는 방식으로 수행됩니다.

    백분율

    너비(%)로 열 크기를 조정할 때 마우스 이동의 수평 크기(픽셀)는 대략 그리드 너비에 대한 백분율 크기로 변환됩니다. 열은 계속 반응하며 향후 그리드 크기 조정은 여전히 열에 반영됩니다.

    Restrict column resizing

    허용되는 최소 및 최대 열 너비를 구성할 수도 있습니다. 이는 igx-columnminWidthmaxWidth 입력을 통해 수행됩니다. 이 경우 크기 조정 표시기 끌기 작업은 minWidthmaxWidth로 정의된 경계 밖에서 열 크기를 조정할 수 없음을 사용자에게 알리기 위해 제한됩니다.

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

    최소 및 최대 열 너비 값 유형(픽셀 또는 백분율)을 혼합하는 것이 허용됩니다. 최소값과 최대값에 대해 설정된 값이 백분율로 설정되면 각 열 크기는 픽셀과 유사한 정확한 크기로 제한됩니다.

    이는 다음과 같은 구성이 가능함을 의미합니다.

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

    또는

    <igx-column [field]="'Artist'" width="100px" [resizable]="true"
                [minWidth]="'60px'" [maxWidth]="'15%'"></igx-column>
    

    Auto-size columns on double click

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

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

    @ViewChild('hierarchicalGrid') hierarchicalGrid: IgxHierarchicalGridComponent;
    
    let column = this.hierarchicalGrid.columnList.filter(c => c.field === 'Artist')[0];
    column.autosize();
    

    Auto-size columns on initialization

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

    <igx-column width='auto'>...
    

    열이 뷰에서 처음 초기화되면 너비가 표시되는 가장 긴 셀이나 머리글의 크기로 확인됩니다. 표시되는 행 외부에 있는 셀은 포함되지 않습니다. 이 접근 방식은 초기화 후 자동 크기 조정보다 성능이 더 최적화되어 있으며 특히 많은 수의 열 크기를 자동 조정해야 하는 경우에 권장됩니다.

    스타일링

    Hierarchical 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-paletteigx-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-colorigx-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

    Additional Resources

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