Discussion :

[Népomucène]

Bonjour à tous.
J'ai un p:datatable éditable avec un total dans le ColumnGroup.


c'est une liste d'items

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
@ManagedBean
@ViewScoped
public class Item implements Serializable{
 
    public Item() {}
 
    public String getLibelle() {
        return libelle;
    }
 
    public void setLibelle(String libelle) {
        this.libelle = libelle;
    }
 
    public BigDecimal getMontant() {
        return montant;
    }
 
    public void setMontant(BigDecimal montant) {
        this.montant = montant;
    }
 
    private String libelle;
    private BigDecimal montant;
}

cette liste est pilotée par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@ManagedBean
@ViewScoped
public class ItemManager implements Serializable {
 
    public ItemManager() {
    }
 
    @PostConstruct
    public void initMethod() {
        items = new ArrayList<>();
        for (int i = 1; i <= 3; i++) {
            Item item = new Item();
            item.setLibelle("libellé n° " + i);
            item.setMontant(new BigDecimal(0)); // initialisation montant à zéro
            items.add(item);
        }
        totalMontant = "pas calculé";
    }
 
    public List<Item> getItems() {
        return items;
    }
 
    public String getTotalMontant() {
        return totalMontant;
    }
 
    public void setTotalMontant(String totalMontant) {
        this.totalMontant = totalMontant;
    }
 
    public void onCellEdit(CellEditEvent event) {
        BigDecimal total = new BigDecimal(0);
        for (Item item : items) {
            total = total.add(item.getMontant());
        }
        totalMontant = new DecimalFormat("#,##0.00").format(total);
        System.out.println("totalMontant calculé : " + totalMontant);
    }
 
    private List<Item> items;
    private String totalMontant;
}

Chaque fois que je change une valeur dans la colonne Montant, je voudrais que le total s'affiche en bas.

J'ai donc fais un p:remoteCommand pour pouvoir mettre à jour le total :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p:remoteCommand name="refreshFooter" update=":monform:lignes:totalGroup"/>

chaque fois qu'une cellule est modifiée, refreshFooter est appelé par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p:ajax event="cellEdit"  listener="#{itemManager.onCellEdit}" oncomplete="refreshFooter();" />

Au global mon xhtml est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
32
33
34
35
    <h:body>
        <f:view>
            <h:form  id="monform">
 
                <p:remoteCommand name="refreshFooter" update=":monform:lignes:totalGroup"/>
 
                <p:dataTable id="lignes" var="item" value="#{itemManager.items}" editable="true"  editMode="cell"  style="width: 400px">
 
                    <p:ajax event="cellEdit"  listener="#{itemManager.onCellEdit}" oncomplete="refreshFooter();" />
 
                    <p:column headerText="Libellé" style="width: 70%">
                        <p:cellEditor >
                            <f:facet name="output"><h:outputText value="#{item.libelle}" /></f:facet>
                            <f:facet name="input"><p:inputText value="#{item.libelle}" /></f:facet>
                        </p:cellEditor>
                    </p:column>
 
                    <p:column headerText="Montant" style="width: 30%">
                        <p:cellEditor >
                            <f:facet name="output"><h:outputText value="#{item.montant}" /></f:facet>
                            <f:facet name="input"><p:inputText value="#{item.montant}" /></f:facet>
                        </p:cellEditor>
                    </p:column>
 
                    <p:columnGroup type="footer" id="totalGroup" >
                        <p:row >
                            <p:column footerText="totalisation"/>
                            <p:column footerText="#{itemManager.totalMontant}" />
                        </p:row>
                    </p:columnGroup>
 
                </p:dataTable>
            </h:form>
        </f:view>
    </h:body>

Mon problème :
la méthode de totalisation est bien exécutée dans ItemManager
(avec System.out.println("totalMontant calculé : " + totalMontant); j'obtiens bien Infos: totalMontant calculé : 123,00 dans le log)
mais l'affichage ne se fait pas (en dépit du update=":monform:lignes:totalGroup")

Le log me dit aussi :

Avertissement: Can not update component "org.primefaces.component.columngroup.ColumnGroup" with id "monform:lignes:totalGroup" without a attached renderer. Expression ":monform:lignes:totalGroup" referenced from "monform:j_idt5"

Du coup, quelqu'un saurait-il comment attacher un renderer à un ColumnGroup
ou bien aurait une autre solution de contournement (genre un autre composant qui ferait le travail) ?

[Cafeinoman]

Question bête : ca marche avec un footer "simple" mis dans la dernière colonne?

[Népomucène]

Qu'entends-tu par un "footer simple" ?

[Cafeinoman]

Remplacer ton columngroup par un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<f:facet name="footer">
    Total #{itemManager.totalMontant}
</f:facet>

[Népomucène]

Bien sûr, cela fonctionne ; mais dans ce cas je perds l'alignement des colonnes
Dans le cas réel, j'ai une quinzaine de colonnes avec plusieurs totaux donc il faut que cela soit aligné.

Une autre solution de contournement que j'utilise actuellement
est de faire un second tableau de même dimension au pied du tableau principal.
C'est pas terrible car il faut spécifier des largeurs de colonne en nombre de pixels et non plus en %
Alors en cas de redimensionnement du navigateur, l'alignement merdouille.

[Cafeinoman]

Dans ce cas, met le f:facet directement a l'interieur de chaque colonne qui a besoin d'un total, ca restera forcément aligné ...

[Népomucène]

Si j'ai un datatable avec les lignes de détail + un second datatable avec les totaux, alors les deux sont indépendants.
comment le f:facet va-t-il synchroniser les largeurs de colonnes du premier tableau avec celles du second ?

Mais pour revenir à mon premier post, l'intérêt du ColumnGroup dans un datatable c'est d'avoir des largeurs de colonnes synchronisées.
Du coup c'est facile de faire une présentation impeccable ; comme quand on fait un total dans un tableur.

Ce que je n'arrive pas à faire c'est comment on peut actualiser les totaux présents dans le ColumnGroup après avoir changé une valeur dans une cellule du tableau.

[Cafeinoman]

Pour la question de base, je suis pas sur que ca soit faisable. Au pire, si t'as un peu de temps, post sur le forum de primefaces directement, optimus ou un autre contributeur t'éclairera.

Pour les f:facet, je ne te dis pas de les mettre dans ton second tableau, met entre les balises colonnes de ta datatable, pour que chaque colonne ai son footer. Ca resoud, je pense, tout problème d'aligement...

[Népomucène]

Ah ok, je vais regarder cela ...

[OButterlin]

As-tu essayé ceci ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<p:columnGroup type="footer">
    <p:row >
        <p:column footerText="totalisation"/>
        <p:column>
            <h:outputText id="totalGroup" value="#{itemManager.totalMontant}"/>
        </p:column>
    </p:row>
</p:columnGroup>

[Népomucène]

@OButterlin :

J'avais essayé cette solution de bon sens ! Malheureusement il semble bien que tout "id" à l'intérieur d'un columnGroup soit inaccessible.

Dans Firefox, quand on examine l'élément "ColumnGroup" on ne voit pas id="totalGroup" (ce qui est confirmé par l'avertissement de Glassfish dans le log)

@Cafeinoman :

C'est une bonne solution de contournement ! je n'avais vraiment pas songé à créer un "pied" pour chaque colonne

Cela fonctionne car on évite d'utiliser "ColumnGroup" et donc on a accès aux "id"

Les 2 bémols (mais c'est du chipotage) :
- on doit prévoir un "id" par colonne et les mettre à jour individuellement
- dans le pied du tableau on ne peut pas fusionner plusieurs colonnes (ce qu'on pouvait faire avec ColumnGroup)
si je trouve une solution pour ces 2 points, je la posterai.

En conclusion, il semble que le ColumnGroup ne fonctionne que pour afficher des informations qui ne doivent pas changer après construction de la vue.

Un grand merci à tous les deux


ci-dessous le xhtml qui fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
32
33
34
35
 
    <h:body>
        <f:view>
            <h:form  id="monform">
 
                <p:remoteCommand name="refreshFooter" update=":monform:lignes:totalGroup"/>
 
                <p:dataTable id="lignes" var="item" value="#{itemManager.items}" editable="true"  editMode="cell"  style="width: 400px">
 
                    <p:ajax event="cellEdit"  listener="#{itemManager.onCellEdit}" oncomplete="refreshFooter();" />
 
                    <p:column headerText="Libellé" style="width: 70%">
                        <p:cellEditor >
                            <f:facet name="output"><h:outputText value="#{item.libelle}" /></f:facet>
                            <f:facet name="input"><p:inputText value="#{item.libelle}" /></f:facet>
                        </p:cellEditor>
                        <f:facet name="footer">
                            totalisation
                        </f:facet>
                    </p:column>
 
                    <p:column headerText="Montant" style="width: 30%">
                        <p:cellEditor >
                            <f:facet name="output"><h:outputText value="#{item.montant}" /></f:facet>
                            <f:facet name="input"><p:inputText value="#{item.montant}" /></f:facet>
                        </p:cellEditor>
                        <f:facet name="footer" >
                            <h:outputText id="totalGroup" value="#{itemManager.totalMontant}" />
                        </f:facet>
                    </p:column>
 
                </p:dataTable>
            </h:form>
        </f:view>
    </h:body>