pe:sheet ajax event="change"

Community Driven Extensions Project
Post Reply
clementine
Posts: 4
Joined: 05 Nov 2019, 20:39

05 Nov 2019, 21:16

Hello :P
I'm having trouble with

Code: Select all

<p:ajax event="change" listener="#{sheetController.cellChangeEvent}">
in primefaces extensions Sheet. When I change the value in a cell, it successfully goes into the listener with the correct event object passed into the parameter, and I'm able to get the sheet object from the event with event.getSheet(). However, when I do

Code: Select all

sheet.getUpdates()
, it returns an ArrayList of size=0. Anyone else experiencing the same issue?
Note: other events (e.g. rowSelect and columnSelect) work just fine.

I'm using the same code as Primefaces Extensions showcase:
controller: https://github.com/primefaces-extension ... oller.java
model: https://github.com/primefaces-extension ... odel/sheet
xhtml page:

Code: Select all

<p:importEnum type="org.primefaces.extensions.showcase.model.sheet.AssetType" var="AssetType" />  
<p:importEnum type="org.primefaces.extensions.showcase.model.sheet.PlatformType" var="PlatformType" />  
  
<pe:sheet id="sheet" widgetVar="sheetWidget" value="#{sheetController.assets}" var="row"   
    height="400" rowKey="#{row.assetId}" fixedCols="2" fixedRows="3" showRowHeaders="true"  
    resizableCols="true" resizableRows="true" filteredValue="#{sheetController.filteredAssets}"  
    sortBy="#{row.assetId}" sortOrder="ascending" readOnly="false" rowStyleClass="#{row.purchasePrice gt 0 ? 'positive' : 'negative'}">  
  
    <p:ajax event="change" listener="#{sheetController.cellChangeEvent}" />  
  
    <f:facet name="header">  
        <h:outputText value="Assets" />  
    </f:facet>  
  
    <f:facet name="footer">  
        <h:outputText id="footer" value="#{sheetController.filteredAssets.size()} Records" />  
    </f:facet>  
  
    <pe:sheetcolumn headerText="Id (read-only)"   
                    readOnly="true"   
                    value="#{row.assetId}"   
                    sortBy="#{row.assetId}"   
                    colWidth="150"   
                    filterBy="#{row.assetId}" />  
    <pe:sheetcolumn headerText="Type" value="#{row.assetType}" colWidth="100"   
                    sortBy="#{row.assetType}" filterBy="#{row.assetType}"   
                    filterOptions="#{sheetOptionProducer.assetTypes}"  
                    colType="dropdown"   
                    selectItems="#{AssetType.ALL_VALUES}" />  
    <pe:sheetcolumn headerText="Platform" value="#{row.platform}" colWidth="100"   
                    sortBy="#{row.platform}" filterBy="#{row.platform}"   
                    filterOptions="#{sheetOptionProducer.platformTypes}"  
                    colType="autocomplete"   
                    selectItems="#{PlatformType.ALL_VALUES}"   
                    autoCompleteStrict="false"  
                    autoCompleteVisibleRows="4" />  
    <pe:sheetcolumn headerText="Arch" value="#{row.platformArch}" readOnly="true"   
                    colWidth="100" sortBy="#{row.platformArch}"   
                    filterBy="#{row.platformArch}"   
                    filterOptions="#{sheetOptionProducer.archTypes}" />  
    <pe:sheetcolumn headerText="Active" value="#{row.active}" colWidth="60" colType="checkbox"/>  
    <pe:sheetcolumn headerText="Price" value="#{row.purchasePrice}" colWidth="100"   
                    styleClass="htRight #{row.purchasePrice gt 0 ? 'positive' : 'negative'}"   
                    colType="numeric"   
                    numericLocale="de-DE"   
                    numericPattern="$0,0.00"  
                    required="true"   
                    requiredMessage="Price is required!">  
           <f:converter converterId="javax.faces.BigDecimal" />  
    </pe:sheetcolumn>  
    <pe:sheetcolumn headerText="Password" value="#{row.password}" colWidth="100" styleClass="password"   
                    colType="password"   
                    passwordHashSymbol="*"   
                    passwordHashLength="8" />  
    <pe:sheetcolumn headerText="Date" value="#{row.purchaseDate}" colWidth="110"   
                    sortBy="#{row.purchaseDate}"   
                    styleClass="htCenter"   
                    colType="date"   
                    dateFormat="YYYY-MM-DD">  
        <f:convertDateTime type="date" pattern="yyyy-MM-dd"/>  
    </pe:sheetcolumn>  
    <pe:sheetcolumn headerText="Time" value="#{row.purchaseTime}" colWidth="110"   
                    sortBy="#{row.purchaseTime}"   
                    styleClass="htCenter"   
                    colType="time"   
                    timeFormat="h:mm:ss a">  
        <f:convertDateTime type="time" pattern="h:mm:ss a"/>  
    </pe:sheetcolumn>  
    <pe:sheetcolumn headerText="Value 1" value="#{row.value1}" colWidth="100" colType="numeric"/>  
    <pe:sheetcolumn headerText="Value 2" value="#{row.value2}" colWidth="100" colType="numeric"/>  
    <pe:sheetcolumn headerText="Value 3" value="#{row.value3}" colWidth="100" colType="numeric"/>  
    <pe:sheetcolumn headerText="Value 4" value="#{row.value4}" colWidth="100" colType="numeric"/>  
    <pe:sheetcolumn headerText="Value 5" value="#{row.value5}" colWidth="100" colType="numeric"/>  
    <pe:sheetcolumn headerText="Value 6" value="#{row.value6}" colWidth="100" colType="numeric"/>  
    <pe:sheetcolumn headerText="Value 7" value="#{row.value7}" colWidth="100" colType="numeric"/>  
    <pe:sheetcolumn headerText="Value 8" value="#{row.value8}" colWidth="100" colType="numeric"/>  
    <pe:sheetcolumn headerText="Value 9" value="#{row.value9}" colWidth="100" colType="numeric"/>  
    <pe:sheetcolumn headerText="Value 10" value="#{row.value10}" colWidth="100" colType="numeric"/>  
</pe:sheet>  
In this particular example, I've been trying to change values under "Value 1" column.


Here are the primefaces versions I'm using:

Code: Select all

<dependency>
            <groupId>org.primefaces.extensions</groupId>
            <artifactId>primefaces-extensions</artifactId>
            <version>7.0.3</version>
        </dependency>
    
        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>7.0</version>
        </dependency> 
I've also tried primefaces-extensions v7.0.1 and v7.0.2.

Melloware
Posts: 1384
Joined: 22 Apr 2013, 15:48

06 Nov 2019, 14:12

A couple of things...

1. You don't have PrimeFaces Partial Updates turned on do you in your web.xml? the Sheet does not work with partial updates.

2. That cell is numeric are you sure you are typing in only a number?

3. I just tried it in the Showcase locally and its working fine?

Can you download the showcase: https://github.com/primefaces-extensions/showcase and run it locally? Build instructions are here: https://github.com/primefaces-extension ... rom-source
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.8 / PF Extensions 7.0.3

clementine
Posts: 4
Joined: 05 Nov 2019, 20:39

07 Nov 2019, 02:47

Thanks for the reply.

1. I don't think I have Partial Updates turned on...? Not sure what that is.
2. I'm typing in only numbers
3. I'll give the build a try and get back to you

In the meantime, here's the complete XHTML...not sure if certain tags interact in weird ways with the Sheet

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                template="/layout/template.xhtml"
                xmlns:pe="http://primefaces.org/ui/extensions">

    <p:importEnum type="org.primefaces.extensions.showcase.model.sheet.AssetType" var="AssetType" />
    <p:importEnum type="org.primefaces.extensions.showcase.model.sheet.PlatformType" var="PlatformType" />

    <ui:define name="title"> <h:outputText value="Primefaces Sheet"/> </ui:define>

    <ui:define name="content" >

        <div style="display: flex; width: 100%">

            <div style=" margin:25px 0 0 15px; width: 300px; border: solid 0px #ff00ff">
                <h:outputText value="Test Primefaces Sheet" styleClass="title1" />
            </div>

            <div style=" margin:25px 0 0 35px">
                <p:ajaxStatus>
                    <f:facet name="default" ></f:facet>
                    <f:facet name="start"><p:graphicImage value="/images/loading_bar_2b.gif"/></f:facet>
                    <f:facet name="complete"></f:facet>
                </p:ajaxStatus>
            </div>

        </div>


        <div >
        
            <!--SHEET BEGINS-->
            
            <pe:sheet id="sheet" widgetVar="sheetWidget" value="#{sheetController.assets}" var="row"
                      height="400" rowKey="#{row.assetId}" fixedCols="2" fixedRows="3" showRowHeaders="true"
                      resizableCols="true" resizableRows="true" filteredValue="#{sheetController.filteredAssets}"
                      sortBy="#{row.assetId}" sortOrder="ascending" readOnly="false" rowStyleClass="#{row.purchasePrice gt 0 ? 'positive' : 'negative'}">

                <p:ajax event="change" listener="#{sheetController.cellChangeEvent}" />

                <f:facet name="header">
                    <h:outputText value="Assets" />
                </f:facet>

                <f:facet name="footer">
                    <h:outputText id="footer" value="#{sheetController.filteredAssets.size()} Records" />
                </f:facet>

                <pe:sheetcolumn headerText="Id (read-only)"
                                readOnly="true"
                                value="#{row.assetId}"
                                sortBy="#{row.assetId}"
                                colWidth="150"
                                filterBy="#{row.assetId}" />
                <pe:sheetcolumn headerText="Type" value="#{row.assetType}" colWidth="100"
                                sortBy="#{row.assetType}" filterBy="#{row.assetType}"
                                filterOptions="#{sheetOptionProducer.assetTypes}"
                                colType="dropdown"
                                selectItems="#{AssetType.ALL_VALUES}" />
                <pe:sheetcolumn headerText="Platform" value="#{row.platform}" colWidth="100"
                                sortBy="#{row.platform}" filterBy="#{row.platform}"
                                filterOptions="#{sheetOptionProducer.platformTypes}"
                                colType="autocomplete"
                                selectItems="#{PlatformType.ALL_VALUES}"
                                autoCompleteStrict="false"
                                autoCompleteVisibleRows="4" />
                <pe:sheetcolumn headerText="Arch" value="#{row.platformArch}" readOnly="true"
                                colWidth="100" sortBy="#{row.platformArch}"
                                filterBy="#{row.platformArch}"
                                filterOptions="#{sheetOptionProducer.archTypes}" />
                <pe:sheetcolumn headerText="Active" value="#{row.active}" colWidth="60" colType="checkbox"/>
                <pe:sheetcolumn headerText="Price" value="#{row.purchasePrice}" colWidth="100"
                                styleClass="htRight #{row.purchasePrice gt 0 ? 'positive' : 'negative'}"
                                colType="numeric"
                                numericLocale="de-DE"
                                numericPattern="$0,0.00"
                                required="true"
                                requiredMessage="Price is required!">
                    <f:converter converterId="javax.faces.BigDecimal" />
                </pe:sheetcolumn>
                <pe:sheetcolumn headerText="Password" value="#{row.password}" colWidth="100" styleClass="password"
                                colType="password"
                                passwordHashSymbol="*"
                                passwordHashLength="8" />
                <pe:sheetcolumn headerText="Date" value="#{row.purchaseDate}" colWidth="110"
                                sortBy="#{row.purchaseDate}"
                                styleClass="htCenter"
                                colType="date"
                                dateFormat="YYYY-MM-DD">
                    <f:convertDateTime type="date" pattern="yyyy-MM-dd"/>
                </pe:sheetcolumn>
                <pe:sheetcolumn headerText="Time" value="#{row.purchaseTime}" colWidth="110"
                                sortBy="#{row.purchaseTime}"
                                styleClass="htCenter"
                                colType="time"
                                timeFormat="h:mm:ss a">
                    <f:convertDateTime type="time" pattern="h:mm:ss a"/>
                </pe:sheetcolumn>
                <pe:sheetcolumn headerText="Value 1" value="#{row.value1}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 2" value="#{row.value2}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 3" value="#{row.value3}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 4" value="#{row.value4}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 5" value="#{row.value5}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 6" value="#{row.value6}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 7" value="#{row.value7}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 8" value="#{row.value8}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 9" value="#{row.value9}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 10" value="#{row.value10}" colWidth="100" colType="numeric"/>
            </pe:sheet>

        </div>

    </ui:define>

</ui:composition>



Melloware
Posts: 1384
Joined: 22 Apr 2013, 15:48

07 Nov 2019, 13:58

That certainly looks like the Showcase code. Now try and run the actual showcase like I provided above and see if it works for you and what is different than your code.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.8 / PF Extensions 7.0.3

clementine
Posts: 4
Joined: 05 Nov 2019, 20:39

09 Dec 2019, 22:56

I figured out what the problem was... I forgot to include a <h:form> tag. Now it works fine in the example I provided above.

However, I'm running into another problem. I realized when I put the Sheet inside a <p:tabView>, it runs into the same problem where sheet.getUpdates() returns an empty list.

Here's the outer xhtml:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                template="/layout/template.xhtml">

    <ui:define name="title"> <h:outputText value="Primefaces Sheet"/> </ui:define>
    <ui:define name="content" >

        <p:growl showDetail="true" sticky="true" />

      
        <div >
            <h:panelGroup >


                <!--When Sheet is placed outside of tabView...works fine-->
                <!--<ui:include src="test_primefaces_sheet_include.xhtml"/>-->


                <p:tabView id="testTabView"
                           value="#{primefacesTestBean.controllerList}" var="tab"
                           dynamic="true"
                           style="vertical-align: top; height: fit-content; border: 0px; padding: 0;">

                    <p:tab >

                        <f:facet name="title">
                            <h:outputText value="tabTitle"/>
                        </f:facet>

                        <!--Primefaces Extension Sheet included here...getUpdates() not working-->
                        <ui:include src="test_primefaces_sheet_include.xhtml"/>

                    </p:tab>
                </p:tabV
            </h:panelGroup>
        </div>



    </ui:define>

</ui:composition>

Here's the test_primefaces_sheet_include.xhtml file that contains Sheet:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:pe="http://primefaces.org/ui/extensions">

    
    <h:form>

        <div >

            <pe:sheet id="sheet" widgetVar="sheetWidget" value="#{sheetController.assets}" var="row"
                      height="400" rowKey="#{row.assetId}" fixedCols="2" fixedRows="3" showRowHeaders="true"
                      resizableCols="true" resizableRows="true" filteredValue="#{sheetController.filteredAssets}"
                      sortBy="#{row.assetId}" sortOrder="ascending" readOnly="false" rowStyleClass="#{row.purchasePrice gt 0 ? 'positive' : 'negative'}">

                <p:ajax event="change" listener="#{sheetController.cellChangeEvent}" />

                <f:facet name="header">
                    <h:outputText value="Assets" />
                </f:facet>

                <f:facet name="footer">
                    <h:outputText id="footer" value="#{sheetController.filteredAssets.size()} Records" />
                </f:facet>

                <pe:sheetcolumn headerText="Id (read-only)"
                                readOnly="true"
                                value="#{row.assetId}"
                                sortBy="#{row.assetId}"
                                colWidth="150"
                                filterBy="#{row.assetId}" />
                <pe:sheetcolumn headerText="Type" value="#{row.assetType}" colWidth="100"
                                sortBy="#{row.assetType}" filterBy="#{row.assetType}"
                                filterOptions="#{sheetOptionProducer.assetTypes}"
                                colType="dropdown"
                                selectItems="#{AssetType.ALL_VALUES}" />
                <pe:sheetcolumn headerText="Platform" value="#{row.platform}" colWidth="100"
                                sortBy="#{row.platform}" filterBy="#{row.platform}"
                                filterOptions="#{sheetOptionProducer.platformTypes}"
                                colType="autocomplete"
                                selectItems="#{PlatformType.ALL_VALUES}"
                                autoCompleteStrict="false"
                                autoCompleteVisibleRows="4" />
                <pe:sheetcolumn headerText="Arch" value="#{row.platformArch}" readOnly="true"
                                colWidth="100" sortBy="#{row.platformArch}"
                                filterBy="#{row.platformArch}"
                                filterOptions="#{sheetOptionProducer.archTypes}" />
                <pe:sheetcolumn headerText="Active" value="#{row.active}" colWidth="60" colType="checkbox"/>
                <pe:sheetcolumn headerText="Price" value="#{row.purchasePrice}" colWidth="100"
                                styleClass="htRight #{row.purchasePrice gt 0 ? 'positive' : 'negative'}"
                                colType="numeric"
                                numericLocale="de-DE"
                                numericPattern="$0,0.00"
                                required="true"
                                requiredMessage="Price is required!">
                    <f:converter converterId="javax.faces.BigDecimal" />
                </pe:sheetcolumn>
                <pe:sheetcolumn headerText="Password" value="#{row.password}" colWidth="100" styleClass="password"
                                colType="password"
                                passwordHashSymbol="*"
                                passwordHashLength="8" />
                <pe:sheetcolumn headerText="Date" value="#{row.purchaseDate}" colWidth="110"
                                sortBy="#{row.purchaseDate}"
                                styleClass="htCenter"
                                colType="date"
                                dateFormat="YYYY-MM-DD">
                    <f:convertDateTime type="date" pattern="yyyy-MM-dd"/>
                </pe:sheetcolumn>
                <pe:sheetcolumn headerText="Time" value="#{row.purchaseTime}" colWidth="110"
                                sortBy="#{row.purchaseTime}"
                                styleClass="htCenter"
                                colType="time"
                                timeFormat="h:mm:ss a">
                    <f:convertDateTime type="time" pattern="h:mm:ss a"/>
                </pe:sheetcolumn>
                <pe:sheetcolumn headerText="Value 1" value="#{row.value1}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 2" value="#{row.value2}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 3" value="#{row.value3}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 4" value="#{row.value4}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 5" value="#{row.value5}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 6" value="#{row.value6}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 7" value="#{row.value7}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 8" value="#{row.value8}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 9" value="#{row.value9}" colWidth="100" colType="numeric"/>
                <pe:sheetcolumn headerText="Value 10" value="#{row.value10}" colWidth="100" colType="numeric"/>
            </pe:sheet>

        </div>

    </h:form>

</ui:composition>

Melloware
Posts: 1384
Joined: 22 Apr 2013, 15:48

09 Dec 2019, 23:03

I wonder if it is because your TabView is dynamic="true". Can you try it with dynamic="false".
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.8 / PF Extensions 7.0.3

clementine
Posts: 4
Joined: 05 Nov 2019, 20:39

09 Dec 2019, 23:23

Thanks for the speedy reply. Just tried it with tabView dynamic="false". Yielded the same result.

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests