Unable to fire an action from subtable column

UI Components for JSF
nileshmali
Posts: 110
Joined: 10 Nov 2010, 13:43
Location: Pune, India
Contact:

19 Aug 2011, 11:58

I Have following code:

Code: Select all

<p:subtable var="#{vtr}" value="#{cfgAlertBean.triggers}">
<p:column>
<p:commandButton image="ui-icon ui-icon-pencil" actionListener="#{cfgAlertBean.editRecord}">										
<f:setPropertyActionListener target="#{cfgAlertBean.vtr}" value="#{vtr}"/>
</p:commandButton>
</p:column>
</p:subtable>
But i am unable to fire edit listener
Nilesh N. Mali
---
Angular 2.x | Prime NG
FF: latest | Chrome: latest | vscode
Blog: http://nileshmali.blogspot.in | PrimeFaces Extensions: https://github.com/primefaces-extensions

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

19 Aug 2011, 12:18

I think Mojarra has a bug with nested uidata components, try with myfaces to see if it fix your issue.

nileshmali
Posts: 110
Joined: 10 Nov 2010, 13:43
Location: Pune, India
Contact:

19 Aug 2011, 14:36

With myfaces 2.1.1 selectBooleanCheckBox not working.
Nilesh N. Mali
---
Angular 2.x | Prime NG
FF: latest | Chrome: latest | vscode
Blog: http://nileshmali.blogspot.in | PrimeFaces Extensions: https://github.com/primefaces-extensions

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

19 Aug 2011, 14:46

I don't get what you mean. We were talking about subtable and commandButton.

nileshmali
Posts: 110
Joined: 10 Nov 2010, 13:43
Location: Pune, India
Contact:

19 Aug 2011, 16:08

Yes, But as i used Myfaces 2.1.1.
I am unable to run my project as it gives null pointer exception to new p:selectBooleanCheckbox component.
Nilesh N. Mali
---
Angular 2.x | Prime NG
FF: latest | Chrome: latest | vscode
Blog: http://nileshmali.blogspot.in | PrimeFaces Extensions: https://github.com/primefaces-extensions

nileshmali
Posts: 110
Joined: 10 Nov 2010, 13:43
Location: Pune, India
Contact:

23 Aug 2011, 13:30

I am still struggling with same event problem.
Is there any workaround for the same?
Nilesh N. Mali
---
Angular 2.x | Prime NG
FF: latest | Chrome: latest | vscode
Blog: http://nileshmali.blogspot.in | PrimeFaces Extensions: https://github.com/primefaces-extensions

edudebom
Posts: 70
Joined: 14 Jan 2011, 18:01
Location: Brazil

16 Sep 2011, 19:36

I'm using PF 3RC1 and I also have this problem. Someone found the solution ?
Mojarra 2.1.6; GlassFish 3.1.2.2; PrimeFaces 4.0-SNAPSHOT
Brasil

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

04 Nov 2011, 15:48

Click URLs below, and I think you will find that subtable was most likely implemented for reporting purposes only, similar to data/subTable in MyFaces. Earlier in this conversation, Optimus.Prime recommended to try MyFaces (dataTable) instead.

viewtopic.php?f=3&t=4003

viewtopic.php?f=3&t=14927

You may need to modify your JSF app to work with MyFaces, just like you have to make changes to your app to use PrimeFaces in your JSF app. I had to develop 2 new Java beans/classes to resemble what I saw in the p:subTable demo in PrimeFaces ShowCase page, and I am very pleased with the results.

My use of p:subTable is a page that outputs a PAYROLL report, or allow enduser to browse PAYROLL data for a selected pay period; i just completed that yesterday after trying to make my JSF app and entity beans (and relationships) work with subtable, but i spent 2 or 3 days trying to do that. Success came after modifying my app to resemble the p:subTable code (click URL below) that is in PrimeFaces ShowCase.

http://www.primefaces.org/showcase-labs ... bTable.jsf
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

16 Dec 2011, 19:01

SOLVED!!!

I'm using p:dataTable and p:subTable to implement a payroll page that fires an action from subtable column.

1. Embedded <a> (anchor tag or hyperlink) in p:subTable

Code: Select all

        <p:column>
            <h:link title="View" onclick="return clickToViewOrder(#{order.order.orderId})">
                <h:outputText escape="false" value="#{order.tripDate}" />
            </h:link>
        </p:column>

2. Embedded h:inputHidden, javascript, and p:commandButton inside of h:form

Code: Select all

        <p:outputPanel layout="block" style="display: none !important;">
            <h:inputHidden id="viewOrderId" value="#{pf_ordersController.selectedOrderId}" />
            <script language="text/javascript">
                function clickToViewOrder(orderId) {
                    document.getElementById('payrollForm:viewOrderId').value = orderId;
                    document.getElementById('payrollForm:btn_viewFromPayroll').click()
                    return false;
                }
            </script>
            <p:commandButton id="btn_viewFromPayroll" update=":pageContentPanel"
                             actionListener="#{pf_ordersController.prepareViewFromPayroll}"/>
        </p:outputPanel>
3. Add selectedOrderId (for h:inputHidden) and getter/setter

Code: Select all

    private Integer selectedOrderId;

    public Integer getSelectedOrderId() {
        return selectedOrderId;
    }

    public void setSelectedOrderId(Integer selectedOrderId) {
        this.selectedOrderId = selectedOrderId;
    }

4. bean method responsible for navigating to another ui:include page

Code: Select all

    public String prepareViewFromPayroll() {
        Integer orderId = selectedOrderId;
        current = null;
        try {
            current = getFacade().getOrder(orderId);
            if (current != null) {
                currentDetails = current.getDetailsId();
                currentNotes = current.getNotesId();
                currentRoutes = current.getRoutesId();
                browse = false;
                add = false;
                edit = false;
                view = true;
                viewToAdd = false;
                viewToEdit = false;
                getPageNavigation().setPage("/orders/pf_ViewFromPayroll.xhtml");
            }
            else {
                messages.addFormErrorMsg("Error on attempt to view ORDERS data from Payroll (orderId==null)", "");
            }
        } catch (Exception e) {
            e.printStackTrace();
            messages.addFormErrorMsg("Error retrieving ORDERS data to view from Payroll", (e.getMessage() != null) ? e.getMessage() : "");
        }
        return null;
    }


pf_BrowsePayroll.xhtml

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    
    <ui:composition>
        
        <h:form id="payrollForm" onkeypress="disableEnterKey(event)" >
            
            <ui:include src="/pf_ajaxStatus.xhtml"/>

            <p:messages id="formMessages" showDetail="true" showSummary="true" />

            <p:panel id="payrollPanel" styleClass="panel-title-centeralign" header="PAYROLL">
                
                <h:panelGroup layout="block" style="width: 100% !important; text-align: center !important;" >
                    <h:panelGrid columns="3" width="100%" style="text-align: center !important;" >
                        <h:panelGrid columns="2">
                            <h:outputText value="Driver" />
                            <p:selectOneMenu id="filterDriver" value="#{pf_ordersController.filterDriver}">
                                <f:selectItem itemLabel="Select One" itemValue="0" />
                                <f:selectItems value="#{pf_ordersController.selectOneDriverForPayroll}"
                                               var="selectOneDriver" itemLabel="#{selectOneDriver.driverName}" itemValue="#{selectOneDriver.driverId}"/>
                                <p:ajax listener="#{pf_ordersController.filterDriverSelected}" update=":pageContentPanel"/>
                            </p:selectOneMenu>
                        </h:panelGrid>
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Pay Period Begin:" />
                            <p:calendar id="filterTripDateFrom" value="#{pf_ordersController.filterTripDateFrom}"
                                        mode="popup" showOn="button" navigator="true" effect="fadeIn" pattern="MM/dd/yyyy" size="12">
                                <p:ajax event="dateSelect" listener="#{pf_ordersController.filterTripDateFromSelected}" update=":pageContentPanel" />
                            </p:calendar>
                        </h:panelGrid>
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Pay Period End:" />
                            <p:calendar id="filterTripDateTo" value="#{pf_ordersController.filterTripDateTo}"
                                        mode="popup" showOn="button" navigator="true" effect="fadeIn" pattern="MM/dd/yyyy" size="12">
                                <p:ajax event="dateSelect" listener="#{pf_ordersController.filterTripDateToSelected}" update=":pageContentPanel" />
                            </p:calendar>
                        </h:panelGrid>
                    </h:panelGrid>
                </h:panelGroup>
                
                <p:outputPanel layout="block" style="display: none !important;">
                    <h:inputHidden id="viewOrderId" value="#{pf_ordersController.selectedOrderId}" />
                    <script language="text/javascript">
                        function clickToViewOrder(orderId) {
                            document.getElementById('payrollForm:viewOrderId').value = orderId;
                            document.getElementById('payrollForm:btn_viewFromPayroll').click()
                            return false;
                        }
                    </script>
                    <p:commandButton id="btn_viewFromPayroll" update=":pageContentPanel"
                                     actionListener="#{pf_ordersController.prepareViewFromPayroll}"/>
                </p:outputPanel>
                
                <p:dataTable id="payrollDataTable" var="driver" value="#{pf_ordersController.driverPayrollList}"
                             style="font-size: 85% !important;">
                    
                    <p:columnGroup type="header">
                        <p:row>
                            <p:column headerText="Driver"/>
                            <p:column colspan="6" headerText="" />
                            <p:column colspan="3" headerText="Miles" />
                            <p:column colspan="3" headerText="Hours" />
                            <p:column colspan="1" headerText="" />
                        </p:row>

                        <p:row>
                            <p:column headerText="Trip Date" />
                            <p:column headerText="Destination" />
                            <p:column headerText="Origin" />
                            <p:column headerText="Customer" />
                            <p:column headerText="Service" />
                            <p:column headerText="Order #" />
                            <p:column headerText="Gratuity" />
                            <p:column headerText="Live" />
                            <p:column headerText="Dead" />
                            <p:column headerText="Total" />
                            <p:column headerText="Days" />
                            <p:column headerText="Hrs/Day" />
                            <p:column headerText="Total" />
                            <p:column headerText="Pay By" />
                        </p:row>
                    </p:columnGroup>

                    <p:subTable var="order" value="#{driver.orders}">

                        <f:facet name="header">
                            #{driver.driver} (#{driver.rowNumber} of #{pf_ordersController.driverPayrollList.size()})
                        </f:facet>

                        <p:column>
                            <h:link title="View" onclick="return clickToViewOrder(#{order.order.orderId})">
                                <h:outputText escape="false" value="#{order.tripDate}" />
                            </h:link>
                        </p:column>

                        <p:column>
                            <h:outputText escape="false" value="#{order.destination}" />
                        </p:column>

                        <p:column>
                            <h:outputText escape="false" value="#{order.origin}" />
                        </p:column>

                        <p:column>
                            <h:outputText value="#{order.customer}" />
                        </p:column>

                        <p:column>
                            <h:outputText escape="false" value="#{order.service}" />
                        </p:column>

                        <p:column style="text-align: center !important;">
                            <h:outputText escape="false" value="#{order.orderNumber}">
                                <f:convertNumber minIntegerDigits="4" groupingUsed="false" integerOnly="true" type="number"/>
                            </h:outputText>
                        </p:column>

                        <p:column style="text-align: right !important;">
                            <h:outputText escape="false" value="#{order.gratuity}">
                                <f:convertNumber minFractionDigits="2" type="number"/>
                            </h:outputText>
                        </p:column>

                        <p:column style="text-align: right !important;">
                            <h:outputText escape="false" value="#{order.liveMiles}">
                                <f:convertNumber minFractionDigits="2" type="number"/>
                            </h:outputText>
                        </p:column>

                        <p:column style="text-align: right !important;">
                            <h:outputText escape="false" value="#{order.deadMiles}">
                                <f:convertNumber minFractionDigits="2" type="number"/>
                            </h:outputText>
                        </p:column>

                        <p:column style="text-align: right !important;">
                            <h:outputText escape="false" value="#{order.totalMiles}">
                                <f:convertNumber minFractionDigits="2" type="number"/>
                            </h:outputText>
                        </p:column>

                        <p:column style="text-align: right !important;">
                            <h:outputText escape="false" value="#{order.nbrOfDays}" />
                        </p:column>

                        <p:column style="text-align: right !important;">
                            <h:outputText escape="false" value="#{order.hoursPerDay}" />
                        </p:column>

                        <p:column style="text-align: right !important;">
                            <h:outputText escape="false" value="#{order.totalHours}">
                                <f:convertNumber minFractionDigits="2" type="number"/>
                            </h:outputText>
                        </p:column>

                        <p:column>
                            <h:outputText escape="false" value="#{order.payBy}" />
                        </p:column>

                    </p:subTable>

                </p:dataTable>

            </p:panel>
            
        </h:form>
        
        <script language="JavaScript">
        function disableEnterKey(e)
        {
             var key;
             if(window.event)
                  key = window.event.keyCode;     //IE
             else
                  key = e.which;     //firefox
             if(key == 13)
                  return false;
             else
                  return true;
        }
        </script>        

    </ui:composition>

</html>
References:

I searched googled and read many posts on stackoverflow.com, but as always, BalusC JSF responses and blogs are the best. I was trying to implement what is documented at the URL below (prior to reading this article); after reading the article, it confirmed that I was on the right track.

Pass variables from client side to server side

Edit: This response was when I was using Mojarra 2.1.3 or 2.1.4. Now, I'm using MyFaces 2.1.8 (see next page of this topic, and look for my response).
Last edited by smithh032772 on 08 Sep 2012, 04:46, edited 1 time in total.
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

marweck
Posts: 2
Joined: 10 May 2012, 18:54

10 May 2012, 19:14

Hi folks,

Any chances to get this fixed in the next Primefaces or this is a Mojarra bug?

Optimus, is there any opened issue in Mojarra issue tracker regarding this problem? I could not properly elaborate on this problem to the Mojarra guys.

I really need this basic functionality working in order to fully adopt Primefaces.

Many thanks

PS: trying to migrate from Myfaces 1.2 + Richfaces 3.3 to Mojarra 2.1.7 + Primefaces 3.2

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 32 guests