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

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

    Kaustuv Sen Newbie

      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 

        • 2. Row change functionality in rich:extendedDataTable is not working as expected
          Kaustuv Sen Newbie

          <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 Master

            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
              Kaustuv Sen Newbie

              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 Master

                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
                  Murali Krishna Newbie

                  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;}">