[dataTable] rowStyleClass ne fonctionne pas

Version imprimable

Bonjour,

J'ai un formulaire de modification d'un objet. Dans le formulaire j'ai différents inputText et autres composants.
En plus, j'ai une dataTable editable qui contient des sous-objets, dans laquelle j'ai une colonne qui permet de supprimer un sous-objet.
La suppression effective se faisant lors de la confirmation de modification, j'aimerais mettre en couleur les lignes qui sont à supprimer.

Pour cela, j'ai une colonne qui permet de supprimer une ligne (met la propriété "isDeleted) à true dans le sous-objet et une rowStyleClass qui teste cette valeur :
Code:

1 2 3 4 5 6 7 8 9 <p:dataTable id="periodes" value="#{saisirEmployeForm.listPeriodes}" var="periode" widgetVar="periodeTable" editable="true" editMode="cell" emptyMessage="#{msg['AucunePeriodeAAfficher']}" rowKey="#{periode.id}" rowStyleClass="#{!periode.deleted ? null : 'rowDeleted'}" style="margin-bottom:10px" >
La feuille de style :
Code:

1 2 3 4 .rowDeleted { background: pink; }
Le problème est que la ligne ne se met pas en couleur, quelque soit l'ordre du test.

Qqun a-t-il une idée ?
Merci d'avance pour votre aide

13/07/2015, 12h34
jeffray03

salut,
as-tu essayé ceci:

Code:

rowStyleClass="#{(!periode.deleted) ? null : 'rowDeleted'}"

Eric
13/07/2015, 13h47
doons

Salut,

ca ne change rien.
Je me demande si ce n'est pas du fait que la table est editable ? En meme temps ça ne change rien si j'enleve l'édition

salut
essaies ceci et donnes nous le resultat:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <h:head>
	<h:outputStylesheet library="css" name="test.css" />
	<style type="text/css">
.colored {
	background-color: #FF0000;
	color: #FFFFFF;
}

.rowDeleted {
	background: pink;
}
</style>
</h:head>
<body>
<p:dataTable id="periodes"
	value="#{saisirEmployeForm.listPeriodes}" 
	var="periode" widgetVar="periodeTable"
	editable="true" editMode="cell"
	emptyMessage="#{msg['AucunePeriodeAAfficher']}" 
	rowKey="#{periode.id}"
	rowStyleClass="#{!(periode.deleted) ? 'colored' : 'rowDeleted'}"	
        style="margin-bottom:10px" >
  >

Eric

14/07/2015, 09h35
doons

Salut,

Les lignes supprimées s'affichent bien en rose
14/07/2015, 09h46
jeffray03

salut ,
donc c´est un probleme de placement du fichier css.
peux-tu nous donner la structure du projet?
Eric
14/07/2015, 10h15
doons

Je ne pense pas ... car sur la même page, les autres éléments ont bien le rendu défini dans les classes de la feuille de style.
Un texte devant être souligné - gras - bleu est bien souligné - gras - bleu.

J'ai essayé d'ajouter !important mais ça ne change rien
14/07/2015, 10h19
jeffray03

salut,
peux-tu nous dire comment as-tu defini la variable :

Code:

deleted

?

Eric

Salut,

C'est un boolean que j'ai mis dans le bean. Je le mets à jour lorsque je clique sur le lien de suppression

Code:

1
2
3
4
 
public void supprimerPeriode() {
	this.selectedPeriode.setDeleted(true);
}

Code:

1
2
3
4
 
<p:commandLink onclick="PF('confDeleteDlg').show()" styleClass="ui-icon ui-icon-action-supprimer" >
     <f:setPropertyActionListener target="#{saisirEmployeForm.selectedPeriode}" value="#{periode}" />
</p:commandLink>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!-- Dialogue de confirmation de suppression d'une période -->
<p:dialog header="#{msg['ConfirmerLaSuppression']}" widgetVar="confDeleteDlg" resizable="false" id="confDelDlg"
          showEffect="fade" hideEffect="fade" >
     <p:outputLabel value="#{msg['EtesVousSurDeVouloirSupprimerCettePeriode']}" />
     <div align="center">
	   <h:panelGrid id="display" columns="2" cellpadding="10">
	         <p:commandButton id="deleteButton" action="#{saisirEmployeForm.supprimerPeriode}" oncomplete="PF('confDeleteDlg').hide()" 
	               update=":saisirEmployeForm:periodes" value="#{msg['Oui']}" />
	         <p:commandButton id="cancelButton" onclick="PF('confDeleteDlg').hide()" value="#{msg['Non']}"/>
	   </h:panelGrid>
     </div>
</p:dialog>

14/07/2015, 11h23
jeffray03

salut,
et quand tu fais un

Code:

System.out.println(deleted);

dans le getter de deleted il te donne quelle valeur?

Eric
14/07/2015, 11h54
doons

Si j'ai 3 lignes et que je clique sur la 2ème, il retourne

Citation:

false
true
false

Si je clique encore sur le 1ère, il retourne

Citation:

true
true
false
14/07/2015, 12h41
jeffray03

si lors d´un clic tu as 3 lignes, et que sur toute ces lignes, tu as toujours a la fin false, alors c´est que ton resultat est bon.
car tu dis, si :

Code:

deleted == false alors null

Eric
14/07/2015, 13h08
doons

Hé oui, mais ça ne fonctionne pas.
Ca fonctionnait bien avec ton bout de code de feuille de style à intégrer directement dans la page xhtml :aie:

Quelle graille :oops:
14/07/2015, 13h18
jeffray03

salut,
peux-tu me poster en PN le code ?
Eric
14/07/2015, 15h59
doons
En fait j'ai trouvé une parade:

Plutôt que d'avoir
Code:

1 2 3 4 5 .rowDeleted { background: #FF3030; text-decoration: italic; }
J'ai
Code:

1 2 3 4 5 .rowDeleted { color: #FF3030; text-decoration: italic; }
Et pour la table:

Code:

rowStyleClass="#{!(periode.deleted) ? null : 'rowDeleted'}"

Par contre

Code:

text-decoration: italic;

ne fonctionne toujours pas, je vais l'enlever.
Tant pis, pour le moment je peux me débrouiller sans

Merci à tous pour votre aide
14/07/2015, 16h40
jeffray03
salut,
pour cela tu mets ceci dans ton css:
Code:

1 2 3 4 5 .rowDeleted { color: #FF3030; font-style: italic !important; }
Eric
15/07/2015, 06h47
doons

Oui ca marche très bien avec

Code:

font-style: italic !important;

Merci beaucoup