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

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

Tree Grid Conditional Row Styling

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

• By setting rowClasses input on the IgcTreeGridComponent component;
• 구성 요소에 입력을 IgcTreeGridComponent 설정 rowStyles 함으로써;

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

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 유사하게, 키는 스타일 속성이고 값은 평가를 위한 표현식인 개체 리터럴을 허용합니다. 또한 조건 없이 일반 스타일을 적용할 수 있습니다.

The callback signature for both rowStyles and rowClasses is:

(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

개요

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

• 입력 cellClasses을 IgcColumnComponent 키-값 쌍을 포함하는 객체 리터럴로 설정합니다. key는 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

• 개체 리터럴을 허용하는 입력 cellStyles을 IgcColumnComponent 사용하여 키는 스타일 속성이고 값은 평가를 위한 식입니다.

이제 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