3 Replies Latest reply on Aug 4, 2012 3:56 PM by kwutzke

    RF4: rich:dragSource lost after rich:dataTable AJAX re-render

    kwutzke

      Hello,

       

      I have the following page:

       

      {code:xml}

      <?xml version="1.0" encoding="UTF-8"?>

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml"

            xmlns:f="http://java.sun.com/jsf/core"

            xmlns:h="http://java.sun.com/jsf/html"

            xmlns:ui="http://java.sun.com/jsf/facelets"

            xmlns:a4j="http://richfaces.org/a4j"

            xmlns:rich="http://richfaces.org/rich">

       

        <h:head>

        </h:head>

       

        <h:body>

          <h:form>

            <rich:dataTable value="#{testBean.documents}"

                            var="doc"

                            id="doc-datatable">

              <f:facet name="header">

                <rich:columnGroup>

                  <rich:column><h:outputText value="File Name" /></rich:column>

                  <rich:column><h:outputText value="Expiry Date" /></rich:column>

                  <rich:column><h:outputText value="Actions" /></rich:column>

                </rich:columnGroup>

              </f:facet>

              <rich:column>

                <a4j:outputPanel id="filename-dnd-panel">

                  <rich:dragSource type="doc"

                                   dragValue="#{doc}"

                                   dragIndicator="doc-dnd-indicator"/>

                  <rich:dragIndicator id="doc-dnd-indicator">

                    <h:outputText value=" #{doc.fileName}" />

                  </rich:dragIndicator>

                  <h:outputText value="#{doc.fileName}" />

                </a4j:outputPanel>

              </rich:column>

              <rich:column>

                <h:outputText value="#{doc.expiryDate}">

                  <f:convertDateTime pattern="yyyy-MM-dd" timeZone="Europe/Berlin" />

                </h:outputText>

              </rich:column>

              <rich:column>

                <h:commandLink value="Edit" id="doc-update-link">

                  <a4j:ajax execute="@this" render="doc-update-grid" oncomplete="#{rich:component('doc-update-popup')}.show()" />

                </h:commandLink>

       

                <rich:popupPanel modal="true"

                                 width="250"

                                 height="100"

                                 resizeable="false"

                                 onmaskclick="#{rich:component('doc-update-popup')}.hide(); return false;"

                                 id="doc-update-popup">

                  <f:facet name="header">

                    <h:outputText value="Change document" />

                  </f:facet>

                  <f:facet name="controls">

                    <h:outputLink value="#" onclick="#{rich:component('doc-update-popup')}.hide(); return false;">

                      <h:outputText value="X" />

                    </h:outputLink>

                  </f:facet>

                  <h:panelGroup>

                    <h:panelGrid columns="2" id="doc-update-grid">

                      <h:outputLabel value="Expiry date:*" for="doc-expiry-date" />

                      <rich:calendar value="#{doc.expiryDate}" datePattern="yyyy-MM-dd" id="doc-expiry-date">

                      </rich:calendar>

                    </h:panelGrid>

                  </h:panelGroup>

                  <h:panelGrid columns="2" style="margin: 0 auto;">

                    <h:commandButton value="OK"

                                     action="#{testBean.updateDocument(doc)}"

                                     onclick="#{rich:component('doc-update-popup')}.hide(); return true;">

                      <a4j:ajax execute="doc-update-grid" render="doc-datatable" oncomplete="#{rich:component('doc-update-popup')}.hide(); return true;" />

                    </h:commandButton>

                    <h:commandButton value="Cancel" onclick="#{rich:component('doc-update-popup')}.hide(); return false;" immediate="true" />

                  </h:panelGrid>

       

                </rich:popupPanel>

              </rich:column>

            </rich:dataTable>

          </h:form>

        </h:body>

       

      </html>

      {code}

       

      Here the test bean + document class:

       

      {code}

      @Named

      @SessionScoped

      public class TestBean implements Serializable

      {

          private static final Logger log = LoggerFactory.getLogger(TestBean.class);

       

          // dummy documents

          private List<DummyDocument> documents;

       

          public List<DummyDocument> getDocuments()

          {

              if ( documents == null)

              {

                  documents = new ArrayList<DummyDocument>();

       

                  SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");

       

                  try

                  {

                      documents.add(new DummyDocument("sdvwergersgtw.pdf", dateFormat.parse("2012-03-04")));

                      documents.add(new DummyDocument("jtment znwezt.doc", dateFormat.parse("2012-07-18")));

                      documents.add(new DummyDocument("p3qrvqwrbw.pdf", dateFormat.parse("2012-11-09")));

                  }

                  catch ( ParseException e )

                  {

                      e.printStackTrace();

                  }

              }

       

              return documents;

          }

       

          public void updateDocument(DummyDocument dummyDocument)

          {

              log.info("Updating expiry date for {} to {}", dummyDocument.getFileName(), dummyDocument.getExpiryDate());

       

      //        em.merge(dummyDocument);

       

          }

       

          public static class DummyDocument

          {

              private String fileName;

              private Date expiryDate;

       

              public DummyDocument(String fileName, Date expiryDate)

              {

                  this.fileName = fileName;

                  this.expiryDate = expiryDate;

              }

       

              public String getFileName()

              {

                  return fileName;

              }

       

              public Date getExpiryDate()

              {

                  return expiryDate;

              }

       

              public void setExpiryDate(Date expiryDate)

              {

                  this.expiryDate = expiryDate;

              }

       

          }

      }

      {code}

       

      I want to display a list of DRAGGABLE documents and allow their expiry dates to be updated via a popup.

       

      doc-list-popup.png

      The expiry date is updated correctly, the popup closes and the list reflects the changes after render="doc-datatable" has been performed.

       

      What happens now is strange: the file names in the "File Name" column can usually be dragged, but after any update (OK) action from the popup the file names can no longer be picked up for dragging. It appears as if the AJAX re-render is dumping the DND.

       

      I found these bugs then:

      https://issues.jboss.org/browse/RF-10947

      https://issues.jboss.org/browse/RF-10994

       

      However, I'm using RF 4.2.2.Final and this version exposes the described behavior even though they were marked as fixed. Not quite true if you ask me. (Anything wrong about my code?)

       

      Is this a recurring bug?

       

      I'm using JBoss AS 7.1.1.Final + Mojarra 2.1.7 + RF 4.2.2.Final.

       

      Karsten