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

계층 그리드의 Ignite UI for Blazor 조건부 스타일링 기능은 행 또는 셀 단위 Blazor 맞춤 스타일링을 가능하게 합니다.IgbHierarchicalGrid 조건부 스타일링 기능은 특정 기준에 부합하는 데이터를 시각적으로 강조하거나 강조하여 사용자가 그리드 내에서 중요한 정보나 추세를 쉽게 식별할 수 있도록 합니다.

Hierarchical Grid Conditional Row Styling

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

컴포넌트RowClasses에 입력을 설정IgbHierarchicalGrid 하면;
컴포넌트RowStyles에 입력을 설정IgbHierarchicalGrid 하면;

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

Using Row Classes

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

<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 객체 리터럴을 받아들이는데, 키는 스타일 속성이고 값은 평가용입니다. 또한, 아무 조건 없이 일반 스타일링도 가능합니다.

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

(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

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

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

(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

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