Blazor 계층적 그리드 조건부 스타일링

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

    Hierarchical Grid Conditional Row Styling

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

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

    Using Row Classes

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

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

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

    igRegisterScript("RowClassesHandler", () => {
    return {
        activeRow: (row) => row.index === 0
    };
}, true);
razor
    .activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
}
css

    Demo

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    Using Row Styles

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

    The callback signature for both RowStyles and RowClasses is:

    (row) => boolean
razor

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

    igRegisterScript("WebGridRowStylesHandler", () => {
    return {
        background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
        'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
    };
}, true);

igRegisterScript("WebGridChildRowStylesHandler", () => {
    return {
        'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
    };
}, true);
razor
    <IgbHierarchicalGrid AutoGenerate="true" RowStylesScript="WebGridRowStylesHandler"
        Height="580px" Width="100%">
        <IgbRowIsland ChildDataKey="Albums" AutoGenerate="true" RowStylesScript="WebGridChildRowStylesHandler">
        </IgbRowIsland>
</IgbHierarchicalGrid>
razor

    Demo

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    Hierarchical Grid Conditional Cell Styling

    개요

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

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

    Using Cell Classes

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

    <IgbColumn Field="BeatsPerMinute" CellClassesScript="GrammyNominationsCellClassesHandler">
razor

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

    igRegisterScript("GrammyNominationsCellClassesHandler", () => {
    return {
        downFont: (rowData, columnKey) => rowData[columnKey] < 5,
        upFont: (rowData, columnKey) => rowData[columnKey] >= 6
    };
}, true);
razor
    .upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}
css

    Demo

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

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

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

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

    Using Cell Styles

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

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

    igRegisterScript("CellStylesHandler", () => {
    return {
        background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
        color: (rowData, columnKey, cellValue, rowIndex) => {
            if (columnKey === "Debut") {
                return cellValue > 2000 ? "#28a745" : "#dc3545";
            }
            return undefined;
        }
    };
}, true);
razor
    <IgbColumn CellStylesScript="CellStylesHandler">
</IgbColumn>
razor

    Demo

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    Known issues and limitations

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

    API References

    Additional Resources

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