Is it possible to move rows by drag & drop in a DataTable or extendedDataTable like the column headers?
dasago Feb 1, 2011 2:19 AMHi,
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..