TreeTable - Selection

Tree provides three selection modes, "single", "multiple" and "checkbox" in addition to the regular column based selection.

Documentation

Single

Name	Size	Type
Documents	-	Folder
Pictures	-	Folder
Movies	-	Folder

Multiple with metakey

Name	Size	Type
Documents	-	Folder
Pictures	-	Folder
Movies	-	Folder

Checkbox

Name	Size	Type
Documents	-	Folder
Pictures	-	Folder
Movies	-	Folder

<style type="text/css">
    .ui-treetable {
        margin-top: 40px
    }
    .ui-treetable table {
        table-layout: fixed
    }
    
    body .ui-button {
        margin: 10px 0 0 0;
    }
</style>


<h:form>
    <p:growl id="msgs" showDetail="true" escape="false"/>
    
    <p:treeTable value="#{ttSelectionView.root1}" var="document" selectionMode="single" selection="#{ttSelectionView.selectedNode}" style="margin-top:0">
        <f:facet name="header">
            Single
        </f:facet>
        <p:column headerText="Name">
            <h:outputText value="#{document.name}" />
        </p:column>
        <p:column headerText="Size">
            <h:outputText value="#{document.size}" />
        </p:column>
        <p:column headerText="Type">
            <h:outputText value="#{document.type}" />
        </p:column>
    </p:treeTable>
    
    <p:commandButton value="Display" update="msgs" icon="pi pi-clone"
action="#{ttSelectionView.displaySelectedSingle}"/>
    
    <p:treeTable value="#{ttSelectionView.root2}" var="document" selectionMode="multiple" selection="#{ttSelectionView.selectedNodes1}">
        <f:facet name="header">
            Multiple with metakey
        </f:facet>
        <p:column headerText="Name">
            <h:outputText value="#{document.name}" />
        </p:column>
        <p:column headerText="Size">
            <h:outputText value="#{document.size}" />
        </p:column>
        <p:column headerText="Type">
            <h:outputText value="#{document.type}" />
        </p:column>
    </p:treeTable>
    
    <p:commandButton value="Display" update="msgs" icon="pi pi-clone"
                     action="#{ttSelectionView.displaySelectedMultiple(ttSelectionView.selectedNodes1)}"/>
    
    <p:treeTable value="#{ttSelectionView.root3}" var="document" selectionMode="checkbox" selection="#{ttSelectionView.selectedNodes2}">
        <f:facet name="header">
            Checkbox
        </f:facet>
        <p:column headerText="Name">
            <h:outputText value="#{document.name}" />
        </p:column>
        <p:column headerText="Size">
            <h:outputText value="#{document.size}" />
        </p:column>
        <p:column headerText="Type">
            <h:outputText value="#{document.type}" />
        </p:column>
    </p:treeTable>
    
    <p:commandButton value="Display" update="msgs" icon="pi pi-clone"
action="#{ttSelectionView.displaySelectedMultiple(ttSelectionView.selectedNodes2)}"/>
</h:form>

@Named("ttSelectionView")
@ViewScoped
public class SelectionView implements Serializable {
    
    private TreeNode root1;
    private TreeNode root2;
    private TreeNode root3;
    private TreeNode selectedNode;
    private TreeNode[] selectedNodes1;
    private TreeNode[] selectedNodes2;
    
    @Inject
    private DocumentService service;
    
    @PostConstruct
    public void init() {
        root1 = service.createDocuments();
        root2 = service.createDocuments();
        root3 = service.createCheckboxDocuments();
    }

    public TreeNode getRoot1() {
        return root1;
    }

    public TreeNode getRoot2() {
        return root2;
    }

    public TreeNode getRoot3() {
        return root3;
    }

    public TreeNode getSelectedNode() {
        return selectedNode;
    }

    public void setSelectedNode(TreeNode selectedNode) {
        this.selectedNode = selectedNode;
    }

    public TreeNode[] getSelectedNodes1() {
        return selectedNodes1;
    }

    public void setSelectedNodes1(TreeNode[] selectedNodes1) {
        this.selectedNodes1 = selectedNodes1;
    }

    public TreeNode[] getSelectedNodes2() {
        return selectedNodes2;
    }

    public void setSelectedNodes2(TreeNode[] selectedNodes2) {
        this.selectedNodes2 = selectedNodes2;
    }

    public void setService(DocumentService service) {
        this.service = service;
    }

    public void displaySelectedSingle() {
        if(selectedNode != null) {
            FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Selected", selectedNode.getData().toString());
            FacesContext.getCurrentInstance().addMessage(null, message);
        }
	}
    
    public void displaySelectedMultiple(TreeNode[] nodes) {
        if(nodes != null && nodes.length > 0) {
            StringBuilder builder = new StringBuilder();

            for(TreeNode node : nodes) {
                builder.append(node.getData().toString());
                builder.append("<br />");
            }

            FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Selected", builder.toString());
            FacesContext.getCurrentInstance().addMessage(null, message);
        }
	}
}

@Named
@ApplicationScoped
public class DocumentService {
    
    public TreeNode createDocuments() {
        TreeNode root = new DefaultTreeNode(new Document("Files", "-", "Folder"), null);
		
		TreeNode documents = new DefaultTreeNode(new Document("Documents", "-", "Folder"), root);
		TreeNode pictures = new DefaultTreeNode(new Document("Pictures", "-", "Folder"), root);
		TreeNode movies = new DefaultTreeNode(new Document("Movies", "-", "Folder"), root);
		
		TreeNode work = new DefaultTreeNode(new Document("Work", "-", "Folder"), documents);
		TreeNode primefaces = new DefaultTreeNode(new Document("PrimeFaces", "-", "Folder"), documents);
		
		//Documents
		TreeNode expenses = new DefaultTreeNode("document", new Document("Expenses.doc", "30 KB", "Word Document"), work);
		TreeNode resume = new DefaultTreeNode("document", new Document("Resume.doc", "10 KB", "Word Document"), work);
		TreeNode refdoc = new DefaultTreeNode("document", new Document("RefDoc.pages", "40 KB", "Pages Document"), primefaces);
		
		//Pictures
		TreeNode barca = new DefaultTreeNode("picture", new Document("barcelona.jpg", "30 KB", "JPEG Image"), pictures);
		TreeNode primelogo = new DefaultTreeNode("picture", new Document("logo.jpg", "45 KB", "JPEG Image"), pictures);
		TreeNode optimus = new DefaultTreeNode("picture", new Document("optimusprime.png", "96 KB", "PNG Image"), pictures);
		
		//Movies
		TreeNode pacino = new DefaultTreeNode(new Document("Al Pacino", "-", "Folder"), movies);
		TreeNode deniro = new DefaultTreeNode(new Document("Robert De Niro", "-", "Folder"), movies);
		
		TreeNode scarface = new DefaultTreeNode("mp3", new Document("Scarface", "15 GB", "Movie File"), pacino);
		TreeNode carlitosWay = new DefaultTreeNode("mp3", new Document("Carlitos' Way", "24 GB", "Movie File"), pacino);
		
		TreeNode goodfellas = new DefaultTreeNode("mp3", new Document("Goodfellas", "23 GB", "Movie File"), deniro);
		TreeNode untouchables = new DefaultTreeNode("mp3", new Document("Untouchables", "17 GB", "Movie File"), deniro);
        
        return root;
    }
    
    public TreeNode createCheckboxDocuments() {
        TreeNode root = new CheckboxTreeNode(new Document("Files", "-", "Folder"), null);
		
		TreeNode documents = new CheckboxTreeNode(new Document("Documents", "-", "Folder"), root);
		TreeNode pictures = new CheckboxTreeNode(new Document("Pictures", "-", "Folder"), root);
		TreeNode movies = new CheckboxTreeNode(new Document("Movies", "-", "Folder"), root);
		
		TreeNode work = new CheckboxTreeNode(new Document("Work", "-", "Folder"), documents);
		TreeNode primefaces = new CheckboxTreeNode(new Document("PrimeFaces", "-", "Folder"), documents);
		
		//Documents
		TreeNode expenses = new CheckboxTreeNode("document", new Document("Expenses.doc", "30 KB", "Word Document"), work);
		TreeNode resume = new CheckboxTreeNode("document", new Document("Resume.doc", "10 KB", "Word Document"), work);
		TreeNode refdoc = new CheckboxTreeNode("document", new Document("RefDoc.pages", "40 KB", "Pages Document"), primefaces);
		
		//Pictures
		TreeNode barca = new CheckboxTreeNode("picture", new Document("barcelona.jpg", "30 KB", "JPEG Image"), pictures);
		TreeNode primelogo = new CheckboxTreeNode("picture", new Document("logo.jpg", "45 KB", "JPEG Image"), pictures);
		TreeNode optimus = new CheckboxTreeNode("picture", new Document("optimusprime.png", "96 KB", "PNG Image"), pictures);
		
		//Movies
		TreeNode pacino = new CheckboxTreeNode(new Document("Al Pacino", "-", "Folder"), movies);
		TreeNode deniro = new CheckboxTreeNode(new Document("Robert De Niro", "-", "Folder"), movies);
		
		TreeNode scarface = new CheckboxTreeNode("mp3", new Document("Scarface", "15 GB", "Movie File"), pacino);
		TreeNode carlitosWay = new CheckboxTreeNode("mp3", new Document("Carlitos' Way", "24 GB", "Movie File"), pacino);
		
		TreeNode goodfellas = new CheckboxTreeNode("mp3", new Document("Goodfellas", "23 GB", "Movie File"), deniro);
		TreeNode untouchables = new CheckboxTreeNode("mp3", new Document("Untouchables", "17 GB", "Movie File"), deniro);
        
        return root;
    }
}

TreeTable - Selection

FREE THEMES

PREMIUM TEMPLATES