Estilo condicional de cuadrícula Angular
Si necesita proporcionar algún estilo personalizado en el componente IgxGrid, puede hacerlo a nivel de fila o de celda.
Estilo de fila condicional de cuadrícula
El componente IgxGrid de Ignite UI for Angular proporciona dos formas de aplicar estilos condicionales a las filas en función de reglas personalizadas.
Al configurar la entrada rowClasses
en el componente IgxGrid;
Al configurar la entrada rowStyles
en el componente IgxGrid;
Más adelante en este tema los cubriremos con más detalle.
Usando clases de fila
Puede diseñar condicionalmente las filas de IgxGrid configurando la entrada rowClasses
y definiendo reglas personalizadas.
<igx-grid #grid [data ]="data" [height ]="'600px'" [width ]="'100%'" [rowClasses ]="rowClasses" >
...
</igx-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.
public rowClasses = {
activeRow : this .activeRowCondition
};
public activeRowCondition = (row: RowType ) => this .grid?.navigation.activeNode?.row === row.index;
typescript
::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
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxGridComponent, RowType, IgxColumnComponent } from 'igniteui-angular' ;
import { DATA } from '../../data/nwindData' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-grid-row-classes-sample' ,
styleUrls : ['./grid-rowClasses.component.scss' ],
templateUrl : 'grid-rowClasses.component.html' ,
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent]
})
export class GridRowClassesComponent implements OnInit {
@ViewChild ('grid' , { static : true }) public grid: IgxGridComponent;
public data: any [];
public constructor ( ) { }
public activeRowCondition = (row: RowType ) => this .grid?.navigation.activeNode?.row === row.index;
public rowClasses = {
activeRow : this .activeRowCondition
};
public ngOnInit(): void {
this .data = DATA;
}
public handleChange ( ) {
requestAnimationFrame(() => {
this .grid.pipeTrigger++;
this .grid.notifyChanges();
});
}
public handleLeftClick (args ) {
args.event.preventDefault();
this .grid.navigation.setActiveNode({ row : args.cell.row.index, column : args.cell.column.visibleIndex });
}
}
ts コピー <div class ="grid__wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid [data ]="data" [height ]="'600px'" [width ]="'100%'" (contextMenu )="handleLeftClick($event)" (activeNodeChange )="handleChange()" [rowClasses ]="rowClasses" >
<igx-column [field ]="'ProductID'" > </igx-column >
<igx-column [field ]="'ProductName'" > </igx-column >
<igx-column [field ]="'UnitsInStock'" [dataType ]="'number'" > </igx-column >
<igx-column [field ]="'UnitPrice'" [dataType ]="'number'" > </igx-column >
<igx-column [field ]="'Discontinued'" [dataType ]="'boolean'" >
</igx-column >
<igx-column [field ]="'OrderDate'" [dataType ]="'date'" > </igx-column >
</igx-grid >
</div >
html コピー .grid__wrapper {
display : flex;
justify-content : space-between;
margin : 16px ;
flex-flow : column;
align-items : flex-start;
position : relative;
}
::ng-deep {
.activeRow {
border: 2px solid #fc81b8 ;
border-left : 3px solid #e41c77 ;
}
.toggle-section {
width : 300px ;
height : 100px ;
background-color : white;
}
}
.container {
display : flex;
igx-icon {
margin : 20px ;
}
}
scss コピー
¿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:
public rowStyles = {
background : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '#FF000088' : '#00000000' ,
border : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '2px solid' : '1px solid' ,
'border-color' : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '#FF000099' : '#E9E9E9'
};
typescript
<igx-grid #grid1 [data ]="data | async" [height ]="'500px'" width ="100%"
[autoGenerate ]="false" [allowFiltering ]="true" [rowStyles ]="rowStyles" >
...
</igx-grid >
html
Manifestación
import { Component, ViewChild } from '@angular/core' ;
import { IgxGridComponent, RowType, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxBadgeComponent } from 'igniteui-angular' ;
import { Observable } from 'rxjs' ;
import { FinancialDataService } from '../../services/financial.service' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
import { NgIf, AsyncPipe } from '@angular/common' ;
@Component ({
providers : [FinancialDataService],
selector : 'app-grid-row-styles-sample' ,
styleUrls : ['./grid-rowStyles.component.scss' ],
templateUrl : 'grid-rowStyles.component.html' ,
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, NgIf, IgxBadgeComponent, AsyncPipe]
})
export class GridRowStylesComponent {
@ViewChild ('grid1' , { static : true }) public grid1: IgxGridComponent;
public data: Observable<any []>;
public rowStyles = {
background : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '#FF000088' : '#00000000' ,
border : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '2px solid' : '1px solid' ,
'border-color' : (row: RowType ) => (+row.data['Change' ] < 0 && +row.data['Change On Year(%)' ] < 0 ) ? '#FF000099' : '#E9E9E9'
};
constructor (private localService: FinancialDataService ) {
this .localService.getData(1000 );
this .data = this .localService.records;
}
public formatNumber (value: number ) {
return value.toFixed(2 );
}
public formatCurrency (value: number ) {
return '$' + value.toFixed(2 );
}
}
ts コピー <div class ="grid__wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid1 [data ]="data | async" [height ]="'500px'" width ="100%"
[autoGenerate ]="false" [allowFiltering ]="true" [rowStyles ]="rowStyles" >
<igx-column [field ]="'Category'" [width ]="'120px'" > </igx-column >
<igx-column [field ]="'Type'" [width ]="'150px'" [filterable ]="false" > </igx-column >
<igx-column [field ]="'Open Price'" [width ]="'120px'" dataType ="number" [formatter ]="formatCurrency" >
</igx-column >
<igx-column [field ]="'Price'" [width ]="'120px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Change'" [width ]="'120px'" dataType ="number" [headerClasses ]="'headerAlignSyle'" >
<ng-template igxHeader >
<span > Change</span >
</ng-template >
<ng-template igxCell let-val >
<div class ="currency-badge-container" >
<igx-badge *ngIf ="val > 0" type ="success" position ="bottom-right" icon ="arrow_upward"
class ="badge-left" > </igx-badge >
<igx-badge *ngIf ="val < 0" type ="error" position ="bottom-right" icon ="arrow_downward"
class ="error badge-left" > </igx-badge >
<span class ="cellAlignSyle" [class.up ]="val > 0" [class.down ]="val < 0" > {{ formatNumber(val)
}}</span >
</div >
</ng-template >
</igx-column >
<igx-column [field ]="'Change(%)'" [width ]="'130px'" dataType ="number" [formatter ]="formatNumber" >
<ng-template igxHeader >
<span > Change(%)</span >
</ng-template >
</igx-column >
<igx-column [field ]="'Change On Year(%)'" [width ]="'150px'" dataType ="number" [formatter ]="formatNumber" >
<ng-template igxCell let-val >
<div class ="currency-badge-container" >
<igx-badge *ngIf ="val > 0" type ="success" position ="bottom-right" icon ="arrow_upward"
class ="badge-left" > </igx-badge >
<igx-badge *ngIf ="val < 0" type ="error" position ="bottom-right" icon ="arrow_downward"
class ="error badge-left" > </igx-badge >
<span class ="cellAlignSyle" [class.up ]="val > 0" [class.down ]="val < 0" > {{ formatNumber(val)
}}%</span >
</div >
</ng-template >
</igx-column >
<igx-column [field ]="'Buy'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Sell'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Spread'" [width ]="'130px'" dataType ="number" [formatter ]="formatNumber" > </igx-column >
<igx-column [field ]="'Volume'" [width ]="'130px'" dataType ="number" [formatter ]="formatNumber" > </igx-column >
<igx-column [field ]="'High(D)'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Low(D)'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'High(Y)'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Low(Y)'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
<igx-column [field ]="'Start(Y)'" [width ]="'130px'" dataType ="number" [formatter ]="formatCurrency" > </igx-column >
</igx-grid >
<br />
</div >
html コピー .cellAlignSyle {
text-align : right;
float :right ;
}
.cellAlignSyle > span {
float :right ;
}
.up {
color : green;
}
.down {
color : red;
}
.headerAlignSyle {
text-align : right !important ;
}
.grid__wrapper {
margin : 0 auto;
padding : 16px ;
}
.currency-badge-container {
width : 80px ;
float : right;
}
.badge-left {
float : left;
}
scss コピー
Estilo de celda condicional de cuadrícula
Descripción general
El componente IgxGrid 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.
public beatsPerMinuteClasses = {
downFont : this .downFontCondition,
upFont : this .upFontCondition
};
...
private downFontCondition = (rowData: any , columnKey : any ): boolean => {
return rowData[columnKey] <= 95 ;
}
ts
.upFont {
color : red;
}
.downFont {
color : green;
}
scss
Usando clases de celdas
Puede diseñar condicionalmente las celdas IgxGrid configurando la entrada IgxColumnComponent
cellClasses
y definiendo reglas personalizadas.
<igx-column field ="BeatsPerMinute" dataType ="number" [cellClasses ]="beatsPerMinuteClasses" > </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.
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
};
typescript
::ng-deep {
.upFont {
color: green;
}
.downFont {
color : red;
}
}
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
import { Component, OnInit } from '@angular/core' ;
import { athletesData } from '../../data/athletesData' ;
import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
import { DecimalPipe, PercentPipe } from '@angular/common' ;
@Component ({
selector : 'app-grid-conditional-cell-style' ,
styleUrls : ['./grid-conditional-cell-style.component.scss' ],
templateUrl : './grid-conditional-cell-style.component.html' ,
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, PercentPipe]
})
export class GridConditionalCellStyleComponent implements OnInit {
public data: any [];
public ngOnInit ( ) {
this .data = athletesData;
}
private upFontCondition = (rowData: any , columnKey : any ): boolean => rowData[columnKey] > 95 ;
private downFontCondition = (rowData: any , columnKey : any ): boolean => rowData[columnKey] <= 95 ;
private top100Condition = (rowData: any , columnKey : any ): boolean => rowData[columnKey] <= 100 ;
private belowTop100Condition = (rowData: any , columnKey : any ): boolean => rowData[columnKey] > 100 ;
private speedCondition = (rowData: any , columnKey : any ): boolean => rowData[columnKey] < 5 ;
public beatsPerMinuteClasses = {
downFont : this .downFontCondition,
upFont : this .upFontCondition
};
public rankClasses = {
belowTop100 : this .belowTop100Condition,
top100 : this .top100Condition
};
public speedClasses = {
'topSpeed topSpeedFont' : this .speedCondition
};
}
ts コピー <div class ="grid__wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid1 [data ]="data" height ="500px" width ="100%" [autoGenerate ]="false" >
<igx-column header ="Rank" field ="Id" [sortable ]="true" [editable ]="true" [sortable ]="true" [cellClasses ]="rankClasses" > </igx-column >
<igx-column field ="Name" header ="Athlete" [sortable ]="true" > </igx-column >
<igx-column field ="BeatsPerMinute" header ="Beats per minute" dataType ="number" [editable ]="true" [sortable ]="true"
[cellClasses ]="beatsPerMinuteClasses" > </igx-column >
<igx-column field ="TopSpeed" header ="Top Speed" dataType ="number" [editable ]="true" [sortable ]="true"
[cellClasses ]="speedClasses" >
<ng-template igxCell let-val >
<div class ="cell__inner" >
{{ val | number: '1.1-5' }}
</div >
</ng-template >
</igx-column >
<igx-column field ="TrackProgress" header ="Track Progress" [editable ]="true" [sortable ]="true" >
<ng-template igxCell let-val >
<div class ="cellContainer" >
<span class ="cellAlignSyle" >
{{ val / 100 | percent }}
</span >
</div >
</ng-template >
</igx-column >
<igx-column field ="CountryFlag" header ="Country" >
<ng-template igxCell let-cell ="cell" >
<div class ="cell__inner_2" >
<span >
<img [src ]="cell.value" class ="flag" />
</span >
</div >
</ng-template >
</igx-column >
</igx-grid >
</div >
html コピー :host ::ng-deep {
$primary-color-green : green;
$primary-color-red : red;
$primary-color-blue : royalblue;
$margin-right-images : 25px ;
$images-font-size : 2.5em ;
$images-font-weight : bold;
.grid__wrapper {
margin : 0 auto;
padding : 16px ;
}
.cellContainer {
width : 100% ;
float : right;
}
.cellAlignSyle {
width : 100% ;
text-align : right;
float :right ;
}
.upFont {
color : $primary-color-red ;
}
.downFont {
color : $primary-color-green ;
}
.topSpeedFont {
color : $primary-color-blue ;
}
.contentStyle {
font-size : $images-font-size ;
font-weight : $images-font-weight ;
margin-right : $margin-right-images ;
}
.arrow {
@extend .contentStyle;
content : "^" ;
}
.star {
@extend .contentStyle;
content : "*" ;
}
.top100 :before {
@extend .arrow;
color : $primary-color-green ;
margin-top : 10px ;
}
.belowTop100 :before {
@extend .arrow;
color : $primary-color-red ;
transform : rotate(180deg );
-webkit-transform : rotate(180deg );
margin-top : -10px ;
}
.topSpeed :before {
@extend .star;
font-weight : normal;
color : $primary-color-blue ;
margin-top : 10px ;
}
}
scss コピー
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:
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 IgxGrid dinámicamente.
public ngOnInit ( ) {
this .data = athletesData;
this .columns = [
{ field : 'Id' },
{ field : 'Position' },
{ field : 'Name' },
{ field : 'AthleteNumber' },
{ field : 'CountryName' }
];
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
// component.html
<igx-grid
#grid1 [data ]="data"
primaryKey ="ID"
width ="80%"
height ="300px" >
<igx-column *ngFor ="let c of columns"
[field ]="c.field"
[header ]="c.field"
[cellStyles ]="c.cellStyles" >
</igx-column >
</igx-grid >
html
Definir una animación popin
@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
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxGridComponent, IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxColumnComponent } from 'igniteui-angular' ;
import { athletesData } from '../../data/athletesData' ;
import { NgFor, JsonPipe } from '@angular/common' ;
@Component ({
selector : 'app-grid-conditional-cell-style-2' ,
styleUrls : ['./grid-conditional-cell-style-2.component.scss' ],
templateUrl : './grid-conditional-cell-style-2.component.html' ,
imports : [IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxButtonDirective, IgxGridComponent, NgFor, IgxColumnComponent, JsonPipe]
})
export class GridConditionalCellStyle2Component implements OnInit {
@ViewChild ('grid1' , { read : IgxGridComponent, static : true })
public grid1: IgxGridComponent;
public data: any [];
public columns: any [];
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'
};
public ngOnInit ( ) {
this .data = athletesData;
this .columns = [
{ field : 'Id' },
{ field : 'Position' },
{ field : 'Name' },
{ field : 'AthleteNumber' },
{ field : 'CountryName' }
];
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();
}
}
ts コピー <div class ="grid__wrapper" >
<div >
<igx-input-group type ="border" >
<textarea style ="font-family: monospace;" #userCSS igxInput cols ="15" rows ="5" > {{ oddColStyles | json }}</textarea >
<igx-hint > Note: You cannot use the callback functionality here</igx-hint >
</igx-input-group >
<button igxButton ="outlined" (click )="updateCSS(userCSS.value)" > Apply new styles</button >
</div >
<igx-grid
#grid1 [data ]="data"
primaryKey ="ID"
height ="300px" >
<igx-column *ngFor ="let c of columns"
[field ]="c.field"
[header ]="c.field"
[cellStyles ]="c.cellStyles" >
</igx-column >
</igx-grid >
</div >
html コピー .grid__wrapper {
margin : 0 auto;
padding : 16px ;
transition-timing-function : cubic-bezier(0.455 , 0.03 , 0.515 , 0.955 );
igx-grid {
margin-top : 25px ;
}
}
@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 コピー
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-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-grid >
html
Referencias de API
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.