Estilo condicional de cuadrícula Web Components

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

Grid Conditional Row Styling

El componente IgcGridComponent en Ignite UI for Web Components proporciona dos formas de aplicar estilos condicionales a filas según reglas personalizadas.

• By setting rowClasses input on the IgcGridComponent component;
• Configurando la entrada rowStyles en el componente IgcGridComponent;

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

Using Row Classes

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

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

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

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.

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

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

Demo

Using Row Styles

El control IgcGridComponent expone 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).

The callback signature for both rowStyles and rowClasses is:

(row: IgcRowType) => boolean

Definamos nuestros estilos:

public rowStyles = {
    'background': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000088' : '#00000000',
    'border': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '2px solid' : '1px solid',
    'border-color': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000099' : '#E9E9E9'
};

<igc-grid id="grid1" height="500px" width="100%"
        auto-generate="false" allow-filtering="true">
</igc-grid>

constructor() {
    var grid1 = this.grid1 = document.getElementById('grid1') as IgcGridComponent;
    grid1.rowStyles = this.rowStyles;
}

Demo

Grid Conditional Cell Styling

Descripción general

El componente IgcGridComponent en Ignite UI for Web Components proporciona dos formas de aplicar estilos condicionales a las celdas según reglas personalizadas.

• Estableciendo la IgcColumnComponent entrada cellClasses en un literal de objeto que contenga 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 un conveniente estilo de material de la célula.

Using Cell Classes

Puede aplicar estilo condicional a las IgcGridComponent celdas estableciendo el parámetro IgcColumnComponent cellClasses Introduzca y defina reglas personalizadas.

<igc-column id="beatsPerMin" field="BeatsPerMinute" data-type="Number"></igc-column>

constructor() {
    var beatsPerMin = this.beatsPerMin = document.getElementById('beatsPerMin') as IgcColumnComponent;
    beatsPerMin.cellClasses = this.beatsPerMinuteClasses;
}

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.

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

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

public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};

.upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}

Demo

• Mediante el uso de la IgcColumnComponent entrada 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: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

Using Cell Styles

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:

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

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

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

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-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-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid1') as IgcGrid;
    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
• IgcGridComponent

Additional Resources

• 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

• Encabezados de varias columnas
• Tamaño

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

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