13 Replies Latest reply on Feb 4, 2010 9:38 PM by sburgula1

    Creating editable rich:dataTable with rich:datascroller

    aogier.netangel+seamframework.gmail.com

      I'm trying to create a rich:dataTable and use rich:datascroller with it. Actually the problem is that there is some editable fields inside the iterated datas.


      Here is the use case I would like to see working : I edit some field, then go to the next page, edit some other fields, go back to the first page and see my previous edition displayed.


      Here is the xhtml :


      <h:form>
        <rich:dataTable value="#{commandHome.productList}" var="product" rows="10">
          <rich:column>
            <h:selectBooleanCheckbox value="#{product.selected}" />
          </rich:column>
          <rich:column>
            <h:outputText value="#{product.label}" />
          </rich:column>
          <rich:column>
            <h:inputText value="#{product.comment}" />
          </rich:column>
          <f:facet name="footer">
            <rich:datascroller maxPages="5" />
          </f:facet>
        </rich:dataTable>
        <h:commandButton action="#{commandHome.persist}" value="Save"/>
      </h:form>



      Here is a part of the CommandHome


      public class CommandHome extends EntityHome<Command> {
        ...
        public List<Product> getProductList() {
          if (productList != null) {
            productList = new ArrayList(getInstance().getProducts());
          }
          return productList;
        }
      


      The Product class is a simple Entity class with getters and setters.


      With that code and richfaces 3.2.1 GA, my use case fails : when I go back to the first page, the fields are like they were the first time displayed.


      More strange behavior : when I click on my Save button, the part of my list which is displayed is updated with the values in my fields before my persist() method is called, but not the hidden part, even if previously modified.


      Does somebody know why, and have a hint to make an editable dataTable with datascroller ? (it sounds a basic need for a framwork to me)

        • 1. Re: Creating editable rich:dataTable with rich:datascroller
          stefanotravelli

          In order to achieve an editable rich:datatable you need a JSF DataModel in the 'value' attribute, not a simple List.


          With Seam you can easily outject a conversational JSF DataModel through the @DataModel annotation.


          I can't understand the role of the Command entity and why do you call persist(), however form values are updated during the JSF UPDATE MODEL phase, so before the INVOKE APPLICATION for the exact purpose of allowing the backing bean to deal with the updated values when it get invoked.


          hope this helps
          stefano

          • 2. Re: Creating editable rich:dataTable with rich:datascroller
            aogier.netangel+seamframework.gmail.com

            Actually I've managed to solve my problem.


            It's not a problem of @DataModel, I just had to add a <a:support event="onpagechange"/> on my datascroller, and it worked ! (I've also put a reRender attribute, and didn't test without)


            <rich:dataTable id="dataTableId" value="#{commandHome.productList}" var="product" rows="10">
              <rich:column>
                <h:selectBooleanCheckbox value="#{product.selected}" />
              </rich:column>
              <rich:column>
                <h:outputText value="#{product.label}" />
              </rich:column>
              <rich:column>
                <h:inputText value="#{product.comment}" />
              </rich:column>
              <f:facet name="footer">
                <rich:datascroller  reRender="dataTableId"
                                    limitToList="true">
                    <a:support event="onpagechange"/>
                </rich:datascroller> 
              </f:facet>
            </rich:dataTable>
            

            • 3. Re: Creating editable rich:dataTable with rich:datascroller
              aogier.netangel+seamframework.gmail.com

              (Oh, by the way, I've made a translation mistake for all that talk about Command on my examples, actually I meant Order. So I should have talked about OrderHome. That's why I persist() my OrderHome ;) )

              • 4. Re: Creating editable rich:dataTable with rich:datascroller
                raghu_dev2005
                How to reRender the dataTable when there is only one page.

                I tried to reRender the datatable using <a:support event="onsubmit"/>. But it is not working.
                Can u suggest me the solution.         
                • 5. Re: Creating editable rich:dataTable with rich:datascroller
                  aogier.netangel+seamframework.gmail.com

                  I don't really understand your question... It's AJAX so there is always the same page displayed and updated with user actions...

                  • 6. Re: Creating editable rich:dataTable with rich:datascroller
                    aogier.netangel+seamframework.gmail.com

                    Be carefull with that solution.


                    I've encountered a problem when I created rich:toolTip with mode='ajax' on an image in one of my columns : the content was computed which, in my case, was stressing the database, and slowing all the page.


                    The solution I've found is to delete the famous <a:support event="onpagechange"/> on the rich:datascroller and pass all the h:inputText in AJAX submition on change :


                    <h:inputText value="product.comment">
                      <a:support event="onchange"/>
                    </h:inputText>



                    • 7. Re: Creating editable rich:dataTable with rich:datascroller
                      raghu_dev2005
                      Inside the datatable,  rich:comboBox and  a h:inputText are there.The user can edit and should be able save the changes.I used the code u posted above for reRender the DataList.

                      <rich:dataTable value="#{effortPlanHandler.effortPlanModel.searchResult}" var="result" id="searchList" rows="15">
                      .........
                      <rich:column>
                                                              <rich:comboBox value="#{result.previousStatus}" defaultLabel="--Select--"  >
                                                                   
                      <f:selectItem     itemValue="Approved" itemLabel="Approved"/>
                                                                   <f:selectItem     itemValue="InProgress" itemLabel="InProgress"/>
                                                                   <f:selectItem     itemValue="Assigned" itemLabel="Assigned"/>
                                                                   <f:selectItem     itemLabel="Completed" itemValue="Completed"/>
                                                              </rich:comboBox>
                                </rich:column>
                                <rich:column>
                                                              <h:inputText value="#{result.previousEffort}" ></h:inputText>
                                </rich:column>
                      .............
                      <f:facet name="footer">
                                                             <rich:datascroller  reRender="searchList" limitToList="true">
                                                                 <a4j:support event="onpagechange" />                                                                                     </rich:datascroller>
                                                           </f:facet>
                      </rich:datatable>
                             
                            This code works fine when the number of pages is more than one and the user switches to other pages. The problem i m facing is when the number of pages is 1. I tried with <a4j:support event="onsubmit"/> inside the datascroller to reRender the dataList when the user submits the form. But it doesn't work...Can u please give me the solution...  
                      • 8. Re: Creating editable rich:dataTable with rich:datascroller
                        aogier.netangel+seamframework.gmail.com

                        I found that it's finally better to use my second solution than my first one, I mean, the <a:support event="onchange" ajaxSingle="true"/> inside each inputs of the list, than the <a:support event="onpagechange"/> inside the rich:datascroller.


                        So for you, I would remove the <a:support event="onpagechange"/> from the rich:datascroller and add <a:support event="onchange" ajaxSingle="true"/> inside your h:inputText and rich:comboBox.


                        Example :


                        <h:inputText value="#{result.previousEffort}">
                          <a:support event="onchange" ajaxSingle="true"/>
                        </h:inputText>

                        • 9. Re: Creating editable rich:dataTable with rich:datascroller
                          raghu_dev2005
                          I tried the one u suggested above.But it is not working. We have given in the code that when a change happens we need support "<a:support event="onchange" ajaxSingle="true"/>", at the same time we need to update the List according to the change. How to do that?
                          • 10. Re: Creating editable rich:dataTable with rich:datascroller
                            aogier.netangel+seamframework.gmail.com

                            Just add a reRender="id_of_the_list" in the a:support...

                            • 11. Re: Creating editable rich:dataTable with rich:datascroller
                              raghu_dev2005
                              Thanks for u r spontaneous reply. But this time also it didn't work :-)

                              <rich:column>
                                                                      <rich:comboBox value="#{result.previousStatus}" defaultLabel="--Select--"  >
                                                                           
                              <f:selectItem     itemValue="Approved" itemLabel="Approved"/>
                                                                           <f:selectItem     itemValue="InProgress" itemLabel="InProgress"/>
                                                                           <f:selectItem     itemValue="Assigned" itemLabel="Assigned"/>
                                                                           <f:selectItem     itemLabel="Completed" itemValue="Completed"/>
                                                                           <a4j:support event="onchange" ajaxSingle="true" reRender="searchList"></a4j:support>
                                                                      </rich:comboBox>
                                                                 </rich:column>
                                                                 <rich:column>
                                                                      <h:inputText value="#{result.previousEffort}" ><a4j:support event="onchange" ajaxSingle="true"></a4j:support></h:inputText>
                                                                 </rich:column>
                                                                 <rich:column>

                              • 12. Re: Creating editable rich:dataTable with rich:datascroller
                                raghu_dev2005
                                Finally i got the solution for my problem....reRender works when the event is specified as 'onselect' for rich:comboBox.

                                <rich:comboBox value="#{result.previousStatus}" defaultLabel="--Select--" >
                                          <f:selectItem itemValue="Approved" itemLabel="Approved"/>
                                         <f:selectItem itemValue="InProgress" itemLabel="InProgress"/>
                                         <f:selectItem itemValue="Assigned" itemLabel="Assigned"/>
                                         <f:selectItem itemLabel="Completed" itemValue="Completed"/>
                                         <a4j:support event="onselect" ajaxSingle="true" reRender="searchList"></a4j:support>
                                </rich:comboBox>

                                Thanks for your continuous replies.
                                • 13. Re: Creating editable rich:dataTable with rich:datascroller

                                  Thank you.  This helped me a lot.  I followed the a4j:support tag syntax mentioned here and it works.  the paging and the selection of table rows.