Web Components Estilo condicional de cuadrícula de árbol

La función Ignite UI for Web Components Condicional Styling en Web Components Tree Grid permite personalizar el estilizado a nivel de fila o celda. LaIgcTreeGridComponent funcionalidad de Estilizado Condicional se utiliza para enfatizar visualmente o resaltar datos que cumplen ciertos criterios, facilitando a los usuarios la identificación de información o tendencias importantes dentro de la cuadrícula.

Tree Grid Conditional Row Styling

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

• EstableciendoRowClasses la entrada en elIgcTreeGridComponent componente;
• EstableciendoRowStyles la entrada en elIgcTreeGridComponent componente;

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

Using Row Classes

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

<igc-tree-grid id="grid" height="600px" width="100%">
</igc-tree-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcTreeGrid;
    grid.rowClasses = this.rowClasses;
}

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.

public rowClasses = {
    activeRow: (row: IgcRowType) => row.index === 0
}

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

Demo

Using Row Styles

ElIgcTreeGridComponent 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: IgcRowType) => boolean

Definamos nuestros estilos:

public rowStyles = {
    'background': (row: IgcRowType) => 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: IgcRowType) => row.data.data['Title'] === 'CEO' || row.data.data['Title'].includes('President') ?
        '2px solid' : null,
    'border-color': (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#495057' : null,
    color: (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null
};

<igc-tree-grid id="treeGrid" moving="true" primary-key="ID" foreign-key="ParentID"
        width="100%" height="550px">
</igc-tree-grid>

constructor() {
    var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    treeGrid.rowStyles = this.rowStyles;
}

Demo

Tree Grid Conditional Cell Styling

Descripción general

ElIgcTreeGridComponent componente en Ignite UI for Web Components proporciona dos formas de estilizar condicionalmente las celdas según reglas personalizadas.

• Estableciendo laIgcColumnComponent 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 lasIgcTreeGridComponent celdas fijando elIgcColumnComponent cellClasses Introduzca y defina reglas personalizadas.

<igc-column id="unitPrice" field="UnitPrice" header="Unit Price" data-type="currency"></igc-column>

constructor() {
    var unitPrice = this.UnitPrice = document.getElementById('unitPrice') as IgcColumnComponent;
    unitPrice.cellClasses = this.unitPriceCellClasses;
}

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.

private downPriceCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 5;
}

private upPriceCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] > 5;
}

public unitPriceCellClasses = {
    downPrice: this.downPriceCondition,
    upPrice: this.upPriceCondition
};

.upPrice {
    color: red !important;
}

.downPrice {
    color: green !important;
}

Demo

• Usando laIgcColumnComponent 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: any, columnKey: string, cellValue: any, rowIndex: number) => 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:

public webTreeGridCellStylesHandler = {
    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";
        }
    }
}

<igc-column id="col1">
</igc-column>

constructor() {
    var col1 = document.getElementById('col1') as IgcColumnComponent;
    col1.cellStyles = this.webTreeGridCellStylesHandler;
}

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.

Se debe realizar una verificación para aplicar los cambios al resto de celdas. El siguiente ejemplo muestra cómo hacerlo.

public backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};

public editDone(evt) {
    this.Col1.cellClasses = {...this.backgroundClasses};
}

<igc-tree-grid id="grid1" height="500px" width="100%" >
  <igc-column id="Col1" field="Col1" data-type="number"></igx-column>
  <igc-column id="Col2" field="Col2" data-type="number" editable="true"></igx-column>
  <igc-column id="Col3" field="Col3" header="Col3" data-type="string"></igx-column>
<igc-tree-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid1') as IgcTreeGrid;
    var Col1 = this.Col1 = document.getElementById('Col1') as IgcColumnComponent;
    var Col2 = this.Col2 = document.getElementById('Col2') as IgcColumnComponent;
    var Col3 = this.Col3 = document.getElementById('Col3') as IgcColumnComponent;
    grid.data = this.data;
    grid.onCellEdit = this.editDone;
    Col1.cellClasses = this.backgroundClasses;
    Col2.cellClasses = this.backgroundClasses;
    Col3.cellClasses = this.backgroundClasses;
}

API References

• IgcColumnComponent
• IgcTreeGridComponent

Additional Resources

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

• Ignite UI for Web Components Foros
• Ignite UI for Web Components GitHub