Je veux appliquer une couleur rouge à la ligne dont la valeur de colonne completedIn hours est supérieure à 24. Comment puis-je le faire. s'il vous plaît, aidez-moi je suis nouveau dans angular.
<kendo-grid [kendoGridBinding]="gridData">
<kendo-grid-column field="RequestNumber" title="Request No."
width="110" >
</kendo-grid-column>
<kendo-grid-column field="RequestNumber" title="Request No." width="110" >
</kendo-grid-column>
<kendo-grid-column field="Name" title="Name." width="110" >
</kendo-grid-column>
<kendo-grid-column field="CompletedIn" title="CompletedIn" width="110" >
</kendo-grid-column>
</kendo-grid>
3 Réponses :
Cela marquera les lignes avec une couleur d'arrière-plan rouge si la condition ci-dessus est remplie
<tr *ngFor="let myObject of myArray;" [ngStyle]="{'background-color':myObj.completedIn>24 ? 'red' : '' }">
<!-- your other code -->
</tr>
merci pour la réponse.En fait, j'utilise la grille de kendo, donc je n'ai pas la balise
Utilisez le rappel rowClass pour fournir une classe personnalisée à toutes les lignes dont les éléments de données répondent à certains critères personnalisés, puis stylisez-les via CSS, par exemple:
Premièrement: vous devez ajouter [rowClass] à votre grille
@Component({
selector: "your-component",
templateUrl: "./your.component.html",
encapsulation: ViewEncapsulation.None,
styles: [
`
.k-grid tr.passive {
background-color: lightgray;
}
`
]
})
ensuite vous devez ajouter la fonction à l'intérieur du composant et renvoyer la classe nécessaire p>
public rowCallback(context: RowClassArgs) {
if (context.dataItem.someProperty) { // change this condition as you need
return {
passive: true
};
}
}
et enfin vous devez avoir une classe CSS avec le nom que vous avez renvoyé, (dans ce cas passive mais bien sûr vous pouvez la changer comme vous le souhaitez )
<kend-grid [rowClass]="rowCallback"> </kendo-grid>
il est très important d'utiliser encapsulation: ViewEncapsulation.None et de nommer la classe avec le préfixe .k-grid tr sinon vous n'obtiendrez pas le résultat souhaité
s'il vous plaît aidez-moi les gars
PLUS DE DÉMOS Formatage de la ligne de la grille dans l'interface utilisateur de Kendo pour la grille angulaire 2
Démo: stackoverflow.com/questions/42842858/...