Web Components 그리드 조건부 스타일링

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

    Grid Conditional Row Styling

    이 IgcGridComponent Ignite UI for Web Components의 구성 요소는 다음 두 가지 방법을 제공합니다. 행의 조건부 스타일 지정 사용자 지정 규칙을 기반으로 합니다.

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

    Using Row Classes

    ​rowClasses 입력을 설정하고 사용자 정의 규칙을 정의하여 IgcGridComponent 행의 스타일을 조건부로 지정할 수 있습니다.

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

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

    ​IgcGridComponent 컨트롤은 데이터 행의 조건부 스타일 지정을 허용하는 rowStyles 속성을 노출합니다. rowClasses와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 조건 없이 일반 스타일을 적용할 수도 있습니다.

    The callback signature for both rowStyles and rowClasses is:

    (row: IgcRowType) => boolean

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

    public rowStyles = {
    'background': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000088' : '#00000000',
    'border': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '2px solid' : '1px solid',
    'border-color': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000099' : '#E9E9E9'
};

    <igc-grid id="grid1" height="500px" width="100%"
        auto-generate="false" allow-filtering="true">
</igc-grid>

    constructor() {
    var grid1 = this.grid1 = document.getElementById('grid1') as IgcGridComponent;
    grid1.rowStyles = this.rowStyles;
}

    Demo

    Grid Conditional Cell Styling

    개요

    이 IgcGridComponent Ignite UI for Web Components의 구성 요소는 다음 두 가지 방법을 제공합니다. 셀의 조건부 스타일 지정 사용자 지정 규칙을 기반으로 합니다.

    • 입력 cellClasses을 IgcColumnComponent 키-값 쌍을 포함하는 객체 리터럴로 설정합니다. key는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다. 그 결과 셀의 편리한 재료 스타일링이 가능합니다.

    Using Cell Classes

    를 설정하여 조건부로 셀의 IgcGridComponent 스타일을 지정할 수 있습니다. IgcColumnComponent cellClasses 사용자 지정 규칙을 입력하고 정의합니다.

    <igc-column id="beatsPerMin" field="BeatsPerMinute" data-type="Number"></igc-column>

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

    ​cellClasses 입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.

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

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

public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};

    .upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}

    Demo

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

    이제 cellStyles 및 cellClasses에 대한 콜백 서명이 다음으로 변경되었습니다.

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

    Using Cell Styles

    열은 열 셀의 조건부 스타일 지정을 허용하는 cellStyles 속성을 노출합니다. cellClasses와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 아무런 조건 없이 일반 스타일링을 쉽게 적용할 수 있습니다.

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

    public webGridCellStylesHandler = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "Position") {
            switch (cellValue) {
                case "up": return "#28a745";
                case "down": return "#dc3545";
                case "current": return "#17a2b8"
            }
        }
    }
}

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

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

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

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

    Additional Resources

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