selectBooleanCheckBox does not work seperatly in p:dialog - jsf

I have button that when I click on it, the dialog appear and in that dialog , I have p:selectBooleanCheckBox and h:outputlable.
The first problem is when p:dialog appear I can not choose p:selectBooleanCheckBox separately. It means that when I click on one of them, all of p:selectBooleanCheckBox choose.
The second problem is when I click on p:commandButton in dialog , the actionListener work but it dos not disappaer and it shows permanently. I think the problem cause by Ajax. could you please tell me how can I fix this problem?
<h:panelGrid>
<p:dialog appendToBody="true" header="Selected Values" modal="false" showEffect="fade" hideEffect="fade" widgetVar="dlg">
<h:panelGrid columns="1" id="display">
<p:dataGrid id="AcceptDataGrid" var="tBusinessPartnerRequestInfo" value="#{inviteRequestManagedBean.filterBusinessRequest()}"
columns="1" >
<tr>
<td>
<p:selectBooleanCheckbox/>
</td>
<td>
<h:outputLabel value="test"/>
</td>
</tr>
</p:dataGrid>
<p:commandButton id="acceptCommonButton" value="#{inviteRequest_msg.accept}"
actionListener="#{inviteRequestManagedBean.acceptRequest(tBusinessPartnerRequestInfo.id)}"
update="display" />
</h:panelGrid>
</p:dialog>
</h:panelGrid>
<table style="width: 100%" id="tabell">
<p:selectOneButton value="#{inviteRequestManagedBean.filterType}">
<f:selectItem itemLabel="#{inviteRequest_msg.request}" itemValue="request" />
<f:selectItem itemLabel="#{inviteRequest_msg.archive}" itemValue="archive" />
<f:ajax event="change" execute="#form" render="#form" />
<tr>
<td>
<p:panel></p:panel>
<p:dataGrid id="requestDataGrid" var="tBusinessPartnerRequestInfo"
value="#{inviteRequestManagedBean.filterBusinessRequest()}" columns="1" >
<p:column>
<div>
<table border="0" width="100%">
<tr>
<td>
<p:graphicImage value="#{tBusinessPartnerRequestInfo.partySender_imageUrl}"/>
</td>
<td>
<div>
<table border="0" width="100%">
<tr>
<td>
<h:outputLabel value="#{tBusinessPartnerRequestInfo.requestDate}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="#{tBusinessPartnerRequestInfo.partySender_fullName}"/>
</td>
</tr>
</table>
</div>
</td>
here is where p:dialog call
<td>
<p:commandButton id="acceptCommonButton" value="#{inviteRequest_msg.accept}"
onclick="dlg.show()" />
</td>
<td>
<p:commandButton id="noNowCommonButton" value="#{inviteRequest_msg.notnow}"
actionListener="#{inviteRequestManagedBean.notNowRequest(tBusinessPartnerRequestInfo.id)}"
update="#form" />
</td>
<p:blockUI block="acceptCommonButton" trigger="acceptCommonButton"/>
<p:blockUI block="noNowCommonButton" trigger="acceptCommonButton"/>
<p:blockUI block="acceptCommonButton" trigger="noNowCommonButton"/>
<p:blockUI block="noNowCommonButton" trigger="noNowCommonButton"/>
<td>
<p:panel>
<p:ajaxStatus>
<f:facet name="start">
<p:graphicImage value="../resources/img/loading.gif"/>
</f:facet>
<f:facet name="complete">
<h:outputLabel value=""/>
</f:facet>
</p:ajaxStatus>
</p:panel>
</td>
</tr>
</table>
</div>
<hr/>
</p:column>
</p:dataGrid>
</td>
</tr>
</p:selectOneButton>
</table>
</h:panelGrid>
<h:panelGrid>
<p:dialog appendToBody="true" header="Selected Values" modal="false" showEffect="fade" hideEffect="fade" widgetVar="dlg">
<h:panelGrid columns="1" id="display">
<p:dataGrid id="AcceptDataGrid" var="tBusinessPartnerRequestInfo" value="#{inviteRequestManagedBean.loadPartyRelationShipType()}"
columns="1" >
<tr>
<td>
<p:selectBooleanCheckbox/>
</td>
<td>
<h:outputLabel value="test"/>
</td>
</tr>
</p:dataGrid>
<p:commandButton id="acceptCommonButton" value="#{inviteRequest_msg.accept}"
actionListener="#{inviteRequestManagedBean.acceptRequest(tBusinessPartnerRequestInfo.id)}"
update="display" oncomplete="dlg.hide()" />
</h:panelGrid>
</p:dialog>
</h:panelGrid>
</ui:composition>

Your markup is a bit scary, I don't get why you've got so much thing in your <p:selectOneButton (all the <tr>'s) so instead of trying to correct everything as I start to understand what you try to achieve I'll give you a working example.
Sample.java
public class Sample implements Serializable {
private String name;
private boolean checked;
public Sample() {
}
public Sample(String name, boolean checked) {
this.name = name;
this.checked = checked;
}
// Getter and Setter for name and checked omitted
}
SampleBean.java
#ManagedBean
#ViewScoped
public class SampleBean implements Serializable {
private List<Sample> samples;
private Sample currentSample;
public void prepareEdit(Sample sample) {
this.currentSample = sample;
}
public void edit() {
// Do what you need to do with sample
// You can get it with : this.currentSample
RequestContext.getCurrentInstance().execute("dlg.hide()");
}
public List<Sample> getSamples() {
if (this.samples == null) {
this.samples = new ArrayList<Sample>();
for (int i = 1; i <= 10; ++i) {
this.samples.add(new Sample("Sample n°" + i, (i % 3 == 0)));
}
}
return samples;
}
public void setSamples(List<Sample> samples) {
this.samples = samples;
}
public Sample getCurrentSample() {
return currentSample;
}
public void setCurrentSample(Sample currentSample) {
this.currentSample = currentSample;
}
}
view.xhtml :
<h:form id="myForm">
<p:dataTable value="#{sampleBean.samples}" var="sample">
<p:column headerText="Name">
<h:outputText value="#{sample.name}" />
</p:column>
<p:column headerText="Checked?">
<h:outputText value="#{sample.checked}" />
</p:column>
<p:column style="width: 1px; text-align: center;">
<p:commandButton value="edit"
actionListener="#{sampleBean.prepareEdit(sample)}"
update=":dialog"
oncomplete="dlg.show()" />
</p:column>
</p:dataTable>
</h:form>
<p:dialog id="dialog" widgetVar="dlg" header="Editing">
<h:form rendered="#{!empty sampleBean.currentSample}">
<h:outputText value="Current sample is #{sampleBean.currentSample.name}" />
<br />
<p:selectBooleanCheckbox value="#{sampleBean.currentSample.checked}" />
<br />
<p style="width: 100%; text-align: center;">
<p:commandButton actionListener="#{sampleBean.edit()}"
value="Edit"
update="#form :myForm" />
</p>
</h:form>
</p:dialog>
As you can see I'm storing a currentSample (sampleBean must be #ViewScoped) which helps me to render a custom dialog with the correct current information.
My last comment from your question about the binding of the <p:selectBooleanCheckbox is important because you can get a custom checkbox value only if it's bound to a different endpoint based on the context (here currentSample).
Don't hesitate to comment if something is unclear for you!

Related

Update list size in real time with PF Poll

In my JEE application, I have an emails list extraction process. I need to display a counter which be incremented after adding a mail to the list. The idea is to display the size of this list and update it every 1 seconde using primeface poll. I procced like this:
EmailsExtraction.xhtml:
<h:body>
<h:form>
<h:panelGroup id="formblock" style="margin-top: 40px" layout="block" >
<p:panelGrid columns="2">
<p:outputLabel for="Keyword" value="Keywords: " />
<p:inputText id="Keyword" type="search" requiredMessage="Keyword is required" style="width: 600px"
value="#{mailMB.keyword}" required="true" label="Keyword">
</p:inputText>
<p:outputLabel for="Emailsnbr" value="Emails amount:" />
<p:inputText id="Emailsnbr" requiredMessage="Emails number is required" style="width: 590px"
value="#{mailMB.number}" required="true" label="Emailsnbr">
</p:inputText>
</p:panelGrid>
</h:panelGroup>
<p:spacer height="5px" />
<p:commandButton value="Start" style="width: 12%;height: 100%" id="extractbutton" ajax="true" widgetVar="ButtonExtract"
actionListener="#{mailMB.searchEmailsRym()}"
styleClass="ui-priority-primary"
onstart="blockUIWidget1.show();" oncomplete="play(); blockUIWidget1.hide(); if (args && !args.validationFailed) freeMails();">
</p:commandButton>
</h:form>
<p:dialog widgetVar="blockUIWidget1" header="Hitonclick" modal="true" resizable="false" closable="false" >
<table border="0" style="width: 500px">
<tbody >
<tr>
<td>
<p:graphicImage url="pictures/loading81.gif" width="200" height="200" alt="animated-loading-bar"/>
</td>
<td>
<h:form >
<p:outputLabel value="#{mailMB.count}" id="countOutPut"/>
<p:poll interval="1" update="countOutPut" listener="#{mailMB.increment}"/>
<div id="countdown_text">0</div>
<br></br>
<p:commandButton ajax="false" style="width: 100px;height: 40px" actionListener="#{mailMB.abortSearch()}" value="Cancel" styleClass="ui-priority-primary" title="Cancel" oncomplete="clearForm('formcounter'), clearForm('searchForm')"/>
</h:form>
</td>
</tr>
<div align="right">
</div>
</tbody>
</table>
</p:dialog>
</h:body>
ManagedBean.java:
private int count=0;
public void increment(){
count=mails.size();
}
// count getter & setter
But the count value is not updated.

Passing argument to actionListener method with p:commandLink inside c:forEach loop

I have a dialog that contains a list of graphic images inside command links. When a command link is clicked, I want to pass the image name as action listener method argument.
Dialog's code:
<p:dialog id="idSchemaDlg5" widgetVar="schemaDlg" styleClass="maxSizeDialog" position="90,250" style="max-width:1000px;max-height: 1000px;" header="Schéma des circuits">
<c:forEach id="schemaDataGrid" items="#{historyGenerationBean.schemaList}" var="fileCircuits" varStatus="schemaNum">
<h:panelGrid columns="1">
<h:outputText value="SiteG2R #{historyGenerationBean.g2rNames.get(schemaNum.index)}" style="font-family: Tahoma, Geneva, sans-serif;color: #ED7905;font-size: 16px;font-weight: bold;"/>
<c:forEach items="#{fileCircuits}" var="pictureNamesList">
<h:panelGrid columns="#{pictureNamesList.size()}">
<c:forEach items="#{pictureNamesList}" var="imageName">
<h:form>
<h:panelGroup style="width:6px">
<p:commandLink actionListener="#{historyGenerationBean.fetchMlpppInformation(imageName)}" >
<p:graphicImage value="#{imageStreamer.image}" >
<f:param name="imgName" value="#{imageName}" />
</p:graphicImage>
</p:commandLink>
<h:outputText value="#{imageName}" style="width:50%; font-family: Tahoma, Geneva, sans-serif; font-size:70%;color:black;background-color:transparent;text-align:left;"/>
</h:panelGroup>
</h:form>
</c:forEach>
</h:panelGrid>
</c:forEach>
</h:panelGrid>
</c:forEach>
</p:dialog>
The action listener method is invoked, however I don't receive the argument imageName. It is null.
#ManagedBean(name = "historyGenerationBean")
#RequestScoped
public class HistoryGenerationBean implements Serializable {
#PostConstruct
public void init() {
String[] listRegion = new String[6];
circuitMlpppMap = new HashMap<>();
listRegion[0] = "Centre-Est";
regionOptions = createFilterOptions(genBean.getListRegion());
if (loginBean.connectedUserHasRole("ADMIN")) {
histories = generationHistoryFacade.findAll();
} else {
histories = loginBean.getConnectedUser().getGenerationHistoryList();
}
history = new GenerationHistory();
}
public void fetchMlpppInformation(String imgName) {
System.out.println("l'image sélectionnée est: " + imgName);
}
}
How can I fix this?
I was found the solution with .
<p:dialog id="idSchemaDlg5" widgetVar="schemaDlg" styleClass="maxSizeDialog" position="90,250" style="max-width:1000px;max-height: 1000px;" header="Schéma des circuits">
<h:form id="schemaFormId" dir="#{login.dir}">
<ui:repeat value="#{historyGenerationBean.schemaList}" var="fileCircuits" varStatus="schemaNum">
<ui:repeat value="#{fileCircuits}" var="pictureNamesList">
<table>
<tbody>
<tr>
<ui:repeat value="#{pictureNamesList}" var="imageName">
<td>
<h:panelGrid columns="1">
<p:commandLink action="#{historyGenerationBean.fetchMlpppInformation}" update=":schemaFormId" >
<p:graphicImage value="#{imageStreamer.image}">
<f:param name="imgName" value="#{imageName}" />
</p:graphicImage>
<f:param name="imgName2" value="#{imageName}" />
</p:commandLink>
<h:outputText value="#{imageName}" style="width:50%; font-family: Tahoma, Geneva, sans-serif; font-size:70%;color:black;background-color:transparent;text-align:left;"/>
</h:panelGrid>
</td>
</ui:repeat>
</tr>
</tbody>
</table>
</ui:repeat>
</h:form>
</p:dialog>
Many thanks to everyone who helped me(#BalusC too).

command button doesn't work in p:tabView

i have three tab that invoke separate composite Component. my problem is, when i click on button, there is no action happend. but when i open my composite component page separately my buttons work clearly.my Buttons Are in Tab3. when in invoke ""bizbiz:inviteRequest"" in Tab3, my buttons dosnot work.
could you please see my code ?
<h:body>
<h:form>
<p:tabView >
<p:tab id="tab1" title="#{businessPartner_msg.supplier}">
<h:panelGrid columns="2" cellpadding="10">
<bizbiz:supplier/>
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="#{businessPartner_msg.customer}">
<h:panelGrid columns="2" cellpadding="10">
<bizbiz:customer/>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="#{businessPartner_msg.inviteRequest}">
<h:panelGrid columns="2" cellpadding="10">
<bizbiz:inviteRequest/>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
</h:body>
my buttons in tab3 . here is Tab3
<composite:implementation>
<table style="width: 100%" id="tabell">
<p:selectOneButton value="#{inviteRequestManagedBean.filterType}">
<f:selectItem itemLabel="#{inviteRequest_msg.request}" itemValue="request" />
<f:selectItem itemLabel="#{inviteRequest_msg.archive}" itemValue="archive" />
<f:ajax event="change" execute="#form" render="#form" />
<tr>
<td>
<p:panel></p:panel>
<p:dataGrid id="requestDataGrid" var="tBusinessPartnerRequestInfo"
value="#{inviteRequestManagedBean.filterBusinessRequest()}" columns="1" >
<p:column>
<div>
<table border="0" width="100%">
<tr>
<td>
<p:graphicImage value="#{tBusinessPartnerRequestInfo.partySender_imageUrl}"/>
</td>
<td>
<div>
<table border="0" width="100%">
<tr>
<td>
<h:outputLabel value="#{tBusinessPartnerRequestInfo.requestDate}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="#{tBusinessPartnerRequestInfo.partySender_fullName}"/>
</td>
</tr>
</table>
</div>
</td>
<td>
<p:commandButton id="acceptCommonButton" value="#{inviteRequest_msg.accept}"
actionListener="#{inviteRequestManagedBean.acceptRequest(tBusinessPartnerRequestInfo.id)}"
update="#form"/>
</td>
<td>
<p:commandButton id="noNowCommonButton" value="#{inviteRequest_msg.notnow}"
actionListener="#{inviteRequestManagedBean.notNowRequest(tBusinessPartnerRequestInfo.id)}"
update="#form"/>
</td>
<p:blockUI block="acceptCommonButton" trigger="acceptCommonButton"/>
<p:blockUI block="noNowCommonButton" trigger="acceptCommonButton"/>
<p:blockUI block="acceptCommonButton" trigger="noNowCommonButton"/>
<p:blockUI block="noNowCommonButton" trigger="noNowCommonButton"/>
<td>
<p:panel>
<p:ajaxStatus>
<f:facet name="start">
<p:graphicImage value="../resources/img/loading.gif"/>
</f:facet>
<f:facet name="complete">
<h:outputLabel value=""/>
</f:facet>
</p:ajaxStatus>
</p:panel>
</td>
</tr>
</table>
</div>
<hr/>
</p:column>
</p:dataGrid>
</td>
</tr>
</p:selectOneButton>
</table>
</composite:implementation>

my commandbutton doesnt work, JSF + primefaces?

which pick data from DB (postgre),
this page first list the data in a list
then i have a commandlink "modificar" wich carry the data from the element clicked in a dialog
but i dont know why the commandbutton in this dialog doesnt invoke the method "DAOEventos.modificarEvento" ....
at the end i have a button that register data to the db from a dialog, this is OK works
the only problem i have is with the dialog comes from commandlink!
i made a debug and the problem is with "p:calendar" if i kick that, the method was invoked, but i need that value from the calendar!
<h:body>
<h:form id="form">
<p:dataTable style="width:100%" value="#{DAOEventos.listaEventos()}" var="even" >
<f:facet name="header">Listado de Eventos</f:facet>
<p:column filterBy="#{even.descripcion}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Evento"/>
</f:facet>
<h:outputText value="#{even.descripcion}"></h:outputText>
</p:column>
<p:column filterBy="#{even.fec}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Fecha"/>
</f:facet>
<h:outputText value="#{even.fec}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Modificar"/>
</f:facet>
<p:commandLink value="Modificar" oncomplete="dlg2.show();"
update="modalDialog2" action="#{beanEventos.traerDatos()}" style="color: black">
<f:setPropertyActionListener target="#{beanEventos.codEvento}" value="#{even.codEvento}" />
<f:setPropertyActionListener target="#{beanEventos.codSec}" value="#{even.codSec}" />
</p:commandLink>
<p:dialog id="modalDialog2" header="Modificar Eventos" widgetVar="dlg2" dynamic="true" resizable="false">
<h:form>
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento"/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento"/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha Evento"/>
<p:calendar value="#{beanEventos.fec}"
showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:selectBooleanCheckbox value="#{beanEventos.vigencia}"/>
<h:outputText value="Vigencia" style="font-weight:bold"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Modificar" action="#{DAOEventos.modificarEvento()}" />
</td>
</tr>
</table>
</h:form>
</p:dialog>
</p:column>
</p:dataTable>
<p/>
<p:commandButton id="showDialogButton" value="Agregar" oncomplete="dlg.show()" />
<p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false" id="dialogo" >
<h:form>
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento "/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento "/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha de Evento"/>
<p:calendar value="#{beanEventos.fec}" id="cal" showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Registrar Evento"
action="#{DAOEventos.insertarEvento()}"/>
</td>
</tr>
</table>
</h:form>
</p:dialog>
</h:form>
</h:body>
You are nesting one HTML form inside another HTML form which is not a valid concept in HTML. Even if you doing this in JSF ultimate rendering component will be HTML only.So, remove
<h:form id="form"> from your code or try to keep all the above code inside single form.
Check here :
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
As SrinivasR said, you shouldn't (although this may work fine) nest forms.
But I think the issue here is with the place where you are defining your:
<p:dialog id="modalDialog2">...</p:dialog>
You should put it outside the datatable.
<h:body>
<h:form id="form">
<p:dataTable style="width:100%" value="#{DAOEventos.listaEventos()}" var="even" >
<f:facet name="header">Listado de Eventos</f:facet>
<p:column filterBy="#{even.descripcion}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Evento"/>
</f:facet>
<h:outputText value="#{even.descripcion}"></h:outputText>
</p:column>
<p:column filterBy="#{even.fec}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Fecha"/>
</f:facet>
<h:outputText value="#{even.fec}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Modificar"/>
</f:facet>
<p:commandLink value="Modificar" oncomplete="dlg2.show();"
update=":padding" actionListener="#{beanEventos.traerDatos()}" style="color: black">
<f:setPropertyActionListener target="#{beanEventos.codEvento}" value="#{even.codEvento}" />
<f:setPropertyActionListener target="#{beanEventos.codSec}" value="#{even.codSec}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
<p/>
<h:panelGroup id="padding" layout="block">
<p:dialog id="modalDialog2" header="Modificar Eventos" widgetVar="dlg2" dynamic="true" resizable="false">
<h:form id="form2">
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento"/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento"/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha Evento"/>
<p:calendar value="#{beanEventos.fec}"
showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:selectBooleanCheckbox value="#{beanEventos.vigencia}"/>
<h:outputText value="Vigencia" style="font-weight:bold"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Modificar" action="#{DAOEventos.modificarEvento()}" />
</td>
</tr>
</table>
</h:form>
</p:dialog>
</h:panelGroup>
<h:form id="form3">
<p:commandButton id="showDialogButton" value="Agregar" oncomplete="dlg.show()" />
<p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false" id="dialogo" >
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento "/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento "/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha de Evento"/>
<p:calendar value="#{beanEventos.fec}" id="cal" showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Registrar Evento"
action="#{DAOEventos.insertarEvento()}"/>
</td>
</tr>
</table>
</p:dialog>
</h:form>

How to create draggable component with RichFaces?

I try to make draggable components and to do this I am based on this example:
http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport.jsf
and i started with this example but the component does not give any indication that is draggable:
<!---------------- Indicator -------->
<rich:dragIndicator id="indicator" />
<h:form>
<table border="0">
<tr>
<td valign="top"><rich:panel>
<rich:tree>
...
</rich:tree>
</rich:panel></td>
<td valign="top"><rich:panel id="afficherTest">
<rich:dataGrid value="#{afficherTestBean.listTest}" var="test"
columns="2" elements="6" width="600px">
<rich:panel style="cursor: move">
<!---------------draggable Zone-------------------->
<rich:dragSupport dragIndicator=":indicator"
dragType="#{test.nomTest}" dragValue="#{test.nomTest}">
<rich:dndParam name="label" value="#{test.nomTest}" />
</rich:dragSupport>
<f:facet name="header">
<h:outputText value="#{test.categorie}"></h:outputText>
</f:facet>
<h:panelGrid columns="2">
<h:outputText value="Nom Test:" styleClass="label"></h:outputText>
<h:outputText value="#{test.nomTest}" />
<h:outputText value="Description Test:" styleClass="label"></h:outputText>
<h:outputText value="{test.description}" />
<a4j:commandLink value="Ajouter"></a4j:commandLink>
</h:panelGrid>
</rich:panel>
<f:facet name="footer">
<rich:datascroller></rich:datascroller>
</f:facet>
</rich:dataGrid>
</rich:panel></td>
</tr>
</table>
</h:form>
</html>
please help me to create draggable component,i need your help ):'

Resources