Web Components 계층적 그리드 조건부 스타일

The Ignite UI for Web Components Conditional Styling feature in Web Components Hierarchical Grid allows custom styling on a row or cell level. The IgcHierarchicalGridComponent Conditional Styling functionality is used to visually emphasize or highlight data that meets certain criteria, making it easier for users to identify important information or trends within the grid.

Hierarchical Grid Conditional Row Styling

The IgcHierarchicalGridComponent component in Ignite UI for Web Components provides two ways to conditional styling of rows based on custom rules.

• 컴포넌트rowClasses에 입력을 설정IgcHierarchicalGridComponent 하면;
• 컴포넌트rowStyles에 입력을 설정IgcHierarchicalGridComponent 하면;

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

Using Row Classes

입력을IgcHierarchicalGridComponent 설정하고 커스텀 규칙을 정의해 조건부 스타일rowClasses 링을 할 수 있습니다.

<igc-hierarchical-grid id="grid" height="600px" width="100%">
</igc-hierarchical-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGrid;
    grid.rowClasses = this.rowClasses;
}

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

public rowClasses = {
    activeRow: (row: IgcRowType) => row.index === 0
}

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

Demo

Using Row Styles

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

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

(row: IgcRowType) => boolean

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

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

<igc-hierarchical-grid id="hierarchicalGrid" auto-generate="true"
        height="580px" width="100%">
        <igc-row-island id="rowIsland1" child-data-key="Albums" auto-generate="true" >
        </igc-row-island>>
</igc-hierarchical-grid>

constructor() {
    var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
    var rowIsland1 = this.rowIsland1 = document.getElementById('rowIsland1') as IgcRowIslandComponent;
    hierarchicalGrid.rowStyles = this.rowStyles;
    rowIsland1.rowStyles = this.childRowStyles;
}

Demo

Hierarchical Grid Conditional Cell Styling

개요

The IgcHierarchicalGridComponent component in Ignite UI for Web Components provides two ways to conditional styling of cells based on custom rules.

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

Using Cell Classes

셀을 조건부 스타일링IgcHierarchicalGridComponent으로 설정할 수 있습니다.IgcColumnComponent cellClasses 사용자 정의 규칙을 입력하고 정의하세요.

<igc-column id="grammyNominations" field="GrammyNominations" data-type="Number"></igc-column>

constructor() {
    var grammyNominations = document.getElementById('grammyNominations') as IgcColumnComponent;
    grammyNominations.cellClasses = this.grammyNominationsCellClassesHandler;
}

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

public grammyNominationsCellClassesHandler = {
    downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5,
    upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6
};

.upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}

Demo

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

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

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

Using Cell Styles

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

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

public cellStylesHandler = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "Debut") {
            return cellValue > 2000 ? "#28a745" : "#dc3545";
        }
        return undefined;
    }
}

<igc-column id="col1">
</igc-column>

constructor() {
    var col1 = document.getElementById('col1') as IgcColumnComponent;
    col1.cellStyles = this.cellStylesHandler;
}

Demo

Known issues and limitations

• 동일한 조건(다른 열의)에 바인딩된 셀이 있고 하나의 셀이 업데이트되는 경우 조건이 충족되면 다른 셀은 새 값을 기반으로 업데이트되지 않습니다.

나머지 셀에 변경 사항을 적용하려면 검사를 수행해야 합니다. 아래 예에서는 이를 수행하는 방법을 보여줍니다.

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

public editDone(evt) {
    this.Col1.cellClasses = {...this.backgroundClasses};
}

<igc-hierarchical-grid id="grid1" height="500px" width="100%" >
  <igc-column id="Col1" field="Col1" data-type="number"></igx-column>
  <igc-column id="Col2" field="Col2" data-type="number" editable="true"></igx-column>
  <igc-column id="Col3" field="Col3" header="Col3" data-type="string"></igx-column>
<igc-hierarchical-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid1') as IgcHierarchicalGrid;
    var Col1 = this.Col1 = document.getElementById('Col1') as IgcColumnComponent;
    var Col2 = this.Col2 = document.getElementById('Col2') as IgcColumnComponent;
    var Col3 = this.Col3 = document.getElementById('Col3') as IgcColumnComponent;
    grid.data = this.data;
    grid.onCellEdit = this.editDone;
    Col1.cellClasses = this.backgroundClasses;
    Col2.cellClasses = this.backgroundClasses;
    Col3.cellClasses = this.backgroundClasses;
}

API References

• IgcColumnComponent
• IgcHierarchicalGridComponent

Additional Resources

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

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components