MultiViewState (MVS) feature enables TreeTable to maintain its state across pages by setting multiViewState attribute to true. In this demo, manipulate TreeTable with pagination, sorting, filtering and selection, then visit another page and then come back to this page. TreeTable state should remain as you've left it.
<div class="card">
<h:form>
<p:messages id="messages"/>
<p:commandButton value="Clear MultiViewState" action="#{ttMultiViewStateView.clearMultiViewState}"
update="@form" styleClass="mb-3" />
<p:treeTable widgetVar="treeTable" value="#{ttMultiViewStateView.root}" var="document"
styleClass="ui-fluid" multiViewState="true">
<p:column headerText="Name" filterBy="#{document.name}" filterMatchMode="contains"
sortBy="#{document.name}">
<h:outputText value="#{document.name}"/>
</p:column>
<p:column headerText="Size">
<h:outputText value="#{document.size}"/>
</p:column>
<p:column headerText="Type" filterBy="#{document.type}" filterMatchMode="exact"
sortBy="#{document.type}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('treeTable').filter()" styleClass="custom-filter">
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true"/>
<f:selectItem itemLabel="Folder" itemValue="Folder"/>
<f:selectItem itemLabel="Application" itemValue="Application"/>
<f:selectItem itemLabel="Zip" itemValue="Zip"/>
<f:selectItem itemLabel="Text" itemValue="Text"/>
<f:selectItem itemLabel="PDF" itemValue="PDF"/>
<f:selectItem itemLabel="Picture" itemValue="Picture"/>
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{document.type}"/>
</p:column>
</p:treeTable>
</h:form>
</div>
package org.primefaces.showcase.view.data.treetable;
import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Inject;
import jakarta.inject.Named;
import java.io.Serializable;
import io.quarkus.runtime.annotations.RegisterForReflection;
import org.primefaces.PrimeFaces;
import org.primefaces.model.TreeNode;
import org.primefaces.showcase.domain.Document;
import org.primefaces.showcase.service.DocumentService;
@Named("ttMultiViewStateView")
@ViewScoped
@RegisterForReflection(serialization = true)
public class MultiViewStateView implements Serializable {
@Inject
DocumentService service;
private TreeNode<Document> root;
@PostConstruct
public void init() {
root = service.createDocuments();
}
public TreeNode<Document> getRoot() {
return root;
}
public void setService(DocumentService service) {
this.service = service;
}
public void clearMultiViewState() {
FacesContext context = FacesContext.getCurrentInstance();
String viewId = context.getViewRoot().getViewId();
PrimeFaces.current().multiViewState().clearAll(viewId, true, (clientId) -> {
showMessage(clientId);
});
}
private void showMessage(String clientId) {
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, clientId + " multiview state has been cleared out", null));
}
public void someAction(Document document) {
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, "Action on " + document.getName(), null));
}
}
package org.primefaces.showcase.service;
import jakarta.enterprise.context.ApplicationScoped;
import jakarta.inject.Named;
import org.primefaces.model.CheckboxTreeNode;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;
import org.primefaces.showcase.domain.Document;
@Named
@ApplicationScoped
public class DocumentService {
public TreeNode<Document> createDocuments() {
TreeNode<Document> root = new DefaultTreeNode<>(new Document("Files", "-", "Folder"), null);
TreeNode<Document> applications = new DefaultTreeNode<>(new Document("Applications", "100kb", "Folder"), root);
TreeNode<Document> cloud = new DefaultTreeNode<>(new Document("Cloud", "20kb", "Folder"), root);
TreeNode<Document> desktop = new DefaultTreeNode<>(new Document("Desktop", "150kb", "Folder"), root);
TreeNode<Document> documents = new DefaultTreeNode<>(new Document("Documents", "75kb", "Folder"), root);
TreeNode<Document> downloads = new DefaultTreeNode<>(new Document("Downloads", "25kb", "Folder"), root);
TreeNode<Document> main = new DefaultTreeNode<>(new Document("Main", "50kb", "Folder"), root);
TreeNode<Document> other = new DefaultTreeNode<>(new Document("Other", "5kb", "Folder"), root);
TreeNode<Document> pictures = new DefaultTreeNode<>(new Document("Pictures", "150kb", "Folder"), root);
TreeNode<Document> videos = new DefaultTreeNode<>(new Document("Videos", "1500kb", "Folder"), root);
//Applications
TreeNode<Document> primeface = new DefaultTreeNode<>(new Document("Primefaces", "25kb", "Folder"), applications);
TreeNode<Document> primefacesapp = new DefaultTreeNode<>("app", new Document("primefaces.app", "10kb", "Application"), primeface);
TreeNode<Document> nativeapp = new DefaultTreeNode<>("app", new Document("native.app", "10kb", "Application"), primeface);
TreeNode<Document> mobileapp = new DefaultTreeNode<>("app", new Document("mobile.app", "5kb", "Application"), primeface);
TreeNode<Document> editorapp = new DefaultTreeNode<>("app", new Document("editor.app", "25kb", "Application"), applications);
TreeNode<Document> settingsapp = new DefaultTreeNode<>("app", new Document("settings.app", "50kb", "Application"), applications);
//Cloud
TreeNode<Document> backup1 = new DefaultTreeNode<>("document", new Document("backup-1.zip", "10kb", "Zip"), cloud);
TreeNode<Document> backup2 = new DefaultTreeNode<>("document", new Document("backup-2.zip", "10kb", "Zip"), cloud);
//Desktop
TreeNode<Document> note1 = new DefaultTreeNode<>("document", new Document("note-meeting.txt", "50kb", "Text"), desktop);
TreeNode<Document> note2 = new DefaultTreeNode<>("document", new Document("note-todo.txt", "100kb", "Text"), desktop);
//Documents
TreeNode<Document> work = new DefaultTreeNode<>(new Document("Work", "55kb", "Folder"), documents);
TreeNode<Document> expenses = new DefaultTreeNode<>("document", new Document("Expenses.doc", "30kb", "Document"), work);
TreeNode<Document> resume = new DefaultTreeNode<>("document", new Document("Resume.doc", "25kb", "Resume"), work);
TreeNode<Document> home = new DefaultTreeNode<>(new Document("Home", "20kb", "Folder"), documents);
TreeNode<Document> invoices = new DefaultTreeNode<>("excel", new Document("Invoice.xsl", "20kb", "Excel"), home);
//Downloads
TreeNode<Document> spanish = new DefaultTreeNode<>(new Document("Spanish", "10kb", "Folder"), downloads);
TreeNode<Document> tutorial1 = new DefaultTreeNode<>("document", new Document("tutorial-a1.txt", "5kb", "Text"), spanish);
TreeNode<Document> tutorial2 = new DefaultTreeNode<>("document", new Document("tutorial-a2.txt", "5kb", "Text"), spanish);
TreeNode<Document> travel = new DefaultTreeNode<>(new Document("Travel", "15kb", "Folder"), downloads);
TreeNode<Document> hotelpdf = new DefaultTreeNode<>("travel", new Document("Hotel.pdf", "10kb", "PDF"), travel);
TreeNode<Document> flightpdf = new DefaultTreeNode<>("travel", new Document("Flight.pdf", "5kb", "PDF"), travel);
//Main
TreeNode<Document> bin = new DefaultTreeNode<>("document", new Document("bin", "50kb", "Link"), main);
TreeNode<Document> etc = new DefaultTreeNode<>("document", new Document("etc", "100kb", "Link"), main);
TreeNode<Document> var = new DefaultTreeNode<>("document", new Document("var", "100kb", "Link"), main);
//Other
TreeNode<Document> todotxt = new DefaultTreeNode<>("document", new Document("todo.txt", "3kb", "Text"), other);
TreeNode<Document> logopng = new DefaultTreeNode<>("picture", new Document("logo.png", "2kb", "Picture"), other);
//Pictures
TreeNode<Document> barcelona = new DefaultTreeNode<>("picture", new Document("barcelona.jpg", "90kb", "Picture"), pictures);
TreeNode<Document> primeng = new DefaultTreeNode<>("picture", new Document("primefaces.png", "30kb", "Picture"), pictures);
TreeNode<Document> prime = new DefaultTreeNode<>("picture", new Document("prime.jpg", "30kb", "Picture"), pictures);
//Videos
TreeNode<Document> primefacesmkv = new DefaultTreeNode<>("video", new Document("primefaces.mkv", "1000kb", "Video"), videos);
TreeNode<Document> introavi = new DefaultTreeNode<>("video", new Document("intro.avi", "500kb", "Video"), videos);
return root;
}
public TreeNode<Document> createCheckboxDocuments() {
TreeNode<Document> root = new CheckboxTreeNode<>(new Document("Files", "-", "Folder"), null);
TreeNode<Document> applications = new CheckboxTreeNode<>(new Document("Applications", "100kb", "Folder"), root);
TreeNode<Document> cloud = new CheckboxTreeNode<>(new Document("Cloud", "20kb", "Folder"), root);
TreeNode<Document> desktop = new CheckboxTreeNode<>(new Document("Desktop", "150kb", "Folder"), root);
TreeNode<Document> documents = new CheckboxTreeNode<>(new Document("Documents", "75kb", "Folder"), root);
TreeNode<Document> downloads = new CheckboxTreeNode<>(new Document("Downloads", "25kb", "Folder"), root);
TreeNode<Document> main = new CheckboxTreeNode<>(new Document("Main", "50kb", "Folder"), root);
TreeNode<Document> other = new CheckboxTreeNode<>(new Document("Other", "5kb", "Folder"), root);
TreeNode<Document> pictures = new CheckboxTreeNode<>(new Document("Pictures", "150kb", "Folder"), root);
TreeNode<Document> videos = new CheckboxTreeNode<>(new Document("Videos", "1500kb", "Folder"), root);
//Applications
TreeNode<Document> primeface = new CheckboxTreeNode<>(new Document("Primefaces", "25kb", "Folder"), applications);
TreeNode<Document> primefacesapp = new CheckboxTreeNode<>("app", new Document("primefaces.app", "10kb", "Application"), primeface);
TreeNode<Document> nativeapp = new CheckboxTreeNode<>("app", new Document("native.app", "10kb", "Application"), primeface);
TreeNode<Document> mobileapp = new CheckboxTreeNode<>("app", new Document("mobile.app", "5kb", "Application"), primeface);
TreeNode<Document> editorapp = new CheckboxTreeNode<>("app", new Document("editor.app", "25kb", "Application"), applications);
TreeNode<Document> settingsapp = new CheckboxTreeNode<>("app", new Document("settings.app", "50kb", "Application"), applications);
//Cloud
TreeNode<Document> backup1 = new CheckboxTreeNode<>("document", new Document("backup-1.zip", "10kb", "Zip"), cloud);
TreeNode<Document> backup2 = new CheckboxTreeNode<>("document", new Document("backup-2.zip", "10kb", "Zip"), cloud);
//Desktop
TreeNode<Document> note1 = new CheckboxTreeNode<>("document", new Document("note-meeting.txt", "50kb", "Text"), desktop);
TreeNode<Document> note2 = new CheckboxTreeNode<>("document", new Document("note-todo.txt", "100kb", "Text"), desktop);
//Documents
TreeNode<Document> work = new CheckboxTreeNode<>(new Document("Work", "55kb", "Folder"), documents);
TreeNode<Document> expenses = new CheckboxTreeNode<>("document", new Document("Expenses.doc", "30kb", "Document"), work);
TreeNode<Document> resume = new CheckboxTreeNode<>("document", new Document("Resume.doc", "25kb", "Resume"), work);
TreeNode<Document> home = new CheckboxTreeNode<>(new Document("Home", "20kb", "Folder"), documents);
TreeNode<Document> invoices = new CheckboxTreeNode<>("excel", new Document("Invoice.xsl", "20kb", "Excel"), home);
//Downloads
TreeNode<Document> spanish = new CheckboxTreeNode<>(new Document("Spanish", "10kb", "Folder"), downloads);
TreeNode<Document> tutorial1 = new CheckboxTreeNode<>("document", new Document("tutorial-a1.txt", "5kb", "Text"), spanish);
TreeNode<Document> tutorial2 = new CheckboxTreeNode<>("document", new Document("tutorial-a2.txt", "5kb", "Text"), spanish);
TreeNode<Document> travel = new CheckboxTreeNode<>(new Document("Travel", "15kb", "Folder"), downloads);
TreeNode<Document> hotelpdf = new CheckboxTreeNode<>("travel", new Document("Hotel.pdf", "10kb", "PDF"), travel);
TreeNode<Document> flightpdf = new CheckboxTreeNode<>("travel", new Document("Flight.pdf", "5kb", "PDF"), travel);
//Main
TreeNode<Document> bin = new CheckboxTreeNode<>("document", new Document("bin", "50kb", "Link"), main);
TreeNode<Document> etc = new CheckboxTreeNode<>("document", new Document("etc", "100kb", "Link"), main);
TreeNode<Document> var = new CheckboxTreeNode<>("document", new Document("var", "100kb", "Link"), main);
//Other
TreeNode<Document> todotxt = new CheckboxTreeNode<>("document", new Document("todo.txt", "3kb", "Text"), other);
TreeNode<Document> logopng = new CheckboxTreeNode<>("picture", new Document("logo.png", "2kb", "Picture"), other);
//Pictures
TreeNode<Document> barcelona = new CheckboxTreeNode<>("picture", new Document("barcelona.jpg", "90kb", "Picture"), pictures);
TreeNode<Document> primeng = new CheckboxTreeNode<>("picture", new Document("primefaces.png", "30kb", "Picture"), pictures);
TreeNode<Document> prime = new CheckboxTreeNode<>("picture", new Document("prime.jpg", "30kb", "Picture"), pictures);
//Videos
TreeNode<Document> primefacesmkv = new CheckboxTreeNode<>("video", new Document("primefaces.mkv", "1000kb", "Video"), videos);
TreeNode<Document> introavi = new CheckboxTreeNode<>("video", new Document("intro.avi", "500kb", "Video"), videos);
return root;
}
}
package org.primefaces.showcase.domain;
import java.io.Serializable;
import io.quarkus.runtime.annotations.RegisterForReflection;
@RegisterForReflection
public class Document implements Serializable, Comparable<Document> {
private String name;
private String size;
private String type;
public Document(String name, String size, String type) {
this.name = name;
this.size = size;
this.type = type;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSize() {
return size;
}
public void setSize(String size) {
this.size = size;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
//Eclipse Generated hashCode and equals
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + ((name == null) ? 0 : name.hashCode());
result = prime * result + ((size == null) ? 0 : size.hashCode());
result = prime * result + ((type == null) ? 0 : type.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj) {
return true;
}
if (obj == null) {
return false;
}
if (getClass() != obj.getClass()) {
return false;
}
Document other = (Document) obj;
if (name == null) {
if (other.name != null) {
return false;
}
} else if (!name.equals(other.name)) {
return false;
}
if (size == null) {
if (other.size != null) {
return false;
}
} else if (!size.equals(other.size)) {
return false;
}
if (type == null) {
return other.type == null;
} else return type.equals(other.type);
}
@Override
public String toString() {
return name;
}
public int compareTo(Document document) {
return this.getName().compareTo(document.getName());
}
}