Estilo condicional de cuadrícula jerárquica Blazor

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

Hierarchical Grid Conditional Row Styling

ElIgbHierarchicalGrid componente en Ignite UI for Blazor ofrece dos formas de condicionar el estilizado de las filas según reglas personalizadas.

EstableciendoRowClasses la entrada en elIgbHierarchicalGrid componente;
EstableciendoRowStyles la entrada en elIgbHierarchicalGrid componente;

Más adelante en este tema los cubriremos ambos con más detalle.

Using Row Classes

Puedes estilizar condicionalmente lasIgbHierarchicalGrid filas estableciendo laRowClasses entrada y definiendo reglas personalizadas.

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

LaRowClasses entrada acepta un literal objeto que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de callback que devuelve un valor booleano o booleano.

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

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

Demo

Using Row Styles

ElIgbHierarchicalGrid control expone laRowStyles propiedad que permite el estilizado condicional de las filas de datos. De forma similar aRowClasses acepta un literal objeto donde las claves son propiedades de estilo y los valores son expresiones para su evaluación. Además, puedes aplicar peinado normal (sin condiciones).

La firma de callback para ambosRowStyles yRowClasses es:

(row) => boolean

Definamos nuestros estilos:

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

Descripción general

ElIgbHierarchicalGrid componente en Ignite UI for Blazor proporciona dos formas de estilizar condicionalmente las celdas según reglas personalizadas.

Estableciendo laIgbColumn entradaCellClasses a un literal de objeto que contiene pares clave-valor. La clave es el nombre de la clase CSS, mientras que el valor es una función de callback que devuelve un valor booleano o booleano. El resultado es un diseño material conveniente de la célula.

Using Cell Classes

Puedes estilizar condicionalmente lasIgbHierarchicalGrid celdas fijando elIgbColumn CellClasses Introduzca y defina reglas personalizadas.

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

LaCellClasses entrada acepta un literal objeto que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de callback que devuelve un valor booleano o booleano.

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

Usando laIgbColumn entradaCellStyles que acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para su evaluación.

La firma de callback para amboscellStyles ycellClasses ahora se ha cambiado a:

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

Using Cell Styles

Las columnas exponen laCellStyles propiedad que permite un estilizado condicional de las celdas de columna. De forma similar aCellClasses acepta un literal objeto donde las claves son propiedades de estilo y los valores son expresiones para su evaluación. Además, puedes aplicar peinados normales con facilidad (sin ninguna condición).

Definamos nuestros estilos:

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

Si hay celdas vinculadas a la misma condición (de diferentes columnas) y una celda se actualiza, las otras celdas no se actualizarán según el nuevo valor, si se cumple la condición.

API References

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.