Page 1 of 1

pe:sheet ajax event="change"

Posted: 05 Nov 2019, 21:16
by clementine
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.

Re: pe:sheet ajax event="change"

Posted: 06 Nov 2019, 14:12
by Melloware
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

Re: pe:sheet ajax event="change"

Posted: 07 Nov 2019, 02:47
by clementine
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>



Re: pe:sheet ajax event="change"

Posted: 07 Nov 2019, 13:58
by Melloware
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.

Re: pe:sheet ajax event="change" not working in tabView

Posted: 09 Dec 2019, 22:56
by clementine
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>

Re: pe:sheet ajax event="change"

Posted: 09 Dec 2019, 23:03
by Melloware
I wonder if it is because your TabView is dynamic="true". Can you try it with dynamic="false".

Re: pe:sheet ajax event="change"

Posted: 09 Dec 2019, 23:23
by clementine
Thanks for the speedy reply. Just tried it with tabView dynamic="false". Yielded the same result.

Re: pe:sheet ajax event="change"

Posted: 17 Jan 2020, 18:15
by clementine
Happy new year! Just wondering if there are any updates with this issue? Thanks.

Re: pe:sheet ajax event="change"

Posted: 17 Jan 2020, 18:30
by Melloware
Nope haven't done any research into it. If you can debug it let me know what you find out! At my company we don't use a sheet inside a TabView so I don't have any use case to debug it.