[Primefaces] - La largeur des colonnes du tableau n'est pas "recalculée" après utilisation du columnToggler

Version imprimable

2 pièce(s) jointe(s)

Bonjour, mon problème est décrit dans le titre.

J'ai mis deux captures d'écran en pièces jointes pour bien visualiser le problème
Mon code est le suivant

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<p:panelGrid id="myTable" columns="1" styleClass="zoneRecherche">
   <p:column>
    <p:panelGrid columns="1">
      <p:dataTable id="listIdentitePersonnes" rowIndexVar="row"scrollHeight="310" var="identitepersonne"
		  emptyMessage="Pas de données"
		  widgetVar="monIdentitePersonne" value="#{reactivationBean.listIdentitePersonnes}"
		  sortMode="multiple" selection="#{reactivationBean.identitesSelectionnees}"
		  scrollable="true" scrollRows="10"
		  rowKey="#{identitepersonne.id}" resizableColumns="true"
		  styleClass="#{(reactivationBean.listIdentitePersonnes.size() le '10') ? 'scrollableData' : 'fontTextDefault'}">
 
           <f:facet name="header" style="width:100%">
	     <h:outputLabel id="listeResultatPersonnesLabel#{idx}" value="Résultats de la requête" />
	      <p:commandButton id="consultationDataTableToggler1" type="button" value="Colonnes affichées" style="float:right;height:16px;font-size:10px" />
             <p:columnToggler widgetVar="myColumnToggler" datasource="listIdentitePersonnes" trigger="consultationDataTableToggler1"/>
	  </f:facet>
 
	<p:ajax event="sort" oncomplete="updateToggles()" />
	<p:ajax event="page" oncomplete="updateToggles()" />
	<p:ajax event="rowSelectCheckbox" />
	<p:ajax event="rowUnselectCheckbox" />
	<p:ajax event="rowSelect" />
	<p:ajax event="rowUnselect" />
	<p:ajax event="toggleSelect" process="@this" />
 
        <p:column id="reactivationRequeteDataTableCheckBox"
				selectionMode="multiple" style="width:18px !important;text-align:center" toggleable="false" />
	<p:column id="reactivationRequeteDataTableNumLigne"
				style="width:18px"  headerText="N°" styleClass="check-colonne-tableau">
	  <h:outputText value="#{row + 1}" />
       </p:column>
	<p:column style="width:120px" headerText="Personne" sortBy="#{identitepersonne.numeroPersonne}">
           <h:outputText escape="true" value="#{identitepersonne.numeroPersonne}" />
	</p:column>
	<p:column style="width:150px" headerText="Nom" sortBy="#{identitepersonne.nom}">
          <h:outputText id="colNom" escape="true" value="#{identitepersonne.nom}" />
	 <p:tooltip for="colNom" value="#{identitepersonne.nom}" trackMouse="true" />
	</p:column>
	<p:column style="width:150px" headerText="Prénom(s)" sortBy="#{identitepersonne.prenom}">
           <h:outputText id="colPrenom" escape="true" value="#{identitepersonne.prenom}" />
	  <p:tooltip for="colPrenom" value="#{identitepersonne.prenom}" trackMouse="true" />
	</p:column>
	<p:column style="width:120px" headerText="Date naiss." sortBy="#{identitepersonne.dateNaissance}">
           <h:outputText escape="true" value="#{identitepersonne.dateNaissance}">
              <f:converter converterId="com.myPackage..jsf.Date" />
	  <f:attribute name="pattern" value="dd/MM/yyyy" />
	 </h:outputText>
      </p:column>
      <p:column style="width:50px" headerText="Sexe" sortBy="#{identitepersonne.sexe}">
         <h:outputText escape="true" value="#{identitepersonne.sexe}" />
     </p:column>
     <p:column style="width:150px" headerText="Catégorie-global" sortBy="#{identitepersonne.categorie}">
         <h:outputText escape="true" value="#{referenceApplicationBean.recupererCategorie(identitepersonne.categorie)}" />
     </p:column>
 
    </p:dataTable>
 </p:panelGrid>
</p:column>
</p:panelGrid>

J'ai essayé la solution présentée ici : http://blog.primefaces.org/?p=3341
Mais ça ne marche pas. Je n'ai pas d'idées. Faut-il que j'écrive du code Javascript pour corriger le problème? Merci par avance

15/03/2016, 17h05
skyfall92

J'utilise Primefaces 5.0 et j'ai l'impression que ce problème est un bug de Primefaces 5.0 résidant dans le fait que si l'on masque une ou plusieurs colonnes d'un tableau défini comme "scrollable" alors les headers du tableau ne s'alignent pas avec les lignes du tableau

Toutes tes colonnes ont une largeur, du coup, la largeur totale de la zone d'affichage ne sera la même en fonction des colonnes affichées.
Il faudrait soit :
- retirer toutes les largeurs de colonnes (mais ça ne serait pas joli)
- recalculer la largeur totale du tableau (mais ça se complique)

Si tu veux recalculer, j'ai fait un essai (à peu près concluant) en utilisant l'événement "toggle", ça donne ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<p:dataTable id="list1" value="#{collaborateurManager.list}" var="item" style="width:#{collaborateurManager.width}px">
    <f:facet name="header">
        Tests
        <p:commandButton id="consultationDataTableToggler1" type="button" value="Colonnes affichées" style="float:right;height:20px;font-size:10px" />
        <p:columnToggler widgetVar="myColumnToggler" datasource="list1" trigger="consultationDataTableToggler1">
            <p:ajax event="toggle" listener="#{collaborateurManager.toggleEvent}"/>
        </p:columnToggler>
      </f:facet>
 
    <p:column headerText="Initiales" width="100">
        <h:outputText value="#{item.initiales}"/>
    </p:column>
    <p:column headerText="Nom" width="300">
        <h:outputText value="#{item.nom}"/>
    </p:column>
    <p:column headerText="Prénom" width="300">
        <h:outputText value="#{item.prenom}"/>
    </p:column>
</p:dataTable>

Le gestionnaire associé

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
 
public void toggleEvent(ToggleEvent event)
{
    int columnWidth = 0;
    switch ((Integer)event.getData())
    {
    case 0 :
        columnWidth = 122;
        break;
    case 1 :
        columnWidth = 322;
        break;
    case 2 :
        columnWidth = 322;
        break;
    }
    if ("HIDDEN".equals(event.getVisibility().name()))
    {
        width -= columnWidth;
    }
    else
    {
        width += columnWidth;
    }
 
    RequestContext.getCurrentInstance().execute("resetList1(" + width + ")");
}

La valeur initiale de "width" dans mon cas est calculée

Code:

1
2
 
private int width = 700 + 3*22;

(avec le thème primefaces, j'ai un padding left et right de 10px et une bordure de 1px, d'où le 3x22...)
Enfin, la fonction javascript

Code:

1
2
3
4
5
6
    <script>
    function resetList1(w)
    {
        document.getElementById("form1:list1").style.width = w + "px";
    }
    </script>