Blazor 트리 그리드 조건부 스타일링

    The Ignite UI for Blazor Conditional Styling feature in Blazor Tree Grid allows custom styling on a row or cell level. The IgbTreeGrid 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.

    Tree Grid Conditional Row Styling

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

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

    Using Row Classes

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

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

    입력은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

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

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

    (row) => boolean

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

    igRegisterScript("WebTreeGridRowStylesHandler", () => {
    return {
        'background': (row) => 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) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? '2px solid' : null,
        'border-color': (row) => row.data['Title'] === 'CEO' ? '#495057' : null,
        'color': (row) => row.data['Title'] === 'CEO' ? '#fff' : null
    };
}, true);

    <IgbTreeGrid AutoGenerate="true" PrimaryKey="ID" ForeignKey="ParentID" Data="Data" RowStylesScript="WebTreeGridRowStylesHandler">
</IgbTreeGrid>

    Demo

    Tree Grid Conditional Cell Styling

    개요

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

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

    Using Cell Classes

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

    <IgbColumn Field="UnitPrice" Header="Unit Price" DataType="GridColumnDataType.Currency" CellClassesScript="UnitPriceCellClassesHandler">
</IgbColumn>

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

    igRegisterScript("UnitPriceCellClassesHandler", () => {
    return {
        downPrice: (rowData, columnKey) => rowData[columnKey] <= 5,
        upPrice: (rowData, columnKey) => rowData[columnKey] > 5,
    };
}, true);

    .upPrice {
    color: red !important;
}

.downPrice {
    color: green !important;
}

    Demo

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

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

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

    Using Cell Styles

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

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

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

    <IgbColumn CellStylesScript="WebTreeGridCellStylesHandler">
</IgbColumn>

    Demo

    Known issues and limitations

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

    API References

    Additional Resources

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