General
Support
Resources
Theming
Accessiblity
PrimeBlocks
PrimeFlex
PrimeIcons
UI KIT
Ajax Framework
Introduction
Process
PartialSubmit
Selector
Search
Validation
RemoteCommand
Observer
Poll
Fragment
Status
Lifecycle
Dropdown
Form
AutoComplete
CascadeSelect
Chips
Inplace
InputGroup
InputMask
InputNumber
InputText
InputTextArea
KeyFilter
Keyboard
Knob
MultiSelectListBox
Password
Rating
SelectBooleanButton
SelectBooleanCheckbox
SelectOneButton
SelectOneRadio
SelectCheckboxMenu
SelectOneMenu
SelectOneListbox
SelectManyButton
SelectManyMenu
SelectManyCheckbox
Signature
Slider
Spinner
TextEditor
ToggleSwitch
TriStateCheckbox
Button
Data
Panel
Accordion
Card
Dashboard
Divider
Fieldset
NotificationBar
OutputPanel
Panel
PanelGrid
Splitter
ScrollPanel
TabView
Toolbar
Wizard
Overlay
Menu
Chart
BarNew
BubbleNew
DoughnutNew
LineNew
PieNew
ScatterNew
PolarAreaNew
RadarNew
CustomNew
FacetNew
ExportNew
Charts
BarDeprecated
BubbleDeprecated
DonutDeprecated
LineDeprecated
PieDeprecated
ScatterDeprecated
PolarAreaDeprecated
RadarDeprecated
MixedDeprecated
InteractiveDeprecated
ExportDeprecated
Messages
Multimedia
File
DragDrop
Client Side Validation
Dialog Framework
Misc
TreeTable Multi View State
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>
@Named("ttMultiViewStateView")
@ViewScoped
public class MultiViewStateView implements Serializable {
private TreeNode<Document> root;
@Inject
private DocumentService service;
@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));
}
}
@Named
@ApplicationScoped
public class DocumentService {
public TreeNode<Document> createDocuments() {
TreeNode<Document> root = new DefaultTreeNode(new Document("Files", "-", "Folder"), null);
TreeNode applications = new DefaultTreeNode(new Document("Applications", "100kb", "Folder"), root);
TreeNode cloud = new DefaultTreeNode(new Document("Cloud", "20kb", "Folder"), root);
TreeNode desktop = new DefaultTreeNode(new Document("Desktop", "150kb", "Folder"), root);
TreeNode documents = new DefaultTreeNode(new Document("Documents", "75kb", "Folder"), root);
TreeNode downloads = new DefaultTreeNode(new Document("Downloads", "25kb", "Folder"), root);
TreeNode main = new DefaultTreeNode(new Document("Main", "50kb", "Folder"), root);
TreeNode other = new DefaultTreeNode(new Document("Other", "5kb", "Folder"), root);
TreeNode pictures = new DefaultTreeNode(new Document("Pictures", "150kb", "Folder"), root);
TreeNode videos = new DefaultTreeNode(new Document("Videos", "1500kb", "Folder"), root);
//Applications
TreeNode primeface = new DefaultTreeNode(new Document("Primefaces", "25kb", "Folder"), applications);
TreeNode primefacesapp = new DefaultTreeNode("app", new Document("primefaces.app", "10kb", "Application"), primeface);
TreeNode nativeapp = new DefaultTreeNode("app", new Document("native.app", "10kb", "Application"), primeface);
TreeNode mobileapp = new DefaultTreeNode("app", new Document("mobile.app", "5kb", "Application"), primeface);
TreeNode editorapp = new DefaultTreeNode("app", new Document("editor.app", "25kb", "Application"), applications);
TreeNode settingsapp = new DefaultTreeNode("app", new Document("settings.app", "50kb", "Application"), applications);
//Cloud
TreeNode backup1 = new DefaultTreeNode("document", new Document("backup-1.zip", "10kb", "Zip"), cloud);
TreeNode backup2 = new DefaultTreeNode("document", new Document("backup-2.zip", "10kb", "Zip"), cloud);
//Desktop
TreeNode note1 = new DefaultTreeNode("document", new Document("note-meeting.txt", "50kb", "Text"), desktop);
TreeNode note2 = new DefaultTreeNode("document", new Document("note-todo.txt", "100kb", "Text"), desktop);
//Documents
TreeNode work = new DefaultTreeNode(new Document("Work", "55kb", "Folder"), documents);
TreeNode expenses = new DefaultTreeNode("document", new Document("Expenses.doc", "30kb", "Document"), work);
TreeNode resume = new DefaultTreeNode("document", new Document("Resume.doc", "25kb", "Resume"), work);
TreeNode home = new DefaultTreeNode(new Document("Home", "20kb", "Folder"), documents);
TreeNode invoices = new DefaultTreeNode("excel", new Document("Invoice.xsl", "20kb", "Excel"), home);
//Downloads
TreeNode spanish = new DefaultTreeNode(new Document("Spanish", "10kb", "Folder"), downloads);
TreeNode tutorial1 = new DefaultTreeNode("document", new Document("tutorial-a1.txt", "5kb", "Text"), spanish);
TreeNode tutorial2 = new DefaultTreeNode("document", new Document("tutorial-a2.txt", "5kb", "Text"), spanish);
TreeNode travel = new DefaultTreeNode(new Document("Travel", "15kb", "Folder"), downloads);
TreeNode hotelpdf = new DefaultTreeNode("travel", new Document("Hotel.pdf", "10kb", "PDF"), travel);
TreeNode flightpdf = new DefaultTreeNode("travel", new Document("Flight.pdf", "5kb", "PDF"), travel);
//Main
TreeNode bin = new DefaultTreeNode("document", new Document("bin", "50kb", "Link"), main);
TreeNode etc = new DefaultTreeNode("document", new Document("etc", "100kb", "Link"), main);
TreeNode var = new DefaultTreeNode("document", new Document("var", "100kb", "Link"), main);
//Other
TreeNode todotxt = new DefaultTreeNode("document", new Document("todo.txt", "3kb", "Text"), other);
TreeNode logopng = new DefaultTreeNode("picture", new Document("logo.png", "2kb", "Picture"), other);
//Pictures
TreeNode barcelona = new DefaultTreeNode("picture", new Document("barcelona.jpg", "90kb", "Picture"), pictures);
TreeNode primeng = new DefaultTreeNode("picture", new Document("primefaces.png", "30kb", "Picture"), pictures);
TreeNode prime = new DefaultTreeNode("picture", new Document("prime.jpg", "30kb", "Picture"), pictures);
//Videos
TreeNode primefacesmkv = new DefaultTreeNode("video", new Document("primefaces.mkv", "1000kb", "Video"), videos);
TreeNode 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 applications = new CheckboxTreeNode(new Document("Applications", "100kb", "Folder"), root);
TreeNode cloud = new CheckboxTreeNode(new Document("Cloud", "20kb", "Folder"), root);
TreeNode desktop = new CheckboxTreeNode(new Document("Desktop", "150kb", "Folder"), root);
TreeNode documents = new CheckboxTreeNode(new Document("Documents", "75kb", "Folder"), root);
TreeNode downloads = new CheckboxTreeNode(new Document("Downloads", "25kb", "Folder"), root);
TreeNode main = new CheckboxTreeNode(new Document("Main", "50kb", "Folder"), root);
TreeNode other = new CheckboxTreeNode(new Document("Other", "5kb", "Folder"), root);
TreeNode pictures = new CheckboxTreeNode(new Document("Pictures", "150kb", "Folder"), root);
TreeNode videos = new CheckboxTreeNode(new Document("Videos", "1500kb", "Folder"), root);
//Applications
TreeNode primeface = new CheckboxTreeNode(new Document("Primefaces", "25kb", "Folder"), applications);
TreeNode primefacesapp = new CheckboxTreeNode("app", new Document("primefaces.app", "10kb", "Application"), primeface);
TreeNode nativeapp = new CheckboxTreeNode("app", new Document("native.app", "10kb", "Application"), primeface);
TreeNode mobileapp = new CheckboxTreeNode("app", new Document("mobile.app", "5kb", "Application"), primeface);
TreeNode editorapp = new CheckboxTreeNode("app", new Document("editor.app", "25kb", "Application"), applications);
TreeNode settingsapp = new CheckboxTreeNode("app", new Document("settings.app", "50kb", "Application"), applications);
//Cloud
TreeNode backup1 = new CheckboxTreeNode("document", new Document("backup-1.zip", "10kb", "Zip"), cloud);
TreeNode backup2 = new CheckboxTreeNode("document", new Document("backup-2.zip", "10kb", "Zip"), cloud);
//Desktop
TreeNode note1 = new CheckboxTreeNode("document", new Document("note-meeting.txt", "50kb", "Text"), desktop);
TreeNode note2 = new CheckboxTreeNode("document", new Document("note-todo.txt", "100kb", "Text"), desktop);
//Documents
TreeNode work = new CheckboxTreeNode(new Document("Work", "55kb", "Folder"), documents);
TreeNode expenses = new CheckboxTreeNode("document", new Document("Expenses.doc", "30kb", "Document"), work);
TreeNode resume = new CheckboxTreeNode("document", new Document("Resume.doc", "25kb", "Resume"), work);
TreeNode home = new CheckboxTreeNode(new Document("Home", "20kb", "Folder"), documents);
TreeNode invoices = new CheckboxTreeNode("excel", new Document("Invoice.xsl", "20kb", "Excel"), home);
//Downloads
TreeNode spanish = new CheckboxTreeNode(new Document("Spanish", "10kb", "Folder"), downloads);
TreeNode tutorial1 = new CheckboxTreeNode("document", new Document("tutorial-a1.txt", "5kb", "Text"), spanish);
TreeNode tutorial2 = new CheckboxTreeNode("document", new Document("tutorial-a2.txt", "5kb", "Text"), spanish);
TreeNode travel = new CheckboxTreeNode(new Document("Travel", "15kb", "Folder"), downloads);
TreeNode hotelpdf = new CheckboxTreeNode("travel", new Document("Hotel.pdf", "10kb", "PDF"), travel);
TreeNode flightpdf = new CheckboxTreeNode("travel", new Document("Flight.pdf", "5kb", "PDF"), travel);
//Main
TreeNode bin = new CheckboxTreeNode("document", new Document("bin", "50kb", "Link"), main);
TreeNode etc = new CheckboxTreeNode("document", new Document("etc", "100kb", "Link"), main);
TreeNode var = new CheckboxTreeNode("document", new Document("var", "100kb", "Link"), main);
//Other
TreeNode todotxt = new CheckboxTreeNode("document", new Document("todo.txt", "3kb", "Text"), other);
TreeNode logopng = new CheckboxTreeNode("picture", new Document("logo.png", "2kb", "Picture"), other);
//Pictures
TreeNode barcelona = new CheckboxTreeNode("picture", new Document("barcelona.jpg", "90kb", "Picture"), pictures);
TreeNode primeng = new CheckboxTreeNode("picture", new Document("primefaces.png", "30kb", "Picture"), pictures);
TreeNode prime = new CheckboxTreeNode("picture", new Document("prime.jpg", "30kb", "Picture"), pictures);
//Videos
TreeNode primefacesmkv = new CheckboxTreeNode("video", new Document("primefaces.mkv", "1000kb", "Video"), videos);
TreeNode introavi = new CheckboxTreeNode("video", new Document("intro.avi", "500kb", "Video"), videos);
return root;
}
}
PrimeFaces v14.0.0 by
PrimeTek