Primefaces : Datatable et inputNumber

Version imprimable

Bonjour,

J'utilise un tableau Datatable du framework Primefaces.
Dans ce tableau, une colonne de type number est modifiable.
Mon problème est que je suis obligé de cliquer 2 fois dans une cellule pour pouvoir modifier son contenu.
Il semble y avoir un rapport avec le cadrage à droite : style="float: right"
Merci pour votre aide.

Code qui fonctionne avec 1 clic :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
                            <p:column width="50" style="border-color: lightgrey">
                                <f:facet name="header">
                                    <div class="titreColonne">
                                        <p:commandLink>
                                            <h:outputLabel value="#{planCompteM61ManagerBean.listeColonneAnnee.get(0)}" class="titreColonneLibelle titreColonneFonction bleu"/>
                                        </p:commandLink>
                                    </div>
                                </f:facet>
                                <p:cellEditor>
                                    <f:facet name="output">
                                        <h:outputText value="#{ligne.valeur01}" class="texteBleu">     <----- pas de cadrage
                                            <f:convertNumber pattern="###,###,###,##0.00"/>
                                        </h:outputText>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputNumber value="#{ligne.valeur01}"/>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>

Code qui fonctionne mais avec 2 clic :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
                            <p:column width="50" style="border-color: lightgrey">
                                <f:facet name="header">
                                    <div class="titreColonne">
                                        <p:commandLink>
                                            <h:outputLabel value="#{planCompteM61ManagerBean.listeColonneAnnee.get(0)}" class="titreColonneLibelle titreColonneFonction bleu"/>
                                        </p:commandLink>
                                    </div>
                                </f:facet>
                                <p:cellEditor>
                                    <f:facet name="output">
                                        <h:outputText value="#{ligne.valeur01}" style="float: right" class="texteBleu">     <----- avec style="float: right" pour cadrage à droite
                                            <f:convertNumber pattern="###,###,###,##0.00"/>
                                        </h:outputText>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputNumber value="#{ligne.valeur01}"/>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>

Il ne faut pas utiliser le float pour ça, un simple text-align:right sur la définition de colonne fera le boulot
Voici un exemple de classe que j'ai testé et qui fonctionne
Code:

1 2 3 4 5 6 .ui-uid { color: #0000FF; text-align: right; font-size: x-small; width: 50px !important; }
Code:

1 2 3 4 5 6 7 8 9 10 <p:column headerText="UID" styleClass="ui-uid"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{responsable.uid}"/> </f:facet> <f:facet name="input"> <p:inputNumber value="#{responsable.uid}" inputStyleClass="ui-uid"/> </f:facet> </p:cellEditor> </p:column>

Ça marche bien avec text-align.

Mais j'ai un autre problème : je modifie le montant et en sortie de champ la cellule est vide.
Le montant modifié ne reste pas dans la cellule.
La hauteur de la cellule est rétrécie et ne contient rien.

Avez-vous une idée ?
Merci.

Mon code modifié :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
                            <p:column width="50" style="text-align: right; border-color: lightgrey">
                                <f:facet name="header">
                                    <div class="titreColonne">
                                        <p:commandLink>
                                            <h:outputLabel value="#{planCompteM61ManagerBean.listeColonneAnnee.get(0)}" class="titreColonneLibelle titreColonneFonction bleu"/>
                                        </p:commandLink>
                                    </div>
                                </f:facet>
                                <p:cellEditor>
                                    <f:facet name="output">
                                        <h:outputText value="#{ligne.valeur01}" class="texteBleu">
                                          <f:convertNumber pattern="###,###,###,##0.00"/>
                                        </h:outputText>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputNumber value="#{ligne.valeur01}" inputStyle="text-align: right"/>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>

03/08/2018, 16h56
OButterlin

Je ne serais pas surpris qu'il y ait un problème de conversion, surtout si l'affichage est au format "français", avec virgule décimale etc...

Pour que la valeur soit convertie "naturellement", il faudrait essayer de :
- supprimer les blancs séparateurs de millier
- remplacer la virgule décimale par un point

Bien sûr, il y a moyen de faire la conversion avec le format numérique français mais il va falloir passer par une classe converter, dans ton cas, essaye de mettre le même <f:converNumber> que pour ta zone en output.
04/08/2018, 10h43
denisduval75

Même en supprimant le format f:convertNumber ça ne marche pas mieux.

Plus étonnant, le scope du bean semble déterminant : si je passe en SessionScope, ça marche pas trop mal
sauf que je dois être en RequestScope !

Quel rapport y a t-il ?
Merci.
05/08/2018, 10h32
OButterlin

Je ne pense pas qu'il y ait un rapport entre le scope du bean et le problème de conversion, ça doit venir d'un autre problème.
Ceci dit, ton scope est inadapté à ce que tu veux faire, il faudrait utiliser le @ViewScoped.
Avec @RequestScoped, les modifications n'ont pas d'autre durée de vie que la requête

Quand tu dis : en supprimant le <f:convertNumber>, tu parles du champ <h:outputText> ou du <p:inputNumber> ?
Ce que je te conseillais, c'était de rajouter le <f:convertNumber> au <p:inputText>.

Sinon, peux-tu afficher ton code actuel et la définition de ton managedBean ?

Voici mon code actuel.
Pour certains montants, je dois cliquer 2 fois pour pouvoir modifier.
Je ne vois pas de points communs entre les uns et les autres.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
                                    <p:cellEditor>
                                        <f:facet name="output">
                                            <h:outputText id="idMontant" value="#{planCompteM61ManagerBean.rechercherMontantPlanCompteM61(ligne, annee)}">
                                                <f:convertNumber pattern="###,###,###,##0.00"/>
                                            </h:outputText>
                                        </f:facet>
                                        <f:facet name="input">
                                            <p:inputNumber value="#{planCompteM61ManagerBean.montantModifie}">
                                                <p:ajax event="change" listener="#{planCompteM61ManagerBean.modifierMontant(ligne, annee)}" 
                                                        update="idMontant"/>
                                            </p:inputNumber>
                                        </f:facet>
                                    </p:cellEditor>

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
25
26
27
import javax.annotation.PostConstruct;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;
 
@ViewScoped
@ManagedBean(name="planCompteM61ManagerBean")
public class PlanCompteM61ManagerBean implements Serializable {
 
    @ManagedProperty("#{accueilManagerBean}")
    private AccueilManagerBean accueilManagerBean;
    @EJB
    private UtiParametreFacade utiParametreFacade;
    @EJB
    private RefUtilisateurFacade refUtilisateurFacade;
    @EJB
    private RefPlanCompteM61Facade refPlanCompteM61Facade;
    @EJB
    private ColPlanCompteM61Facade colPlanCompteM61Facade;
 
    private List<ColPlanCompteM61> listeColPlanCompteM61;
 
    @PostConstruct
    public void init() {
 
        initialiserAnnees();