DragDrop - Custom This sample demonstrates how to extend PrimeFaces with javascript. Tree component displays the available columns which are draggable. where as column headers have drop targets and dropping a treenode onto one of these adds the related property column to the datatable. Column headers can also be moved back to the tree.
  • Columns
IDYEARBRAND
0895d21a1992Mercedes
e0dc0aed1991BMW
57647bff2008Volkswagen
51b6d8411962Renault
5a72fe381973Volkswagen
453654b21995Audi
cbc61b4a1980Fiat
862511291977Audi
4594fc621990Honda
<h:form id="form">
    <p:remoteCommand name="treeToTable" actionListener="#{columnManagerView.treeToTable}" update="tree cars" oncomplete="initDND()"/>
    <p:remoteCommand name="tableToTree" actionListener="#{columnManagerView.tableToTree}" update="tree cars" oncomplete="initDND()"/>

    <p:tree id="tree" value="#{columnManagerView.availableColumns}" var="column" style="margin-bottom:20px">
        <p:treeNode>
            <h:outputText value="#{column}" />
        </p:treeNode>

        <p:treeNode type="column" icon="ui-icon-grip-dotted-vertical">
            <h:outputText value="#{column.property}" />
        </p:treeNode>
    </p:tree>

    <p:dataTable id="cars" var="car" value="#{columnManagerView.cars}">                    
        <p:columns value="#{columnManagerView.columns}" var="column">
            <f:facet name="header">
                <h:outputText style="float:left;display:block;height:20px;width:10px;border:0 none;" styleClass="droppoint dropleft" />                           
                <h:outputText style="float:right;display:block;height:20px;width:10px;border:0 none;" styleClass="droppoint dropright" />
                <h:outputText value="#{column.header}" />
            </f:facet>

            <h:outputText value="#{car[column.property]}" />
        </p:columns>
    </p:dataTable>
</h:form>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.1.4 on Mojarra-2.2.10.