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

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

Hierarchical Grid Conditional Row Styling

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

구성 요소에 입력을 IgbHierarchicalGrid 설정 RowClasses 함으로써;
구성 요소에 입력을 IgbHierarchicalGrid 설정 RowStyles 함으로써;

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

Using Row Classes

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

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

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

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

The callback signature for both RowStyles and RowClasses is:

(row) => boolean

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

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);

<IgbHierarchicalGrid AutoGenerate="true" RowStylesScript="WebGridRowStylesHandler"
        Height="580px" Width="100%">
        <IgbRowIsland ChildDataKey="Albums" AutoGenerate="true" RowStylesScript="WebGridChildRowStylesHandler">
        </IgbRowIsland>
</IgbHierarchicalGrid>

Demo

Hierarchical Grid Conditional Cell Styling

개요

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

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

Using Cell Classes

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

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

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

igRegisterScript("GrammyNominationsCellClassesHandler", () => {
    return {
        downFont: (rowData, columnKey) => rowData[columnKey] < 5,
        upFont: (rowData, columnKey) => rowData[columnKey] >= 6
    };
}, 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("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);

<IgbColumn CellStylesScript="CellStylesHandler">
</IgbColumn>

Demo

Known issues and limitations

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

API References

Additional Resources

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