Estilo condicional de cuadrícula jerárquica Angular

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

    Estilo de fila condicional de cuadrícula jerárquica

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

    • Configurando la entrada rowClasses en el componente IgxHierarchicalGrid;
    • Configurando la entrada rowStyles en el componente IgxHierarchicalGrid;

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

    Usando clases de fila

    Puede diseñar condicionalmente las filas IgxHierarchicalGrid configurando la entrada rowClasses y definiendo reglas personalizadas.

    <igx-hierarchical-grid  #hierarchicalGrid class="hgrid" [data]="localData" [height]="'580px'" [width]="'100%'" [rowStyles]="rowStyles">
    ...
</igx-hierarchical-grid>
html

    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.

    // sample.component.ts

public rowClasses = {
  activeRow: this.activeRowCondition
};

public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;
typescript
    // sample.component.scss

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

    Utilice::ng-deep o ViewEncapsulation.None para forzar los estilos personalizados hacia abajo a través del componente actual y sus elementos secundarios.

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    Usando estilos de fila

    Las columnas ahora exponen la propiedad rowStyles que permite aplicar estilos condicionales a las filas de datos. Similar a 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).

    La firma de devolución de llamada tanto para rowStyles como para rowClasses es:

    (row: RowType) => boolean
ts

    Definamos nuestros estilos:

    // component.ts
public rowStyles = {
    background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
    'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
};

public childRowStyles = {
    'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
typescript
    <igx-hierarchical-grid  #hierarchicalGrid [data]="localdata" [autoGenerate]="false"
        [height]="'580px'" [width]="'100%'" [rowStyles]="rowStyles">
        <igx-row-island [key]="'Albums'" [autoGenerate]="false" [rowStyles]="childRowStyles">
             ...
        </igx-row-island>  
    ...
</igx-hierarchical-grid>
html

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Estilo de celda condicional de cuadrícula jerárquica

    Descripción general

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

    • Configurando las cellClasses de entrada IgxColumnComponent 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.
    // component.ts file
public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};
...

private downFontCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 95;
}
ts
    // component.scss file
.upFont {
  color: red;
}

.downFont {
  color: green;
}
scss

    Usando clases de celdas

    Puede diseñar condicionalmente las celdas IgxHierarchicalGrid configurando la entrada IgxColumnComponent ​ ​cellClasses y definiendo reglas personalizadas.

    <!-- sample.component.html -->
<igx-column field="GrammyNominations" header="Grammy Nominations" dataType="number" [cellClasses]="grammyClasses"></igx-column>
html

    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.

    // sample.component.ts

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

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

public grammyClasses = {
    downGrammy: this.downPriceCondition,
    upGrammy: this.upPriceCondition
};
typescript
    // sample.component.scss

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

    .downGrammy {
        color: green;
    }
}
scss

    Utilice::ng-deep o ViewEncapsulation.None para forzar los estilos personalizados hacia abajo a través del componente actual y sus elementos secundarios.

    Manifestación

    • Utilizando la entrada cellStyles​ ​IgxColumnComponent, que acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para 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'
};
ts

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

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

    Usando estilos de celda

    Las columnas ahora 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).

    En el ejemplo anterior hemos creado:

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

    La firma de devolución de llamada para ambos cellStyles es:

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

    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'
};
typescript

    En ngOnInit agregaremos la configuración cellStyles para cada columna de la colección columns predefinidas, que se utiliza para crear las columnas IgxHierarchicalGrid dinámicamente.

    // component.ts
public ngOnInit() {
    this.data = SINGERS;
    this.columns = [
        { field: 'Artist' },
        { field: 'HasGrammyAward' },
        { field: 'Debut' },
        { field: 'GrammyNominations' },
        { field: 'GrammyAwards' }
    ];

    this.applyCSS();
}
ts
    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();
}
ts
    <igx-hierarchical-grid #hierarchicalGrid [data]="localdata"    
    [autoGenerate]="false"
    [height]="'580px'">
    <igx-column *ngFor="let c of columns"
        [field]="c.field"
        [header]="c.header"
        [cellStyles]="c.cellStyles">
    </igx-column>
</igx-hierarchical-grid>
html

    Definir una animación popin​

    // 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;
    }
}
scss

    Manifestación

    Problemas y limitaciones conocidos

    • Si hay celdas enlazadas a la misma condición (de diferentes columnas) y una celda se actualiza, las demás celdas no se actualizarán en función del nuevo valor, si se cumple la condición. Se debe realizar una verificación de tubería para aplicar los cambios al resto de las celdas. En el ejemplo siguiente se muestra cómo hacerlo con un spread operator(...) evento on onCellEdit. Esto copiará el objeto original con una nueva instancia y hará que se dispare la tubería pura.
    public backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};
...

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

ts
    <igx-hierarchical-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-hierarchical-grid>
html
    App Builder | CTA Banner

    Referencias de API

    Recursos adicionales

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