Estilo condicional da grade de árvore Blazor

O recurso Ignite UI for Blazor Estilo condicional em Blazor Grade de árvore permite o estilo personalizado em um nível de linha ou célula. A IgbTreeGrid funcionalidade Estilo condicional é usada para enfatizar ou realçar visualmente os dados que atendem a determinados critérios, tornando mais fácil para os usuários identificar informações ou tendências importantes na grade.

Tree Grid Conditional Row Styling

O IgbTreeGrid componente no Ignite UI for Blazor fornece duas maneiras de estilizar condicionalmente linhas com base em regras personalizadas.

By setting RowClasses input on the IgbTreeGrid component;
Ao definir RowStyles a IgbTreeGrid entrada no componente;

Mais adiante neste tópico, abordaremos os dois com mais detalhes.

Using Row Classes

Você pode estilizar condicionalmente as IgbTreeGrid linhas definindo a RowClasses entrada e definir regras personalizadas.

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

A RowClasses entrada aceita um literal de objeto, contendo pares chave-valor, em que a chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada que retorna um valor booleano ou booleano.

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

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

Demo

Using Row Styles

O IgbTreeGrid controle expõe a propriedade que permite o RowStyles estilo condicional das linhas de dados. Semelhante a RowClasses ele, aceita um literal de objeto em que as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar um estilo regular (sem quaisquer condições).

The callback signature for both RowStyles and RowClasses is:

(row) => boolean

Vamos definir nossos estilos:

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

Visão geral

O IgbTreeGrid componente em Ignite UI for Blazor fornece duas maneiras de estilizar condicionalmente de células com base em regras personalizadas.

Definindo a IgbColumn entrada CellClasses para um literal de objeto contendo pares de valores-chave. A chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada que retorna um valor booleano ou booleano. O resultado é um estilo de material conveniente da célula.

Using Cell Classes

Você pode estilizar condicionalmente as IgbTreeGrid células definindo o IgbColumn CellClasses insira e defina regras personalizadas.

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

A CellClasses entrada aceita um literal de objeto, contendo pares chave-valor, em que a chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada que retorna um valor booleano ou booleano.

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

Usando a IgbColumn entrada CellStyles que aceita um literal de objeto em que as chaves são propriedades de estilo e os valores são expressões para avaliação.

A assinatura de retorno de chamada para ambos cellStyles e cellClasses agora é alterada para:

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

Using Cell Styles

As colunas expõem a propriedade que permite o CellStyles estilo condicional das células da coluna. Semelhante a CellClasses ele, aceita um literal de objeto em que as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar o estilo regular com facilidade (sem quaisquer condições).

Vamos definir nossos estilos:

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

Se houver células associadas à mesma condição (de colunas diferentes) e uma célula for atualizada, as outras células não serão atualizadas com base no novo valor, se a condição for atendida.

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.