CODEWITHSUNDEEP
javajsfprimefaces
Alvin Sim
Alvin Sim

Reputation: 338

PrimeFaces' DataTable Instant Row Selection Not Rendered Properly In Browser

I have a DataTable, which I want to do Instance Row Selection. Upon clicking on a row, a Dialog would appear displaying the record detail in a PanelGrid. The problem I am facing is the Dialog and PanelGrid was not rendered. When I view-source from the browser, it could not find the element. And in the Apache log file, it has this error "javax.faces.FacesException: Cannot find component with identifier "frmMain:strMaint" in view." frmMain is the ID of the HTML form and strMaint is ID of the PanelGrid.

Below is the XHTML file.

<?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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>PROFIT V10</title>
        <h:outputStylesheet name="styles.css" library="css" />
    </h:head>
    <h:body>
        <h:form id="frmMain">
            <p:panel styleClass="layout-panel"
                     style="width: 98%; margin-left: auto; margin-right: auto; margin-top: 15px;">
                <h2>Store Search</h2>
                <p:focus context="pnlStoreSearchCriteria" />
                <h:panelGrid id="pnlStoreSearchCriteria" columns="2" styleClass="panel-search">
                    <h:outputText value="Company" />
                    <p:selectOneMenu id="coySub" value="#{storeSearchBean.coySub}" effect="">
                        <f:selectItems value="#{storeSearchBean.coysubmsts}" var="coysub"
                                        itemValue="#{coysub.coy_sub}"
                                        itemLabel="#{coysub.coy_sub} - #{coysub.coy_sub_name}" />
                    </p:selectOneMenu>
                    <h:outputText value="Business Unit" />
                    <p:selectOneMenu id="storeCat" value="#{storeSearchBean.storeCat}">
                        <f:selectItem itemLabel="" itemValue="" />
                        <f:selectItems value="#{storeSearchBean.strcatmsts}" var="strcatmst"
                                        itemValue="#{strcatmst.category}"
                                        itemLabel="#{strcatmst.category} - #{strcatmst.category_name}" />
                    </p:selectOneMenu>
                    <h:outputLabel for="store" value="Store" />
                    <p:autoComplete id="store" value="#{storeSearchBean.store}" maxResults="10" maxlength="4"
                                    completeMethod="#{storeSearchBean.populateStoreAutoComplete}" size="4" />
                    <h:outputLabel for="storeName" value="Store Name" />
                    <p:autoComplete id="storeName" maxlength="30" size="50"
                                    value="#{storeSearchBean.storeName}" maxResults="10"
                                    completeMethod="#{storeSearchBean.populateaStoreNameAutoComplete}" />
                    <f:facet name="footer">
                        <h:panelGroup id="pnlgrpButtonSearch">
                            <p:commandButton id="btnReset" type="reset" value="Reset"
                                                action="#{storeSearchBean.doReset}" />
                            <p:commandButton id="btnSearch" type="submit" value="Search"
                                                action="#{storeSearchBean.doSearch}"
                                                update="pnlStoreSearchResult" />
                        </h:panelGroup>
                    </f:facet>
                </h:panelGrid>
                <p:separator />
                <p:outputPanel id="pnlStoreSearchResult">
                    <p:dataTable id="tblStoreSearchResult" value="#{storeSearchBean.stores}" var="store"
                                    emptyMessage="No data to display" paginator="true" rows="10"
                                    paginatorPosition="bottom" draggableColumns="true" editable="true"
                                    selection="#{storeSearchBean.selectedStore}" selectionMode="single">
                        <!--
                        <p:ajax event="rowSelect" listener="#{storeSearchBean.onRowSelect}" update="frmMain:strMaint"
                                oncomplete="strmstDialog.show()" />
                        <p:ajax event="rowUnselect" listener="#{storeSearchBean.onRowUnselect}" />
                        -->
                        <p:column sortBy="#{store.store_coy_sub}" headerText="Company">
                            <h:outputText value="#{store.store_coy_sub}" />
                        </p:column>
                        <p:column sortBy="#{store.store_category}" headerText="Business Unit">
                            <h:outputText value="#{store.store_category}" />
                        </p:column>
                        <p:column sortBy="#{store.store}" headerText="Store">
                            <h:outputText value="#{store.store}" />
                        </p:column>
                        <p:column sortBy="#{store.store_name}" headerText="Store Name">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{store.store_name}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:inputText value="#{store.store_name}" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column sortBy="#{store.store_type}" headerText="Type">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{store.store_type}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:selectOneMenu value="#{store.store_type}">
                                        <f:selectItem itemValue="W" itemLabel="W" />
                                        <f:selectItem itemValue="S" itemLabel="S" />
                                    </h:selectOneMenu>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column sortBy="#{store.store_del_cd}" headerText="Deleted">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{store.store_del_cd}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:selectOneMenu value="#{store.store_del_cd}">
                                        <f:selectItem itemValue="Y" itemLabel="Y" />
                                        <f:selectItem itemValue="N" itemLabel="N" />
                                    </h:selectOneMenu>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column>
                            <p:rowEditor />
                        </p:column>
                    </p:dataTable>
                    <p:dialog id="dlgMaint" header="Strmst Maintenance" widgetVar="strmstDialog" resizable="false"
                              modal="true" showEffect="fade" hideEffect="fade">
                        <h:panelGrid id="strMaint" columns="2">
                            <h:outputText value="#{storeSearchBean.selectedStore.store}" />
                            <h:outputText value="#{storeSearchBean.selectedStore.store_name}" />
                        </h:panelGrid>
                    </p:dialog>
                </p:outputPanel>
            </p:panel>
            <div id="copyright">Copyright &copy; 2012 QR Retail Automation (ASIA) Sdn. Bhd. All rights reservered.</div>
        </h:form>
    </h:body>
</html>

When I remark the two <p:ajax /> component, the Dialog and PanelGrid gets rendered OK in the browser.

My environment is as below:

Thanks.

Upvotes: 0

Views: 1819

Answers (1)

Ravi Kadaboina
Ravi Kadaboina

Reputation: 8574

You need to search for the component using absolute ID. If you see the search algorithm for findComponent:

Identify the UIComponent that will be the base for searching, by stopping as soon as one of the following conditions is met:

  • If the search expression begins with the the separator character (called an "absolute" search expression), the base will be the root UIComponent of the component tree. The leading separator character will be stripped off, and the remainder of the search expression will be treated as a "relative" search expression as described below.

  • Otherwise, if this UIComponent is a NamingContainer it will serve as the basis.

  • Otherwise, search up the parents of this component. If a NamingContainer is encountered, it will be the base.

  • Otherwise (if no NamingContainer is encountered) the root UIComponent will be the base.

The <p:commandButton> is inside <p:dataTable> which is a UINamingContainer. So your search stops at second bullet.

You can solve this by prepending the search expression with the separator char to search the component from the root like this:

update=":frmMain:strMaint"

Documentation

Upvotes: 2

Related Questions