Blazor 그리드 조건부 스타일링

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

    Grid Conditional Row Styling

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

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

    Using Row Classes

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

    <IgbGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowClassesScript="RowClassesHandler" @ref="grid">
</IgbGrid>

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

    igRegisterScript("RowClassesHandler", () => {
    return {
        activeRow: (row) => row.index === 0
    };
}, true);

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

    Demo

    Using Row Styles

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

    The callback signature for both RowStyles and RowClasses is:

    (row) => boolean

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

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

    <IgbGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowStylesScript="WebGridRowStylesHandler" @ref="grid">
</IgbGrid>

    Demo

    Grid Conditional Cell Styling

    개요

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

    • ​IgbColumn 입력 CellClasses 키-값 쌍을 포함하는 객체 리터럴로 설정합니다. 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다. 그 결과 셀의 편리한 소재 스타일링이 이루어졌습니다.

    Using Cell Classes

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

    <IgbColumn Field="BeatsPerMinute" CellClassesScript="CellClassesHandler">

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

    igRegisterScript("CellClassesHandler", () => {
    return {
        downFont: (rowData, columnKey, cellValue, rowIndex) => rowData[columnKey] <= 95,
        upFont: (rowData, columnKey, cellValue, rowIndex) => rowData[columnKey] > 95
    };
}, true);

    .upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}

    Demo

    • 키가 스타일 속성이고 값이 평가용 표현식인 개체 리터럴을 허용하는 IgbColumn 입력 CellStyles 사용합니다.

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

    (rowData, columnKey, cellValue, rowIndex) => boolean

    Using Cell Styles

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

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

    igRegisterScript("WebGridCellStylesHandler", () => {
    return {
        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"
                }
            }
        }
    };
}, true);

    <IgbColumn CellStylesScript="WebGridCellStylesHandler">
</IgbColumn>

    Demo

    Known issues and limitations

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

    API References

    Additional Resources

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