6 Replies Latest reply on Mar 24, 2011 9:21 AM by muralib12

    Row change functionality in rich:extendedDataTable is not working as expected

    sen.kaustuvit

      I have an extendedDataTable. Now the scenario is this once I change the value in one row if I go to the next row without saving then a confirm dialog box comes.

      1.On clicking of the OK button the edit icon should go;also the data should be refreshed with previous record before editing and the next row should be selected.

      2. On clicking of the Cancel button the row that is selected earlier will not change.

       

      The Functionality is not working.Plz help me with the solution if anyone knows....

       

      <a4j:form id="firstForm" >

                  <a4j:jsFunction name="onSelectionChangeJS" action="masterRowSelected" reRender="fragmentTwo,fragmentThree" oncomplete="if(!navigateAway()){return false;}">

                  </a4j:jsFunction>

      <rich:extendedDataTable

                      id="abc"

                      value="#{ab}"                            

                                  var="_cd"                              

                                    reRender="xy"  rows="3" height="140px"

                                  noDataLabel="Hello."

                                  enableContextMenu="false"

                                  selection="#{ab.selection}"

                                  selectionMode="single" rowKeyVar="row"

                                  onselectionchange="onSelectionChangeJS();">     

       

      Thanks in advance

       

      Kaustuv 

        • 1. Row change functionality in rich:extendedDataTable is not working as expected
          ilya_shaikovsky

          please show more complete code.

          • 2. Row change functionality in rich:extendedDataTable is not working as expected
            sen.kaustuvit

            <a4j:form id="firstForm" >

                        <a4j:jsFunction name="onSelectionChangeJS" action="masterRowSelected" reRender="fragmentTwo,fragmentThree" oncomplete="if(!navigateAway()){return false;}">

                        </a4j:jsFunction>

            <rich:extendedDataTable

                            id="abc"

                            value="#{ab}"                            

                                        var="_cd"                              

                                          reRender="ds"  rows="3" height="140px"

                                        noDataLabel="Hello."

                                        enableContextMenu="false"

                                        selection="#{ab.selection}"

                                        selectionMode="single" rowKeyVar="row"

                                        onselectionchange="onSelectionChangeJS();">

             

                                          <rich:column style="text-align:center;" sortable="false" width="50px">

             

                                            <f:facet name="header">ID</f:facet>

             

                                            <h:outputText value="#{_cd.id}" style="text-align:center;"/>

                                           

                                            <h:panelGroup id="masterEditImgPanel" rendered="true">

               

                                                <h:graphicImage id="masterEditImg" 

                                                    value="/images/edit.gif" rendered="#ab.currentRowEdited}"/>

                                           

                                                <rich:toolTip for="masterEditImg" value="Click 'Save' Button to Save Changes."/>                                           

                                               

                                            </h:panelGroup>

                                                                           

             

                                         </rich:column>    

                                       

                                        <rich:column  sortable="false">

             

                                                    <f:facet name="header">Name <span class="required">*</span></f:facet>

             

                                                    <h:inputText id="name"

                                                                 size="12" maxlength="35"

                                                                 value="#{_cd.name}">

                                                        <rich:ajaxValidator event="onblur" reRender="name"                                                

                                                            ignoreDupResponses="true"/>

                                                        <a4j:support event="onchange"  action="masterRowEdited" reRender="masterEditImgPanel"

                                                            oncomplete="setModifiedFlag()" ajaxSingle="true"/>

                                                    </h:inputText>

             

                                                    <ui:decorate template="../layouts/errorMessage.xhtml">

                                                        <ui:param name="compId" value="name"/>

                                                    </ui:decorate>

             

                                         </rich:column>

                                       

                                        <rich:column style="text-align:center;" sortable="false">

             

                                                    <f:facet name="header">Industry <span class="required">*</span></f:facet>

                                                   

                                                    <h:selectOneMenu  id="industry" value="#{_cd.industry}">

             

                                                        <f:selectItem itemLabel="Retail" itemValue="Retail"/>

             

                                                        <f:selectItem itemLabel="IT" itemValue="IT"/>

             

                                                        <f:selectItem itemLabel="Finance" itemValue="Finance"/>   

                                                       

                                                        <a4j:support event="onchange"  action="masterRowEdited" reRender="masterEditImgPanel"

                                                            oncomplete="setModifiedFlag()" ajaxSingle="true"/>

             

                                                    </h:selectOneMenu>

             

                                         </rich:column>

                                       

                                        <rich:column style="text-align:center;" sortable="false">

             

                                                    <f:facet name="header">Tax Id <span class="required">*</span> </f:facet>

             

                                                    <h:inputText id="taxId" size="12" maxlength="35"

             

                                                    value="#{_cd.taxId}">

                                                                

                                                        <rich:ajaxValidator event="onchange" reRender="taxId"

                                                            ignoreDupResponses="true"/>

             

                                                        <a4j:support event="onchange"  action="masterRowEdited" reRender="masterEditImgPanel"

                                                            oncomplete="setModifiedFlag()" ajaxSingle="true"/>

                                                           

                                                    </h:inputText>

                                                <ui:decorate template="../layouts/errorMessage.xhtml">

                                                <ui:param name="compId" value="taxId"/>

                                            </ui:decorate>    

             

                                         </rich:column>

                                       

                                        <rich:column style="text-align:center;" sortable="false">

             

                                                    <f:facet name="header">Address</f:facet>

             

                                                    <h:inputText id="address"

             

                                                                 size="12"

             

                                                                   maxlength="35"

             

                                                                 value="#{_cd.address}" >

                                                                

                                                        <rich:ajaxValidator event="onchange" reRender="address"

                                                            ignoreDupResponses="true"/>

                                                           

                                                        <a4j:support event="onchange"  action="masterRowEdited" reRender="masterEditImgPanel"

                                                            oncomplete="setModifiedFlag()" ajaxSingle="true"/>

                                                           

                                                    </h:inputText>

             

                                         </rich:column>

                                       

                                        <rich:column style="text-align:center;" sortable="false">

             

                                                    <f:facet name="header">Contact Number</f:facet>

             

                                                    <h:inputText id="contactNumber" size="12" maxlength="35"

             

                                                                 value="#{_cd.contactNumber}">

                                                       

                                                        <rich:ajaxValidator event="onchange" reRender="contactNumber"

                                                            ignoreDupResponses="true"/>

                                                                                                           

                                                        <a4j:support event="onchange"  action="masterRowEdited" reRender="masterEditImgPanel"

                                                            oncomplete="setModifiedFlag()" ajaxSingle="true"/>

                                            <ui:decorate template="../layouts/errorMessage.xhtml">

                                                <ui:param name="compId" value="contactNumber"/>

                                            </ui:decorate>    

                                    </h:inputText>

             

                                         </rich:column>

                                       

                                        <rich:column style="text-align:center;" sortable="false" width="150px">

             

                                    <f:facet name="header">Job Status</f:facet>

                                                         

                                   

                                    <h:inputText id="jobStatus" value="#{_cd.jobStatus}" converter="jobStatusConverter"/>

                               

                                    <a4j:commandLink action="invokeGridjobStatusLookupPopup" reRender="jobLookupPopupFragment"

                                                     oncomplete="#{rich:component('jobStatusLookupPopup')}.show();" ajaxSingle="true">

                               

                                        <h:graphicImage value="/images/lookup.gif" style="vertical-align: middle; padding-left: 4px;"/>

                               

                                    </a4j:commandLink>

             

                                    

             

             

                                         </rich:column>

                                       

                                        <rich:column style="text-align:center;" sortable="false">

             

                                                    <f:facet name="header">Reason</f:facet>

             

                                                    <h:inputText id="reason" size="12" maxlength="35"

             

                                                                 value="#{_cd.reason}">

                                                                

                                                        <rich:ajaxValidator event="onchange" reRender="reason"

                                                            ignoreDupResponses="true"/>

                                                           

                                                        <a4j:support event="onchange"  action="masterRowEdited" reRender="masterEditImgPanel"

                                                            oncomplete="setModifiedFlag()" ajaxSingle="true"/>

                                                           

                                                    </h:inputText>

             

                                         </rich:column>

                                       

                                        <rich:column style="text-align:center;" sortable="false">

             

                                            <f:facet name="header">Actions</f:facet>

                                           

                                            <a4j:commandLink ajaxSingle="true" id="deletelink"

                                                oncomplete="#{rich:component('deletePanel')}.show()">

                                                <h:graphicImage value="/images/delete.gif" style="border:0" />                                   

                                            </a4j:commandLink>

                                           

                                            <rich:toolTip for="deletelink" value="Delete Master Information" />

                                           

                                         </rich:column>

                                       

                                        <f:facet name="footer">

                                           

                                                <rich:datascroller id="ds" align="left" >

                                                   

                                                    <a4j:support event="onpagechange" action="refreshDetailRecords" reRender="fragmentTwo,fragmentThree"

                                                        onsubmit="if(!navigateAway()){return false;}"/>

                                                   

                                                </rich:datascroller>   

                                                                           

                                        </f:facet>

                                       

                        </rich:extendedDataTable>

                           

                 

                       

                        <a4j:commandButton value="Save" action="update" reRender="mainFragment,popupFragment"

                           

                            oncomplete="clearModifiedFlag()"/>

                           

                        <a4j:commandButton value="Reset" immediate="true"  action="#{ab.reset}" reRender="masterTable"/>

                       

                    </a4j:form>

             

            Plz share with the idea of how to solve the problem..

             

            Thanks in advance........

            • 3. Re: Row change functionality in rich:extendedDataTable is not working as expected
              ilya_shaikovsky

              1) I do not see any confirmation dialog code there going between rows.. (or you mean scrolling using DS component?)

              2) try to simplify your sample  for the beginning.. Seems could be too much requests. (e.g. together with input change selection change could occur). Or play with queue to prevent that.

              3) a4j:support and rich:ajaxValidator has no sence together on the same event. second just replaces the first. And anyway both are fires simlar requests in the same time just with different lifecycle. leave only a4j:support in that case.

              • 4. Row change functionality in rich:extendedDataTable is not working as expected
                sen.kaustuvit

                Thnx Ilya for ur No. 3 suggestion & sry for not giving u the script for navigateAway() method..Now the confirm dialog box will come & hence plz help me with some suggestions.

                 

                 

                <script>

                       

                            var dataModifiedFlag=false;

                       

                            function navigateAway(){

                           

                                if(dataModifiedFlag==true){

                                    var resultt=confirm('Do You want to navigate without saving the records? ');

                                   

                                   

                                    if(resultt==true){

                                        clearModifiedFlag();

                                    }

                                   

                                    return resultt;

                                    }

                                else

                                    return true;

                            }

                           

                            function setModifiedFlag(){               

                                dataModifiedFlag=true;

                            }

                           

                            function clearModifiedFlag(){               

                                dataModifiedFlag=false;

                            }

                        </script>

                       

                        <script>

                            window.onbeforeunload=function (event){

                                if(dataModifiedFlag==true){

                                    return '';

                                }

                                else

                                    return;

                            }

                        </script>

                • 5. Row change functionality in rich:extendedDataTable is not working as expected
                  ilya_shaikovsky

                  for selection  change event you using navigateAway in oncomplete. It's too late the request has been already send and response returned and changes applied.

                  • 6. Re: Row change functionality in rich:extendedDataTable is not working as expected
                    muralib12

                    Hi ilya,

                     

                    thanks for your quick response. what kaustuv trying to convey is...

                     

                    in short -

                    <rich:extendedDataTable onselectionchange="return false;"> does this prevent the user not to navigate to another row??

                     

                    he is using extendedDataTable, user is in row1. it has some input controls (text boxes, dropdown, etc...). user changed a value in those controls and he is monitoring that. when user moves to row2, he is warning the user by throwing a confirm box with message like 'do you want to navigate away from this row with out saving the current record(row1 dirty data)'. when he clicks on 'cancel' he expects that the row selection would remain back in row1.but actually row2 is selected.

                     

                    treat that he has the below code

                    <rich:extendedDataTable onselectionchange="if(!navigateAway()){return false;}">