5 Replies Latest reply on Aug 31, 2012 9:36 AM by pac man

    Is it possible to move rows by drag & drop in a DataTable or extendedDataTable like the column headers?

    dasago Newbie

      Hi,

       

      is it possible to move rows by drag & drop in a DataTable or extendedDataTable like the column headers? By default, this is not even supported.

       

      I tried it on a different kind:

       

      get new rowNumber of dragged item by onmouseoverevent (jQuery) -> call JS getRowNum() -> execute commandButton -> set value in bean.

       

      This does not work correctly. Maybe someone has another idea.. i use RichFaces 4.0.0 M5. with jsf 2.0

       

      Here is my code:

       

      xhtml:

       

       

      <h:body>

       

              <style>

                  .panelc { width:25%; }

                  .valign { vertical-align:top; }

                  .dropTargetPanel { width: 90%; }

                  .footerClass {

                      text-align: center;

                      padding-top: 5px;

                  }

       

                  .default{

                      font-size:11px;

                      cursor:pointer;

                      width:100px;

                      border:1px solid gray;

                      padding:2px

                  }

                   .rf-ind-drag.default{

                      padding-left:30px;

                      background-image: url("#{facesContext.externalContext.requestContextPath}/images/default.gif");

                      background-position: 5px;

                      background-repeat: no-repeat;

                  }

                  .accept{

                      background-image: url("#{facesContext.externalContext.requestContextPath}/images/accept.gif");

                      background-position: 5px;

                      background-repeat: no-repeat;

                      border:2px solid green

                  }

                  .reject{

                      border:2px solid red;

                      background-image: url("#{facesContext.externalContext.requestContextPath}/images/reject.gif");

                      background-position: 5px;

                      background-repeat: no-repeat;

                  }

                  .active-row {

                      background-color: #FFEBDA !important;

                      cursor: pointer;

                  }

              </style>

       

              <script type="text/javascript">

                  function getRowNum(elm){

                      var outEvents = #{rich:element('newRowNum')};

                      outEvents.value = elm.html();

                      document.getElementById("form:btnSetRowNum").onclick();

                  }

              </script>

       

       

              <rich:dragIndicator id="ind" acceptClass="accept" rejectClass="reject" draggingClass="default">

                  Drag the item to proper area..

              </rich:dragIndicator>

       

              <h:form id="form">

       

                   <!-- includes the new row number of the dragged item -->

                   <h:inputHidden value="default" id="newRowNum"/>

       

                  <h:panelGrid columnClasses="panelc valign, valign, valign, valign" columns="4" width="100%">

       

                      <rich:panel style="width:133px">

                          <f:facet name="header">

                              <h:outputText value="Source List" />

                          </f:facet>

       

                          <rich:dropTarget acceptedTypes="test"

                              dropValue="TEST" dropListener="#{dragDropEventBean.processDrop}"

                              render="src">

                          </rich:dropTarget>

       

                          <rich:dataTable id="src" value="#{dragDropBean.source}"

                              var="fm" footerClass="footerClass" rowKeyVar="rowNum" >

       

                              <rich:column>

                                  <f:facet name="header">

                                      <h:outputText value="testCol" />

                                  </f:facet>

                                  <a4j:outputPanel layout="block" styleClass="rf-ind-drag">

                                      <rich:dragSource type="#{fm.family}"

                                          dragValue="#{fm}" dragIndicator="ind">

                                      </rich:dragSource>   

       

                                      <h:outputText value="#{fm.name}"></h:outputText>

                                  </a4j:outputPanel>

                              </rich:column>

                              <rich:column>

                                  <f:facet name="header">

                                      <h:outputText value="ehhte" />

                                  </f:facet>

                                  <h:outputText value="#{rowNum}">

                                      <f:convertNumber />

                                  </h:outputText>

                              </rich:column>

       

                              <f:facet name="footer">

                                  <a4j:commandButton action="#{dragDropBean.reset}"

                                      value="Start Over" render="src, phptable" />

                              </f:facet>

                          </rich:dataTable>

                      </rich:panel>

       

                      <a4j:outputPanel id="panelTableStyle" ajaxRendered="true">

                          <rich:jQuery selector="#src tr" event="mouseover"

                              query="getRowNum(jQuery(this))"/>

                      </a4j:outputPanel>

       

                      <a4j:commandButton id="btnSetRowNum" value="test" style="display:none"

                          action="#{dragDropBean.setRowNumber(rich:findComponent('newRowNum').value)}"/>

       

                  </h:panelGrid>

       

              </h:form>

       

          </h:body>

       

       

      DragDropEventBean.java

       

      @ManagedBean
      @RequestScoped
      public class DragDropEventBean implements DropListener {
      
          @ManagedProperty(value = "#{dragDropBean}")
          private DragDropBean dragDropBean;
      
          public void setDragDropBean(DragDropBean dragDropBean) {
              this.dragDropBean = dragDropBean;
          }
      
          public void processDrop(DropEvent event) {
              dragDropBean.moveFramework((Framework) event.getDragValue());
          }
      }
      

       

       

      DragDropBean.java

       

      @ManagedBean
      @ViewScoped
      public class DragDropBean implements Serializable {
      
          private static final long serialVersionUID = 1416925735640720492L;
      
          private static final FrameworkFamilyPredicate PHP_PREDICATE = new FrameworkFamilyPredicate(Family.php);
      
          private static final FrameworkFamilyPredicate TEST_PREDICATE = new FrameworkFamilyPredicate(Family.test);
      
          private static final class FrameworkFamilyPredicate implements Predicate<Framework> {
      
              private Framework.Family family;
      
              public FrameworkFamilyPredicate(Family family) {
                  super();
                  this.family = family;
              }
      
              public boolean apply(Framework input) {
                  return family.equals(input.getFamily());
              }
          }
      
          private String rowNumber = "";
      
          /**
           * @return the rowNum
           */
          public String getRowNumber() {
              return rowNumber;
          }
      
          /**
           * @param rowNum the rowNum to set
           */
          public void setRowNumber(String rowNum) {
              this.rowNumber = rowNum;
          }
      
          private LinkedList<Framework> source;
      
          public DragDropBean() {
              initList();
          }
      
          public LinkedList<Framework> getSource() {
              return source;
          }
      
          public void setSource(LinkedList<Framework> source) {
              this.source = source;
          }
      
          public void moveFramework(Framework framework) {
      
              LinkedList<Framework> t =  getSource();
      
              int newRowNum = getNewRowNumber();
              t.remove(framework);
              t.add(newRowNum, framework);
              setSource(t);
      
          }
      
          public void reset() {
              initList();
          }
      
          private void initList() {
              source = Lists.newLinkedList();
      //      target = Lists.newArrayList();
      
      
              source.add(new Framework("TEST1", Family.test));
              source.add(new Framework("TEST2", Family.test));
              source.add(new Framework("TEST3", Family.test));
              source.add(new Framework("TEST4", Family.test));
              source.add(new Framework("TEST5", Family.test));
              source.add(new Framework("TEST6", Family.test));
              source.add(new Framework("TEST7", Family.test));
              source.add(new Framework("TEST8", Family.test));
              source.add(new Framework("TEST9", Family.test));
              source.add(new Framework("TEST10", Family.test));
              source.add(new Framework("TEST11", Family.test));
              source.add(new Framework("TEST12", Family.test));
              source.add(new Framework("TEST13", Family.test));
      
          }
      
          private int getNewRowNumber(){
              String rowNumber = getRowNumber();
              if (rowNumber != null && rowNumber.length() > 0){
                  // searchIndex => id=form:src: - replace form with the ID of the form in your *.xhtml page
                  String searchIndex = "id=form:src:";
                  int indexRowNum = rowNumber.indexOf(searchIndex) + searchIndex.length();
                  rowNumber = rowNumber.substring(indexRowNum, indexRowNum + 1);
                  try {
                      return Integer.valueOf(rowNumber);
                  }catch ( NumberFormatException nfe ){
                      System.out.println("Keine gültige Zahl!");
                      return 0;
                  }
              }
              return 0;
          }
      

       

      Thanks for your support..

        • 1. Is it possible to move rows by drag & drop in a DataTable or extendedDataTable like the column headers?
          Leandro godoy Newbie
          1. <rich:panel style="width:400px;" id="masterPanel">
          2.                         <f:facet name="header">
          3.                             <h:outputText value="Unidades" />
          4.                         </f:facet>
          5.                         <rich:dropSupport id="untDropZone"
          6.                             acceptedTypes="OPERACIONAL,TRATAMENTO"
          7.                             dropListener="#{eventBean.processReturnDrop}"
          8.                             reRender="operacionaltable,tratamentotable, unidades">
          9.                         </rich:dropSupport>
          10.                         <div id="contentDiv"><a4j:outputPanel ajaxRendered="true">
          11.                             <center><rich:dataTable id="unidades" columns="2"
          12.                                 rows="15" value="#{dndBean.unidades}" var="fm">
          13.                                 <center><f:facet name="header">
          14.                                     <h:outputText
          15.                                         value="Tabela com #{dndBean.totalRegistros} registros." />
          16.                                 </f:facet></center>
          17.                                 <center><rich:column filterBy="#{fm.name}"
          18.                                     sortBy="#{fm.name}" styleClass="align:center;">
          19.                                     <a4j:outputPanel
          20.                                         style="width:100px;border:1px solid gray;padding:2px"
          21.                                         layout="block">
          22.                                         <rich:dragSupport dragIndicator=":indicator" id="dgSpMaster"
          23.                                             dragType="#{fm.family}" dragValue="#{fm}"
          24.                                             ondragstart="hideDiv({duration:0.8, from:1.0, to:0.3})"
          25.                                             ondragend="hideDiv2({duration:0.7})"
          26.                                             reRender="operacionaltable,tratamentotable, unidades">
          27.                                             <rich:dndParam name="label" value="#{fm.name}" />
          28.                                         </rich:dragSupport>
          29.                                         <rich:effect name="hideDiv" for="masterPanel" type="Opacity" />
          30.                                         <rich:effect name="hideDiv2" for="masterPanel" type="Appear" />
          31.                                         <center><h:outputText value="#{fm.name}"></h:outputText>
          32.                                         </center>
          33.                                     </a4j:outputPanel>
          34.                                 </rich:column></center>
          35.                                 <f:facet name="footer">
          36.                                     <rich:datascroller id="scroll" for="unidades" maxPages="5" />
          37.                                 </f:facet>
          38.                             </rich:dataTable></center>
          39.                         </a4j:outputPanel></div>
          40.                     </rich:panel>
          41.                     <rich:panel id="dropTargetPanel" layout="block">
          42.                         <f:facet name="header">
          43.                             <h:outputText value="Operacionais" />
          44.                         </f:facet>
          45.                         <rich:dropSupport id="operacional" acceptedTypes="OPERACIONAL"
          46.                             dropValue="OPERACIONAL" dropListener="#{eventBean.processDrop}"
          47.                             reRender="operacionaltable,tratamentotable, unidades"
          48.                             ondragenter="startDropDiv({delay:0.2,duration:0.8,startcolor: '#CCFFCC',endcolor: '#99FF99',restorecolor: '#FFFFFF'})">
          49.                         </rich:dropSupport>
          50.                         <rich:effect name="startDropDiv" for="dropTargetPanel"
          51.                             type="Highlight" />
          52.                         <center><rich:dataTable id="operacionaltable" columns="1"
          53.                             value="#{dndBean.unidadesOperacionais}" var="fm">
          54.                             <center><f:facet name="header">
          55.                                 <h:outputText
          56.                                     value="Tabela com #{dndBean.totalRegistros1} registros." />
          57.                             </f:facet></center>
          58.                             <center><rich:column filterBy="#{fm.name}"
          59.                                 sortBy="#{fm.name}">
          60.                                 <a4j:outputPanel
          61.                                     style="width:100px;heigth:400px;border:1px solid gray;padding:2px"
          62.                                     layout="block">
          63.                                     <rich:dragSupport dragIndicator=":indicator"
          64.                                         dragType="#{fm.family}" dragValue="#{fm}"
          65.                                         reRender="operacionaltable,tratamentotable, unidades">
          66.                                         <rich:dndParam name="label" value="#{fm.name}" />
          67.                                     </rich:dragSupport>
          68.                                     <center><h:outputText value="#{fm.name}"></h:outputText>
          69.                                     </center>
          70.                                 </a4j:outputPanel>
          71.                             </rich:column></center>
          72.                         </rich:dataTable></center>
          73.                     </rich:panel>
          • 2. Is it possible to move rows by drag & drop in a DataTable or extendedDataTable like the column headers?
            dasago Newbie

            Hello,

             

            thanks for your reply.

             

            Can u please insert your java code of eventBean and dndBean? This would be very helpful.

             

            Do you also know, which element i can use for dnd:param in version 4.X? Currently it isn't supported in version 4.X.

             

            thanks.

            • 3. Is it possible to move rows by drag & drop in a DataTable or extendedDataTable like the column headers?
              Leandro godoy Newbie

              import javax.faces.context.ExternalContext;

              import javax.faces.context.FacesContext;

               

              import org.richfaces.component.Dropzone;

              import org.richfaces.event.DropEvent;

              import org.richfaces.event.DropListener;

               

              public class EventBean implements DropListener {

                  private DndBean dndBean;

               

                  public void processDrop(DropEvent dropEvent) {

                      Dropzone dropzone = (Dropzone) dropEvent.getComponent();

                      dndBean = loadDndBean();

                      dndBean

                              .moveUnidade(dropEvent.getDragValue(), dropzone

                                      .getDropValue());

                     

                     

                  }

                 

                  public void processReturnDrop(DropEvent dropEvent) {

                      Dropzone dropzone = (Dropzone) dropEvent.getComponent();

                      dndBean = loadDndBean();

                      dndBean

                              .returnUnidade(dropEvent.getDragValue(), dropzone

                                      .getDropValue());

                     

                     

                  }

                 

               

                  public DndBean getDndBean() {

                      return dndBean;

                  }

               

                  public void setDndBean(DndBean dndBean) {

                      this.dndBean = dndBean;

                  }

                 

                  private DndBean loadDndBean() {

                      FacesContext fc = FacesContext.getCurrentInstance();

                      ExternalContext ec = fc.getExternalContext();

                      return (DndBean) ec.getRequestMap()

                              .get("dndBean");

                  }

                 

                 

                 

              }

               

               

               

               

               

               

              import java.util.ArrayList;

              import java.util.List;

               

              import br.com.sanepar.sci.entity.operacional.UnidadeOperacional;

              import br.com.sanepar.sci.entity.qualidade.UnidadeTratamento;

              import br.com.sanepar.sci.interfaces.local.UnidadeOperacionalDaoEjbLocal;

              import br.com.sanepar.sci.interfaces.local.UnidadeTratamentoDaoEjbLocal;

              import br.com.sanepar.usti.corporativos.util.servicelocator.ServiceLocator;

               

              @SuppressWarnings("unchecked")

              public class DndBean {

               

                  private ArrayList frameworks;

               

                  private ArrayList unidades;

               

                  private ArrayList<UnidadeOperacional> unidadesOperacionais;

               

                  private ArrayList<UnidadeTratamento> unidadesTratamento;

               

                  private Integer totalRegistros;

               

                  private Integer totalRegistros1;

               

                  private Integer totalRegistros2;

               

                  public ArrayList getUnidades() {

                      if (unidades == null)

                          initListUnidades();

                      return unidades;

                  }

               

                  public void setFrameworks(ArrayList frameworks) {

                      this.frameworks = frameworks;

                  }

               

                  public void moveUnidade(Object fm, Object family) {

                      ArrayList target = null;

                      if ("OPERACIONAL".equals(family))

                          target = unidadesOperacionais;

                      else if ("TRATAMENTO".equals(family))

                          target = unidadesTratamento;

                      if (target != null) {

                          int ind = unidades.indexOf(fm);

                          if (ind > -1) {

                              target.add(unidades.get(ind));

                              unidades.remove(ind);

                          }

                      }

                      totalRegistros = unidades.size();

                      totalRegistros1 = unidadesOperacionais.size();

                      totalRegistros2 = unidadesTratamento.size();

                  }

               

                  public void returnUnidade(Object fm, Object family) {

                      Framework item = (Framework) fm;

                      if ("OPERACIONAL".equals(item.getFamily())) {

                          int ind = unidadesOperacionais.indexOf(fm);

                          if (ind > -1) {

                              unidades.add(unidadesOperacionais.get(ind));

                              unidadesOperacionais.remove(ind);

                          }

                      } else if ("TRATAMENTO".equals(item.getFamily())) {

                          int ind = unidadesTratamento.indexOf(fm);

                          if (ind > -1) {

                              unidades.add(unidadesTratamento.get(ind));

                              unidadesTratamento.remove(ind);

                          }

                      }

                      totalRegistros = unidades.size();

                      totalRegistros1 = unidadesOperacionais.size();

                      totalRegistros2 = unidadesTratamento.size();

                  }

               

                  public String resetUnidades() {

                      initListUnidades();

                      return null;

                  }

               

                  private void initListUnidades() {

                      // buscar tds as unidades de tratamento e unidades operacionais

                      List data = new ArrayList();

                      unidades = new ArrayList();

                      try {

                          UnidadeOperacionalDaoEjbLocal uo = ServiceLocator.getInstance()

                                  .lookup("sci_EjbEAR", UnidadeOperacionalDaoEjbLocal.class);

                          UnidadeTratamentoDaoEjbLocal ut = ServiceLocator.getInstance()

                                  .lookup("sci_EjbEAR", UnidadeTratamentoDaoEjbLocal.class);

               

                          data.addAll(uo.listAll());

                          data.addAll(ut.listAll());

                          for (Object o : data) {

                              if (o instanceof UnidadeOperacional) {

                                  UnidadeOperacional u = (UnidadeOperacional) o;

                                  unidades

                                          .add(new Framework(u.getDescricao(), "OPERACIONAL"));

                              } else if (o instanceof UnidadeTratamento) {

                                  UnidadeTratamento u = (UnidadeTratamento) o;

                                  unidades.add(new Framework(u.getDescricao(), "TRATAMENTO"));

                              }

                          }

                          unidadesOperacionais = new ArrayList<UnidadeOperacional>();

                          unidadesTratamento = new ArrayList<UnidadeTratamento>();

                          totalRegistros = unidades.size();

                          totalRegistros1 = unidadesOperacionais.size();

                          totalRegistros2 = unidadesTratamento.size();

                      } catch (Exception e) {

                          e.printStackTrace();

                      }

               

                  }

               

                  public ArrayList<UnidadeOperacional> getUnidadesOperacionais() {

                      return unidadesOperacionais;

                  }

               

                  public void setUnidadesOperacionais(

                          ArrayList<UnidadeOperacional> unidadesOperacionais) {

                      this.unidadesOperacionais = unidadesOperacionais;

                  }

               

                  public ArrayList<UnidadeTratamento> getUnidadesTratamento() {

                      return unidadesTratamento;

                  }

               

                  public void setUnidadesTratamento(

                          ArrayList<UnidadeTratamento> unidadesTratamento) {

                      this.unidadesTratamento = unidadesTratamento;

                  }

               

                  public void setUnidades(ArrayList unidades) {

                      this.unidades = unidades;

                  }

               

                  public ArrayList getFrameworks() {

                      return frameworks;

                  }

               

                  public Integer getTotalRegistros() {

                      return totalRegistros;

                  }

               

                  public void setTotalRegistros(Integer totalRegistros) {

                      this.totalRegistros = totalRegistros;

                  }

               

                  public Integer getTotalRegistros1() {

                      return totalRegistros1;

                  }

               

                  public void setTotalRegistros1(Integer totalRegistros1) {

                      this.totalRegistros1 = totalRegistros1;

                  }

               

                  public Integer getTotalRegistros2() {

                      return totalRegistros2;

                  }

               

                  public void setTotalRegistros2(Integer totalRegistros2) {

                      this.totalRegistros2 = totalRegistros2;

                  }

               

              }

              1 of 1 people found this helpful
              • 4. Is it possible to move rows by drag & drop in a DataTable or extendedDataTable like the column headers?
                dasago Newbie

                Hey,

                 

                currently i haven't time to check your code. I hope, i will have it soon.

                 

                Do you also know an answer for my other question:

                Which element i can use for dnd:param in version 4.X? Currently it isn't supported in version 4.X

                 

                thanks for your fast support.

                • 5. Re: Is it possible to move rows by drag & drop in a DataTable or extendedDataTable like the column headers?
                  pac man Newbie

                  Didn't try RF 4, I think you mean by ordering rows in a datatable by drag and drop. I didnt check your code, i wrote an example code written by RF 3 (JSF 1.2), not sure if it works in RF 4 :

                   

                   

                  xhtml :

                   

                  <rich:dragIndicator id="indicator" />

                   

                  <rich:dataTable id="myDataTable" var="item"

                      value="#{myList}" rows="10" width="100%"

                      rowClasses="row1">

                   

                      <rich:column>

                          <rich:dragSupport dragIndicator=":indicator" dragType="text"

                              dragValue="#{item}">

                              <rich:dndParam name="label" value="#{item.value}" />

                          </rich:dragSupport>

                   

                          <rich:dropSupport id="dropSupport"

                              acceptedTypes="text" dropValue="#{item}"

                              dropListener="#{myBean.onDrop}">

                          </rich:dropSupport>

                   

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

                      </rich:column>

                   

                  </rich:dataTable>

                   

                   

                  Bean :

                   

                  public void onDrop(DropEvent dropEvent){

                          MyItem draggedItem = (MyItem) dropEvent.getDragValue();

                          MyItem droppedItem = (MyItem) dropEvent.getDropValue();

                          int indexdraggedItem = myList.indexOf(draggedItem);

                          int indexdroppedItem = myList.indexOf(droppedItem);

                   

                          myList.remove(draggedItem);

                          myList.add(indexdroppedItem, draggedItem);

                  }

                   

                  Also dont forget to reRender your datatable.

                  hope this helps...