Board index JavaServer Faces General Unable to fire an action from subtable column

Unable to fire an action from subtable column

Components, Ajax Framework, Utilities and More.


Posts: 109
Location: Pune, India

I Have following code:
<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
---
PF 5.0-SNAPSHOT | PE 2.0.0-SNAPSHOT | Myfaces 2.2.0 | Tomcat 7.x, 8.x, Jetty 8.x, 9.x
FF 27.x | Chrome 33.x | Netbeans 7.4
Blog: http://nileshmali.blogspot.in | PrimeFaces Extensions: https://github.com/primefaces-extensions


Posts: 15076
Location: Cybertron

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


Posts: 109
Location: Pune, India

With myfaces 2.1.1 selectBooleanCheckBox not working.
Nilesh N. Mali
---
PF 5.0-SNAPSHOT | PE 2.0.0-SNAPSHOT | Myfaces 2.2.0 | Tomcat 7.x, 8.x, Jetty 8.x, 9.x
FF 27.x | Chrome 33.x | Netbeans 7.4
Blog: http://nileshmali.blogspot.in | PrimeFaces Extensions: https://github.com/primefaces-extensions


Posts: 15076
Location: Cybertron

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


Posts: 109
Location: Pune, India

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
---
PF 5.0-SNAPSHOT | PE 2.0.0-SNAPSHOT | Myfaces 2.2.0 | Tomcat 7.x, 8.x, Jetty 8.x, 9.x
FF 27.x | Chrome 33.x | Netbeans 7.4
Blog: http://nileshmali.blogspot.in | PrimeFaces Extensions: https://github.com/primefaces-extensions


Posts: 109
Location: Pune, India

I am still struggling with same event problem.
Is there any workaround for the same?
Nilesh N. Mali
---
PF 5.0-SNAPSHOT | PE 2.0.0-SNAPSHOT | Myfaces 2.2.0 | Tomcat 7.x, 8.x, Jetty 8.x, 9.x
FF 27.x | Chrome 33.x | Netbeans 7.4
Blog: http://nileshmali.blogspot.in | PrimeFaces Extensions: https://github.com/primefaces-extensions


Posts: 70
Location: Brazil
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


Posts: 5945
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.

http://forum.primefaces.org/viewtopic.php?f=3&t=4003

http://forum.primefaces.org/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/ui/datatableSubTable.jsf
Howard

PrimeFaces 5.1, Extensions 2.1.0, Push (Atmosphere 2.2.3)
TomEE+ 1.7.1 (Tomcat 7.0.55), MyFaces Core 2.2.5, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

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


Posts: 5945
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

        <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

        <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

    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

    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
<?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 5.1, Extensions 2.1.0, Push (Atmosphere 2.2.3)
TomEE+ 1.7.1 (Tomcat 7.0.55), MyFaces Core 2.2.5, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

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


Posts: 2
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

Next

Return to General