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
b48e7c2c1988BMW
3a8e2c691990Volkswagen
4855d7161997Fiat
482a0aa81966BMW
0d588e6d1967Volkswagen
0ca55cb21992Mercedes
19defa812000Volvo
556f905c1986BMW
0024fdf51961Honda
<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.