Estilo condicional de cuadrícula de árbol Blazor

    La función de estilo condicional Ignite UI for Blazor en Blazor Tree Grid permite aplicar estilos personalizados a nivel de fila o celda. La función de estilo condicional IgbTreeGrid 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.

    Estilo de fila condicional de cuadrícula de árbol

    El componente IgbTreeGrid 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.

    Usando clases de filas

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

    <IgbTreeGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowClassesScript="RowClassesHandler" @ref="grid">
    </IgbTreeGrid>
    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 IgbTreeGrid control expone la propiedad que permite el RowStyles estilo condicional de las filas de datos. De RowClasses manera similar, 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("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);
    razor
    <IgbTreeGrid AutoGenerate="true" PrimaryKey="ID" ForeignKey="ParentID" Data="Data" RowStylesScript="WebTreeGridRowStylesHandler">
    </IgbTreeGrid>
    razor

    Manifestación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Estilo de celda condicional de cuadrícula de árbol

    Descripción general

    El componente IgbTreeGrid 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.

    Usando clases de células

    Puede aplicar estilo condicional a las IgbTreeGrid celdas estableciendo el parámetro IgbColumn ​ ​CellClasses Introduzca y defina reglas personalizadas.

    <IgbColumn Field="UnitPrice" Header="Unit Price" DataType="GridColumnDataType.Currency" CellClassesScript="UnitPriceCellClassesHandler">
    </IgbColumn>
    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("UnitPriceCellClassesHandler", () => {
        return {
            downPrice: (rowData, columnKey) => rowData[columnKey] <= 5,
            upPrice: (rowData, columnKey) => rowData[columnKey] > 5,
        };
    }, true);
    razor
    .upPrice {
        color: red !important;
    }
    
    .downPrice {
        color: green !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("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);
    razor
    <IgbColumn CellStylesScript="WebTreeGridCellStylesHandler">
    </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.