Estilo condicional de cuadrícula jerárquica Blazor

    La función de estilo condicional Ignite UI for Blazor en Blazor Hierarchical Grid permite aplicar estilos personalizados a nivel de fila o celda. La función de estilo condicional IgbHierarchicalGrid se utiliza para enfatizar o resaltar visualmente los datos que cumplen con ciertos criterios, lo que facilita a los usuarios identificar información o tendencias importantes dentro de la cuadrícula.

    Hierarchical Grid Conditional Row Styling

    El componente IgbHierarchicalGrid en Ignite UI for Blazor proporciona dos formas de aplicar estilos condicionales a las filas según reglas personalizadas.

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

    Using Row Classes

    Puede aplicar estilo condicional a las IgbHierarchicalGrid filas estableciendo la RowClasses entrada y definiendo reglas personalizadas.

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

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

    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

    El IgbHierarchicalGrid control expone la propiedad que permite el RowStyles estilo condicional de las filas de datos. Similar a RowClasses él, acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación. Además, puedes aplicar un peinado regular (sin ninguna condición).

    The callback signature for both RowStyles and RowClasses is:

    (row) => boolean
razor

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

    Descripción general

    El componente IgbHierarchicalGrid en Ignite UI for Blazor proporciona dos formas de aplicar estilos condicionales a las celdas según reglas personalizadas.

    • Configurando la entrada CellClasses​ ​IgbColumn en un objeto literal que contiene pares clave-valor. La clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano. El resultado es una cómoda colocación del material en la celda.

    Using Cell Classes

    Puede aplicar estilo condicional a las IgbHierarchicalGrid celdas configurando el parámetro IgbColumn CellClasses Introduzca y defina reglas personalizadas.

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

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

    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

    • Utilizando la entrada IgbColumn​ ​CellStyles que acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación.

    La firma de devolución de llamada para cellStyles y cellClasses ahora se cambia a:

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

    Using Cell Styles

    Las columnas exponen la propiedad CellStyles que permite aplicar estilos condicionales a las celdas de las columnas. Al igual que CellClasses acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación. Además, puedes aplicar el peinado habitual con facilidad (sin condiciones).

    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);
razor
    <IgbColumn CellStylesScript="CellStylesHandler">
</IgbColumn>
razor

    Demo

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    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.