Estilo condicional de cuadrícula de árbol Angular

Si necesita proporcionar algún estilo personalizado en el componente IgxTreeGrid, puede hacerlo a nivel de fila o de celda.

Tree Grid Conditional Row Styling

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

• By setting rowClasses input on the IgxTreeGrid component;
• By setting rowStyles input on the IgxTreeGrid component;

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

Using rowClasses

You can conditionally style the IgxTreeGrid rows by setting the rowClasses input and define custom rules.

<!-- sample.component.html -->
<igx-tree-grid #treeGrid [data]="data" [height]="'600px'" [width]="'100%'" [rowClasses]="rowClasses">
    ...
</igx-tree-grid>

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.

// sample.component.ts

public rowClasses = {
  activeRow: this.activeRowCondition
};

public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;

// sample.component.scss

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

Note

Usa::ng-deep oViewEncapsulation.None forzar los estilos personalizados hacia abajo a través del componente actual y sus hijos.

Demo

Using rowStyles

Las columnas ahora exponen 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: RowType) => boolean

Definamos nuestros estilos:

// component.ts
public background = (row: RowType) => 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;

public rowStyles = {
    background: this.background,
    'border-left': (row: RowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ?
        '2px solid' : null,
    'border-color': (row: RowType) => row.data['Title'] === 'CEO' ? '#495057' : null,
    color: (row: RowType) => row.data['Title'] === 'CEO' ? '#fff' : null
};

<!-- sample.component.html -->
<igx-tree-grid #treeGrid [data]="data" [moving]="true" primaryKey="ID" foreignKey="ParentID"
        width="100%" height="550px" [rowStyles]="rowStyles">
    ...
</igx-tree-grid>

Demo

Tree Grid Conditional Cell Styling

Descripción general

El componente IgxTreeGrid de Ignite UI for Angular proporciona dos formas de aplicar estilos condicionales a las celdas en función de reglas personalizadas.

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

// component.ts file
public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};
...

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

// component.scss file
.upFont {
  color: red;
}

.downFont {
  color: green;
}

Using cellClasses

You can conditionally style the IgxTreeGrid cells by setting the IgxColumnComponent cellClasses input and define custom rules.

<!-- sample.component.html -->
<igx-column field="UnitPrice" header="Unit Price" [dataType]="'currency'" [pipeArgs]="formatOptions" [cellClasses]="priceClasses"></igx-column>

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.

// sample.component.ts

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

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

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

// sample.component.scss

::ng-deep {
    .upPrice {
        color: red;
    }

    .downPrice {
        color: green;
    }
}

Note

Usa::ng-deep oViewEncapsulation.None forzar los estilos personalizados hacia abajo a través del componente actual y sus hijos.

Demo

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

public styles = {
    'background': 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)',
    'text-shadow': '1px 1px 2px rgba(25,25,25,.25)',
    'animation': '0.25s ease-in-out forwards alternate popin'
};

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

(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

Using cellStyles

Las columnas ahora exponen lacellStyles propiedad que permite el 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).

En el ejemplo anterior hemos creado:

• Dos estilos diferentes que se aplicarán según el índice de la columna.
• También cambiarás lastext color filas pares o impares.

La firma de callback para amboscellStyles es:

(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

Definamos nuestros estilos:

// component.ts
public oddColStyles = {
    background: 'linear-gradient(to right, #b993d6, #8ca6db)',
    color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray',
    animation: '0.75s popin'
};

public evenColStyles = {
    background: 'linear-gradient(to right, #8ca6db, #b993d6)',
    color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white',
    animation: '0.75s popin'
};

On ngOnInit we will add the cellStyles configuration for each column of the predefined columns collection, which is used to create the IgxTreeGrid columns dynamically.

// component.ts
public ngOnInit() {
    this.data = ORDERS_DATA;
     this.columns = [
        { field: 'ID' },
        { field: 'Name' },
        { field: 'UnitPrice' },
        { field: 'OrderDate' }
    ];

    this.applyCSS();
}

public applyCSS() {
    this.columns.forEach((column, index) => {
        column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles);
    });
}

public updateCSS(css: string) {
    this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)};
    this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)};
    this.applyCSS();
}

//component.html
<igx-tree-grid
    #grid1 [data]="data"
    primaryKey="ID" foreignKey="ParentID"
    height="350px">
    <igx-column *ngFor="let c of columns"
        [field]="c.field"
        [header]="c.header"
        [cellStyles]="c.cellStyles">
    </igx-column>
</igx-tree-grid>

Define unapopin animación

// component.scss
@keyframes popin {
    0% {
        opacity: 0.1;
        transform: scale(.75, .75);
        filter: blur(3px) invert(1);
    }

    50% {
        opacity: .5;
        filter: blur(1px);
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
        filter: none;
    }
}

Demo

Known issues and limitations

• Si hay celdas vinculadas a la misma condición (de columnas diferentes) y una celda se actualiza, las otras celdas no se actualizarán basándose en el nuevo valor, si se cumple la condición. Debe realizarse una comprobación de tuberías para aplicar los cambios al resto de las celdas. El ejemplo de abajo muestra cómo hacerlo con unspread operator(...) evento encendidoonCellEdit. Esto copiará el objeto original con una nueva instancia y se disparará la tubería de plomo puro.

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

editDone(evt) {
    this.backgroundClasses = {...this.backgroundClasses};
}

<igx-tree-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
  <igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
  <igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
  <igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>
</igx-tree-grid>

API References

• ComponenteColumnaIgx
• Componente IgxTreeGrid
• IgxTreeGridComponent Styles

Additional Resources

• Descripción general de la cuadrícula de árbol
• Virtualización y rendimiento
• Edición
• Paginación
• Filtración
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Ocultación de columnas
• Selección
• buscando
• Barra de herramientas
• Encabezados de varias columnas
• Tamaño

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub