MultiViewState feature enables DataView to maintain its state across pages by setting multiViewState attribute to true. In this demo, use pagination or change layout, then visit another page and then come back to this page. DataView state should remain as you've left it.
Documentation<style type="text/css"> /*demo*/ .ui-dataview-list .ui-dataview-row { border-bottom: 1px solid #A8A8A8; padding: 25px 10px; /* with the exported variables from Nova and Luna Themes*/ border-bottom-color: var(--input-border-color, #A8A8A8); } .logo { width: 5%; } .detail { width: 85%; padding-left: 25px; } </style> <h:form id="form"> <p:messages id="messages" /> <p:commandButton value="Clear multiViewSate" action="#{dataGridView.clearMultiViewState}" update="@form"/> <br/><br/> <p:dataView var="car" value="#{dataGridView.cars}" multiViewState="true" rows="12" paginator="true" rowsPerPageTemplate="6,12,16" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" gridIcon="pi pi-th-large" listIcon="pi pi-bars"> <p:dataViewGridItem> <p:panel header="#{car.id}" style="text-align:center"> <h:panelGrid columns="1" style="width:100%"> <p:graphicImage name="demo/images/car/#{car.brand}.gif"/> <h:outputText value="#{car.brand}" /> <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail"> <h:outputText styleClass="ui-icon pi pi-search" style="margin:0 auto;" /> <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" /> </p:commandLink> </h:panelGrid> </p:panel> </p:dataViewGridItem> <p:dataViewListItem> <h:panelGrid columns="3" style="width:100%" columnClasses="logo,detail"> <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> <p:outputPanel> <h:panelGrid columns="2" cellpadding="5"> <h:outputText value="Id:" /> <h:outputText value="#{car.id}" style="font-weight: bold"/> <h:outputText value="Year:" /> <h:outputText value="#{car.year}" style="font-weight: bold"/> <h:outputText value="Color:" /> <h:outputText value="#{car.color}" style="font-weight: bold"/> </h:panelGrid> </p:outputPanel> <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail"> <h:outputText styleClass="ui-icon pi pi-search" style="margin:0 auto;" /> <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" /> </p:commandLink> </h:panelGrid> </p:dataViewListItem> </p:dataView> <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false"> <p:outputPanel id="carDetail" style="text-align:center;"> <p:panelGrid columns="2" rendered="#{not empty dataGridView.selectedCar}" columnClasses="label,value"> <f:facet name="header"> <p:graphicImage name="demo/images/car/#{dataGridView.selectedCar.brand}-big.gif"/> </f:facet> <h:outputText value="Id:" /> <h:outputText value="#{dataGridView.selectedCar.id}" /> <h:outputText value="Year" /> <h:outputText value="#{dataGridView.selectedCar.year}" /> <h:outputText value="Color:" /> <h:outputText value="#{dataGridView.selectedCar.color}" style="color:#{dataGridView.selectedCar.color}"/> <h:outputText value="Price" /> <h:outputText value="$#{dataGridView.selectedCar.price}" /> </p:panelGrid> </p:outputPanel> </p:dialog> </h:form>
@Named @ViewScoped public class DataGridView implements Serializable { private List<Car> cars; private Car selectedCar; @Inject private CarService service; @PostConstruct public void init() { cars = service.createCars(48); } public List<Car> getCars() { return cars; } public void setService(CarService service) { this.service = service; } public Car getSelectedCar() { return selectedCar; } public void setSelectedCar(Car selectedCar) { this.selectedCar = selectedCar; } 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 class Car implements Serializable { public String id; public String brand; public int year; public String color; public int price; public boolean sold; public Car() {} public Car(String id, String brand, int year, String color) { this.id = id; this.brand = brand; this.year = year; this.color = color; } public Car(String id, String brand, int year, String color, int price, boolean sold) { this.id = id; this.brand = brand; this.year = year; this.color = color; this.price = price; this.sold = sold; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getBrand() { return brand; } public void setBrand(String brand) { this.brand = brand; } public int getYear() { return year; } public void setYear(int year) { this.year = year; } public String getColor() { return color; } public void setColor(String color) { this.color = color; } public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } public boolean isSold() { return sold; } public void setSold(boolean sold) { this.sold = sold; } @Override public int hashCode() { int hash = 7; hash = 59 * hash + (this.id != null ? this.id.hashCode() : 0); return hash; } @Override public boolean equals(Object obj) { if (obj == null) { return false; } if (getClass() != obj.getClass()) { return false; } final Car other = (Car) obj; if ((this.id == null) ? (other.id != null) : !this.id.equals(other.id)) { return false; } return true; } }
@Named @ApplicationScoped public class CarService { private final static String[] colors; private final static String[] brands; static { colors = new String[10]; colors[0] = "Black"; colors[1] = "White"; colors[2] = "Green"; colors[3] = "Red"; colors[4] = "Blue"; colors[5] = "Orange"; colors[6] = "Silver"; colors[7] = "Yellow"; colors[8] = "Brown"; colors[9] = "Maroon"; brands = new String[10]; brands[0] = "BMW"; brands[1] = "Mercedes"; brands[2] = "Volvo"; brands[3] = "Audi"; brands[4] = "Renault"; brands[5] = "Fiat"; brands[6] = "Volkswagen"; brands[7] = "Honda"; brands[8] = "Jaguar"; brands[9] = "Ford"; } public List<Car> createCars(int size) { List<Car> list = new ArrayList<Car>(); for(int i = 0 ; i < size ; i++) { list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState())); } return list; } private String getRandomId() { return UUID.randomUUID().toString().substring(0, 8); } private int getRandomYear() { return (int) (Math.random() * 50 + 1960); } private String getRandomColor() { return colors[(int) (Math.random() * 10)]; } private String getRandomBrand() { return brands[(int) (Math.random() * 10)]; } private int getRandomPrice() { return (int) (Math.random() * 100000); } private boolean getRandomSoldState() { return (Math.random() > 0.5) ? true: false; } public List<String> getColors() { return Arrays.asList(colors); } public List<String> getBrands() { return Arrays.asList(brands); } }