DataView - MultiViewState

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


ui-button
ui-button
  • Id: c45466fe
    Year: 1993
    Color: Yellow
  • Id: 82eec612
    Year: 1963
    Color: Silver
  • Id: e4b8d4ba
    Year: 1960
    Color: Silver
  • Id: 0284e817
    Year: 1968
    Color: Red
  • Id: 62b4e4b5
    Year: 1983
    Color: Red
  • Id: 1f6b1128
    Year: 1995
    Color: Green
  • Id: 6827b2fd
    Year: 1976
    Color: Black
  • Id: 8ba412af
    Year: 1969
    Color: Red
  • Id: 75874af4
    Year: 1979
    Color: White
  • Id: 6d696793
    Year: 1994
    Color: Red
  • Id: 0edc060c
    Year: 1985
    Color: Brown
  • Id: 225af992
    Year: 1977
    Color: Brown
Car Info
<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>

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.