Mirage LIVE PREVIEW

DataTable - Add Row

A new row can be added by clicking the Add new button.

Documentation
Row Editing with add functionality
IdYearBrandColor
92d75856
1969
Jaguar
Red
2a0fcc6d
1989
Mercedes
Green
e8faff0e
1976
BMW
Maroon
dfe845e7
2004
Audi
Red
671d5896
1988
Mercedes
White
466dff49
1987
Fiat
White
d497ffcc
1974
Ford
White
0be83550
2005
Volkswagen
Orange
8756505e
1997
Renault
Green
081c6f60
1992
Honda
Silver
7692a13d
1999
Honda
Red
a6190259
1968
BMW
Black
4b964629
1986
Honda
Green
a7b8218e
1984
Renault
Silver
0f87a3a0
1972
Ford
Brown
<h:form id="form">
    <p:growl id="msgs" showDetail="true"/>

    <p:dataTable id="cars1" widgetVar="cars1" var="car" value="#{dtAddRowView.cars1}" editable="true" style="margin-bottom:20px">
        <f:facet name="header">
            Row Editing with add functionality
        </f:facet>

        <p:ajax event="rowEdit" listener="#{dtAddRowView.onRowEdit}" update=":form:msgs" />
        <p:ajax event="rowEditCancel" listener="#{dtAddRowView.onRowCancel}" update=":form:msgs" />

        <p:column headerText="Id">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
                <f:facet name="input"><p:inputText id="modelInput" value="#{car.id}" style="width:100%"/></f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Year">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
                <f:facet name="input"><p:inputText value="#{car.year}" style="width:100%" label="Year"/></f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Brand">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.brand}" style="width:100%">
                        <f:selectItems value="#{dtEditView.brands}" var="man" itemLabel="#{man}" itemValue="#{man}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Color">
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.color}" style="width:100%">
                        <f:selectItems value="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column style="width:32px">
            <p:rowEditor />
        </p:column>
    </p:dataTable>

     <div class="ui-g">
         <div class="ui-g-12">
             <p:commandButton value="Add new row" styleClass="ui-priority-primary" process="@this" update=":form:msgs"
                              action="#{dtAddRowView.onAddNew()}" oncomplete="PF('cars1').addRow();"/>
         </div>
     </div>

 </h:form>