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
4933c8412000Audi
4c637acb1983Renault
ea21231e1977Volkswagen
9eac1c5b1991Honda
178060381985Volkswagen
e4bea1001974Ford
9dfbba441985Fiat
22bbea041981Renault
8d8c0b7c1964Ford
<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.2-SNAPSHOT on Mojarra-2.3.2.