DataList - MultiViewState

MultiViewState feature enables DataList to maintain its state across pages by setting multiViewState attribute to true. In this demo, manipulate use pagination, then visit another page and then come back to this page. DataList state should remain as you've left it.

Documentation


  • Id: b7c9c801
    Year: 2008
    Color: Green
  • Id: 439b02e1
    Year: 1962
    Color: Green
  • Id: a09fec3e
    Year: 1980
    Color: Maroon
  • Id: de2b23d1
    Year: 1967
    Color: Yellow
  • Id: faeea6f9
    Year: 1967
    Color: Red
Car Info
<style type="text/css">
    .logo {
    }

    .detail {
        width: 200px;
        padding-left: 25px;
    }

    .command {
        padding-left: 25px;
    }

    ul.ui-datalist-data {
        padding-inline-start: 0px;
    }
</style>


<h:form id="form">
    <p:messages id="messages" />

    <p:commandButton value="Clear multiViewSate" action="#{dataListView.clearMultiViewState}" update="@form"/>

    <br/><br/>

    <p:dataList value="#{dataListView.cars3}" var="car" id="carList" type="unordered" itemType="none" multiViewState="true" style="width:400px"
                paginator="true" rows="5" pageLinks="5"
                paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
        <h:panelGrid columns="3" columnClasses="logo,detail,command">
            <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="#{dataListView.selectedCar}" />
            </p:commandLink>
        </h:panelGrid>
    </p:dataList>

    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="blind" hideEffect="explode" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty dataListView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dataListView.selectedCar.brand}-big.gif"/>
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{dataListView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dataListView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dataListView.selectedCar.color}" style="color:#{dataListView.selectedCar.color}"/>

                <h:outputText value="Price" />
                <h:outputText value="$#{dataListView.selectedCar.price}" />
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.