Estilo condicional de cuadrícula Blazor

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

    Estilo de fila condicional de cuadrícula

    El IgbGrid componente de Ignite UI for Blazor proporciona dos formas de aplicar estilos condicionales a las filas en función de reglas personalizadas.

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

    Usando clases de filas

    Puede diseñar condicionalmente las filas IgbGrid configurando la entrada RowClasses y definiendo reglas personalizadas.

    <IgbGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowClassesScript="RowClassesHandler" @ref="grid">
    </IgbGrid>
    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

    Manifestación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Usar estilos de fila

    El control IgbGrid expone la propiedad RowStyles que permite aplicar estilos condicionales a las filas de datos. Al igual que RowClasses 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 condiciones).

    The callback signature for both RowStyles and RowClasses is:

    (row) => boolean
    razor

    Definamos nuestros estilos:

    igRegisterScript("WebGridRowStylesHandler", () => {
        return {
            'background': (row) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000088' : '#00000000',
            'border': (row) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '2px solid' : '1px solid',
            'border-color': (row) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000099' : '#E9E9E9'
        };
    }, true);
    razor
    <IgbGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowStylesScript="WebGridRowStylesHandler" @ref="grid">
    </IgbGrid>
    razor

    Manifestación

    EXAMPLE

    Estilo de celda condicional de cuadrícula

    Descripción general

    El IgbGrid componente de Ignite UI for Blazor proporciona dos formas de aplicar estilos condicionales a las celdas en función de 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.

    Usando clases de células

    Puede diseñar condicionalmente las celdas IgbGrid configurando la entrada IgbColumn ​ ​CellClasses y definiendo reglas personalizadas.

    <IgbColumn Field="BeatsPerMinute" CellClassesScript="CellClassesHandler">
    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("CellClassesHandler", () => {
        return {
            downFont: (rowData, columnKey, cellValue, rowIndex) => rowData[columnKey] <= 95,
            upFont: (rowData, columnKey, cellValue, rowIndex) => rowData[columnKey] > 95
        };
    }, true);
    razor
    .upFont {
        color: green !important;
    }
    
    .downFont {
        color: red !important;
    }
    css

    Manifestación

    EXAMPLE
    DATA
    MODULES
    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

    Usar estilos de celda

    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("WebGridCellStylesHandler", () => {
        return {
            background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
            color: (rowData, columnKey, cellValue, rowIndex) => {
                if (columnKey === "Position") {
                    switch (cellValue) {
                        case "up": return "#28a745";
                        case "down": return "#dc3545";
                        case "current": return "#17a2b8"
                    }
                }
            }
        };
    }, true);
    razor
    <IgbColumn CellStylesScript="WebGridCellStylesHandler">
    </IgbColumn>
    razor

    Manifestación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Problemas y limitaciones conocidos

    • 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.

    Referencias de API

    Recursos adicionales

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