Primefaces Drag and Drop from DataGrid

Question

I'm using Primefaces Drag and Drop to drag from a DataGrid to another component. The problem is that when you drag an item from a datagrid, the item is not visible as soon as it leaves the cell.

Even the example behaves this way: http://www.primefaces.org/showcase/ui/dndTable.jsf

Is there a way to make the dragged item visible above everything else on the page? I've tried setting a high zindex in the draggable and that didn't work. This seems to only be a problem with Dragging from a DataGrid.

Using Primefaces 3.5

onio onio · Accepted Answer · 2013-07-30T07:41:12

I didn't find any solution by manipulating styles to avoid the problem while using a dataTable, but if you use a dataGrid with nested panelGrids simulating rows it will work :

 <p:fieldset>
`  <p:dataGrid columns="1" value="#{bean.items}" var="item">
     <p:panelGrid>
       <p:row>
         <p:column style="text-align: center;">
             <p:outputLabel value="#{item.name}" />
             <p:draggable />
         </p:column>
         <p:column style="text-align: center;">
             <h:outputText value="#{item.somethingElse}" />
         </p:column>
       </p:row>
     </p:panelGrid>
   </p:dataGrid>
 <p:fieldset>

With this trick, you can drag anything outside the panelGrid and it will be displayed above everything else, but you loose the dataTable style.

Primefaces Drag and Drop from DataGrid

1 Answers