Web Components 트리 그리드 조건부 스타일 지정

Web Components 트리 그리드의 Ignite UI for Web Components 조건부 스타일링 기능은 행 또는 셀 단위에서 맞춤 스타일링을 가능하게 합니다.IgcTreeGridComponent 조건부 스타일링 기능은 특정 기준에 부합하는 데이터를 시각적으로 강조하거나 강조하여 사용자가 그리드 내에서 중요한 정보나 추세를 쉽게 식별할 수 있도록 합니다.

Tree Grid Conditional Row Styling

Ignite UI for Web Components의 컴포넌트는IgcTreeGridComponent 사용자 정의 규칙에 기반한 두 가지 조건 부 스타일링 방식을 제공합니다.

• 배경별로RowClasses 입력IgcTreeGridComponent 구성 요소;
• 배경별로RowStyles 입력IgcTreeGridComponent 구성 요소;

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

Using Row Classes

조건부 스타일을 지정할 수 있습니다.IgcTreeGridComponent 행은 다음과 같이 설정하여RowClasses 사용자 정의 규칙을 입력하고 정의하세요.

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

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcTreeGrid;
    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

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

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

(row: IgcRowType) => boolean

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

public rowStyles = {
    'background': (row: IgcRowType) => row.data['Title'] === 'CEO' ? '#6c757d' :
        row.data['Title'].includes('President') ? '#adb5bd' :
        row.data['Title'].includes('Director') ? '#ced4da' :
        row.data['Title'].includes('Manager') ? '#dee2e6' :
        row.data['Title'].includes('Lead') ? '#e9ecef' :
        row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
    'border-left': (row: IgcRowType) => row.data.data['Title'] === 'CEO' || row.data.data['Title'].includes('President') ?
        '2px solid' : null,
    'border-color': (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#495057' : null,
    color: (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null
};

<igc-tree-grid id="treeGrid" moving="true" primary-key="ID" foreign-key="ParentID"
        width="100%" height="550px">
</igc-tree-grid>

constructor() {
    var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    treeGrid.rowStyles = this.rowStyles;
}

Demo

Tree Grid Conditional Cell Styling

개요

Ignite UI for Web Components의 컴포넌트는IgcTreeGridComponent 사용자 정의 규칙에 기반한 셀의 조건부 스타일링을 두 가지 방법을 제공합니다.

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

Using Cell Classes

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

<igc-column id="unitPrice" field="UnitPrice" header="Unit Price" data-type="currency"></igc-column>

constructor() {
    var unitPrice = this.UnitPrice = document.getElementById('unitPrice') as IgcColumnComponent;
    unitPrice.cellClasses = this.unitPriceCellClasses;
}

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

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

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

public unitPriceCellClasses = {
    downPrice: this.downPriceCondition,
    upPrice: this.upPriceCondition
};

.upPrice {
    color: red !important;
}

.downPrice {
    color: green !important;
}

Demo

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

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

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

Using Cell Styles

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

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

public webTreeGridCellStylesHandler = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "UnitPrice") {
            if (cellValue > 10) return "#dc3545";
            if (cellValue < 5) return "#28a745";
            if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
        }
    }
}

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

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

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-tree-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-tree-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid1') as IgcTreeGrid;
    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
• IgcTreeGridComponent

Additional Resources

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

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