Discussion :

[Tlili2014]

Bonjour

je suis entrain d'implementer le composant primefaces DataGrid - Drag and Drop : http://www.primefaces.org/showcase/ui/dndTable.jsf

Quand j'exécute mon page jsf j'ai pas les bon resultat et je peux pas faire le drag and drop.

mon code managed bean:

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@Scope("session")
@Component
 
public class PerequationBean  implements Serializable{
 
private static final long serialVersionUID = 1L;
@Autowired
private LotissementService lotissementServiceImpl;
private List<Lotissement> listLotissement;
private List<Lotissement> droppedLotissements;
private Lotissement selectedLotissement;
 
 
public PerequationBean() {
    listLotissement=new ArrayList<Lotissement>();
 
    droppedLotissements=new ArrayList<Lotissement>();
 
}
 
@PostConstruct
public void init(){
 
    listLotissement=lotissementServiceImpl.ListLotissement();
}
 
public void onLotissementDrop(DragDropEvent ddEvent) {
    Lotissement lotissement=(Lotissement)ddEvent.getData();
    listLotissement.remove(lotissement);
    droppedLotissements.add(lotissement);
}
 
public List<Lotissement> getListLotissement() {
 
    return listLotissement;
}
 
public void setListLotissement(List<Lotissement> listLotissement) {
    this.listLotissement = listLotissement;
}
 
public List<Lotissement> getDroppedLotissements() {
    return droppedLotissements;
}
 
public void setDroppedLotissements(List<Lotissement> droppedLotissements) {
    this.droppedLotissements = droppedLotissements;
}
 
public Lotissement getSelectedLotissement() {
    return selectedLotissement;
}
 
public void setSelectedLotissement(Lotissement selectedLotissement) {
    this.selectedLotissement = selectedLotissement;
}
 
 
 
}

le code de la page 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<h:form id="carForm">
 
    <p:fieldset legend="Available lotissements">
        <p:dataTable id="availableLotissements" var="lotissement"
            value="#{perequationBean.listLotissement}">
            <p:column style="width:20px">
                <h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4" />
                <p:draggable for="dragIcon" revert="true" />
            </p:column>
 
            <p:column headerText="Model">
                <h:outputText value="#{lotissement.nom}" />
            </p:column>
 
            <p:column headerText="Year">
                <h:outputText value="#{lotissement.superficie}" />
            </p:column>
 
            <p:column headerText="Manufacturer">
                <h:outputText value="#{lotissement.cout}" />
            </p:column>
 
            <p:column headerText="Color">
                <h:outputText value="#{lotissement.indiceStanding}" />
            </p:column>
        </p:dataTable>
    </p:fieldset>
 
 
 
    <p:fieldset id="selectedLotissement" legend="Selected Lotissement"
        style="margin-top:20px">
        <p:outputPanel id="dropArea">
            <h:outputText value="!!!Drop here!!!"
                rendered="#{empty perequationBean.droppedLotissements}"
                style="font-size:24px;" />
 
            <p:dataTable var="lotissement"
                value="#{perequationBean.droppedLotissements}"
                rendered="#{not empty perequationBean.droppedLotissements}">
 
                <p:column headerText="Model">
                    <h:outputText value="#{lotissement.nom}" />
                </p:column>
 
                <p:column headerText="Year">
                    <h:outputText value="#{lotissement.cout}" />
                </p:column>
 
                <p:column headerText="Manufacturer">
                    <h:outputText value="#{lotissement.superficie}" />
                </p:column>
 
                <p:column headerText="Color">
                    <h:outputText value="#{lotissement.indiceStanding}" />
                </p:column>
 
                <p:column style="width:32px">
                    <p:commandButton update=":carForm:display"
                        oncomplete="PF('carDialog').show()" icon="ui-icon-search">
                        <f:setPropertyActionListener value="#{lotissement}"
                            target="#{perequationBean.selectedlotissement}" />
                    </p:commandButton>
                </p:column>
            </p:dataTable>
        </p:outputPanel>
    </p:fieldset>
 
 
    <p:droppable for="selectedLotissement" tolerance="touch"
        activeStyleClass="ui-state-highlight"
        datasource="availableLotissements" onDrop="handleDrop">
        <p:ajax listener="#{perequationBean.onLotissementDrop}"
            update="dropArea availableLotissements" />
    </p:droppable>
 
    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
        draggable="false" width="200" showEffect="fade" hideEffect="fade"
        modal="true">
 
        <h:panelGrid id="display" columns="2" cellpadding="4">
 
            <h:outputText value="Designation:" />
            <h:outputText value="#{perequationBean.selectedLotissement.nom}" />
 
            <h:outputText value="Superficie: " />
            <h:outputText
                value="#{perequationBean.selectedLotissement.superficie}" />
 
            <h:outputText value="Cout: " />
            <h:outputText value="#{perequationBean.selectedLotissement.cout}" />
        </h:panelGrid>
    </p:dialog>
</h:form>

J'utilise primefaces4.0 et jsf2.1.4
Merci d'avance

[Lolosan]

Pour activer cette fonctionnalité sur ton dataTable tu dois lui ajouter l’attribut draggableColumns="true" ou draggableRows="true".

Enfin si j'ai bien compris de quoi il s'agissait, comme le site de primefaces viens tout juste de changer ton lien ne nous redirige pas vers la bonne page.