Angular 계층적 그리드 조건부 스타일링

IgxHierarchicalGrid 구성 요소에 사용자 정의 스타일을 제공해야 하는 경우 행 또는 셀 수준에서 수행할 수 있습니다.

Hierarchical Grid Conditional Row Styling

Ignite UI for Angular의 IgxHierarchicalGrid 구성 요소는 사용자 지정 규칙에 따라 행의 조건부 스타일을 지정하는 두 가지 방법을 제공합니다.

• By setting rowClasses input on the IgxHierarchicalGrid component;
• By setting rowStyles input on the IgxHierarchicalGrid component;

이 주제에서는 두 가지 모두에 대해 더 자세히 다룰 것입니다.

Using rowClasses

You can conditionally style the IgxHierarchicalGrid rows by setting the rowClasses input and define custom rules.

<igx-hierarchical-grid  #hierarchicalGrid class="hgrid" [data]="localData" [height]="'580px'" [width]="'100%'" [rowStyles]="rowStyles">
    ...
</igx-hierarchical-grid>

입력은rowClasses 키-값 쌍을 포함하는 객체 리터럴을 받아들이며, 키는 CSS 클래스 이름이고, 값은 불리언 또는 불리언 값을 반환하는 콜백 함수입니다.

// sample.component.ts

public rowClasses = {
  activeRow: this.activeRowCondition
};

public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;

// sample.component.scss

::ng-deep {
 .activeRow {
  border: 2px solid #fc81b8;
  border-left: 3px solid #e41c77;
 }
}

Note

​::ng-deep​ViewEncapsulation.None또는 현재 컴포넌트와 그 자식들을 통해 커스텀 스타일을 강제로 내리도록 하세요.

Demo

Using rowStyles

이제 열은 데이터 행의 조건부 스타일링을 가능하게 하는 속성을 노출합니다rowStyles. 비슷하게rowClasses 객체 리터럴을 받아들이는데, 키는 스타일 속성이고 값은 평가용입니다. 또한, 아무 조건 없이 일반 스타일링도 가능합니다.

와rowStyles에 대한rowClasses 콜백 서명은 다음과 같습니다:

(row: RowType) => boolean

스타일을 정의해 보겠습니다.

// component.ts
public rowStyles = {
    background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
    'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
};

public childRowStyles = {
    'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};

<igx-hierarchical-grid  #hierarchicalGrid [data]="localdata" [autoGenerate]="false"
        [height]="'580px'" [width]="'100%'" [rowStyles]="rowStyles">
        <igx-row-island [key]="'Albums'" [autoGenerate]="false" [rowStyles]="childRowStyles">
             ...
        </igx-row-island>  
    ...
</igx-hierarchical-grid>

Demo

Hierarchical Grid Conditional Cell Styling

개요

Ignite UI for Angular의 IgxHierarchicalGrid 구성 요소는 사용자 지정 규칙에 따라 셀에 조건부 스타일을 지정하는 두 가지 방법을 제공합니다.

• 입력IgxColumnComponent을cellClasses 키-값 쌍을 포함하는 객체 리터럴로 설정함으로써. 키는 CSS 클래스의 이름이며, 값은 불리언 값을 반환하는 콜백 함수 또는 불리언 값일 수 있습니다. 그 결과 셀의 편리한 소재 스타일링이 완성됩니다.

// component.ts file
public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};
...

private downFontCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 95;
}

// component.scss file
.upFont {
  color: red;
}

.downFont {
  color: green;
}

Using cellClasses

You can conditionally style the IgxHierarchicalGrid cells by setting the IgxColumnComponent cellClasses input and define custom rules.

<!-- sample.component.html -->
<igx-column field="GrammyNominations" header="Grammy Nominations" dataType="number" [cellClasses]="grammyClasses"></igx-column>

입력은cellClasses 키-값 쌍을 포함하는 객체 리터럴을 받아들이며, 키는 CSS 클래스 이름이고, 값은 불리언 또는 불리언 값을 반환하는 콜백 함수입니다.

// sample.component.ts

private upGrammyCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] > 5;
}

private downGrammyCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 5;
}

public grammyClasses = {
    downGrammy: this.downPriceCondition,
    upGrammy: this.upPriceCondition
};

// sample.component.scss

::ng-deep {
    .upGrammy {
        color: red;
    }

    .downGrammy {
        color: green;
    }
}

Note

​::ng-deep​ViewEncapsulation.None또는 현재 컴포넌트와 그 자식들을 통해 커스텀 스타일을 강제로 내리도록 하세요.

Demo

• 입력을IgxColumnComponent​cellStyles 사용하여 객체 리터럴을 받아들이고, 키는 스타일 속성이고 값은 평가용입니다.

public styles = {
    'background': 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)',
    'text-shadow': '1px 1px 2px rgba(25,25,25,.25)',
    'animation': '0.25s ease-in-out forwards alternate popin'
};

두 분 모두cellStyles​cellClasses의 콜백 서명은 이제 다음과 같이 변경되었습니다:

(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

Using cellStyles

이제 열은 열의 조건부 스타일링을 가능하게 하는 속성을 노출합니다cellStyles. 비슷하게cellClasses 객체 리터럴을 받아들이는데, 키는 스타일 속성이고 값은 평가용입니다. 또한, 일반적인 스타일링도 (아무런 조건 없이) 쉽게 바를 수 있습니다.

​위의 샘플 에서는 다음을 만들었습니다.

• 열 인덱스를 기반으로 적용되는 두 가지 스타일입니다.
• 짝수/홀수 행을 기준으로 변경text color도 됩니다.

두 가지 모두cellStyles의 콜백 서명은 다음과 같습니다:

(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

스타일을 정의해 보겠습니다.

// component.ts
public oddColStyles = {
    background: 'linear-gradient(to right, #b993d6, #8ca6db)',
    color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray',
    animation: '0.75s popin'
};

public evenColStyles = {
    background: 'linear-gradient(to right, #8ca6db, #b993d6)',
    color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white',
    animation: '0.75s popin'
};

On ngOnInit we will add the cellStyles configuration for each column of the predefined columns collection, which is used to create the IgxHierarchicalGrid columns dynamically.

// component.ts
public ngOnInit() {
    this.data = SINGERS;
    this.columns = [
        { field: 'Artist' },
        { field: 'HasGrammyAward' },
        { field: 'Debut' },
        { field: 'GrammyNominations' },
        { field: 'GrammyAwards' }
    ];

    this.applyCSS();
}

public applyCSS() {
    this.columns.forEach((column, index) => {
        column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles);
    });
}

public updateCSS(css: string) {
    this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)};
    this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)};
    this.applyCSS();
}

<igx-hierarchical-grid #hierarchicalGrid [data]="localdata"    
    [autoGenerate]="false"
    [height]="'580px'">
    <igx-column *ngFor="let c of columns"
        [field]="c.field"
        [header]="c.header"
        [cellStyles]="c.cellStyles">
    </igx-column>
</igx-hierarchical-grid>

애니메이션을popin 정의하세요

// component.scss
@keyframes popin {
    0% {
        opacity: 0.1;
        transform: scale(.75, .75);
        filter: blur(3px) invert(1);
    }

    50% {
        opacity: .5;
        filter: blur(1px);
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
        filter: none;
    }
}

Demo

Known issues and limitations

• 만약 여러 셀이 같은 조건(서로 다른 컬럼에서)에 결합하고 한 셀이 업데이트되면, 조건이 충족되면 다른 셀들은 새 값에 따라 업데이트되지 않습니다. 변경 사항을 나머지 셀에 적용하기 위해 파이프 점검을 수행해야 합니다. 아래 예시는 다음과 같은 조건을 사용하여 이를 구현하는 방법을 보여줍니다.spread operator(...)에onCellEdit 이벤트. 이렇게 하면 원래 객체를 새 인스턴스로 복사하고, 순수 파이프를 발사할 수 있게 됩니다.

public backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};
...

editDone(evt) {
    this.backgroundClasses = {...this.backgroundClasses};
}

<igx-hierarchical-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
  <igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
  <igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
  <igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>
</igx-hierarchical-grid>

API References

• IgxColumnComponent
• IgxHierarchicalGridComponent
• IgxHierarchicalGridComponent Styles

Additional Resources

• 계층적 그리드 개요
• 가상화 및 성능
• 편집
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 열 크기 조정
• 열 숨기기
• 선택
• 수색
• 툴바
• 다중 열 헤더
• 크기

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

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