4 Replies Latest reply on Apr 6, 2011 11:23 AM by w0lfshad3

    ScrollableDataTable scroll resets on every request

    w0lfshad3

      EDIT

       

      Updated rows="14" from rows="10" which is one more than my table height will ever permit. Some IE problems gone.

       

      Updated currentRow = Integer.parseInt(FacesContext.getCurrentInstance()
                      .getExternalContext().getRequestParameterMap().get("row"));

      to "rkv" to match rowKeyVar="rkv" attribute... It still doesn't break when debugging so I'm pretty sure it does nothing.

       

      Updated all column ids to match the bean's fields, for instance rich:column's id with #{receipt.id}.

      It's like that in the examples, IDK if it helps.

       

      <rich:column id="id" width="70px">

                                      <f:facet name="header">

                                          ...

                                      </f:facet>

                                      <h:outputText value="#{receipt.id}" />

                                  </rich:column>

       

       

      When selecting I get the index of the row in the table not the id that I also use in sort. I need that id not the row index. If I use the index I need to sort on the server side the collection of objects to get the proper Id, and that's not going to happend if I have to sort by strings.

      BUG: Found a bug during this time, in livedemo, SrollableDataTable, select something, sort, select something else, show selecte will show what you selected first. I wonder if it's tied to the above.


       

      TIDE

       

       

       

      ScrollableDataTable doesn't work for me, under these conditions:

      Most important, in debug it doesn't enter any of the code that's meant for it from the example code I copied over and pasted below, except the getter for the data it displays and the order getter. I wasn't sure which was suppose to be in there and which not, still works bad.


       

      Firefox 3.6.13

           - behaviour: on every request scroll jumps to top position and table contents go blank; it happens only when dragging the scroll down. If i click on the scroll bar or scroll with the mouse wheel hovering over the scrollbar I can catch some values on the bottom side of content, while the scroll position jumps up on first request. There's something weird too, although the scroll position resets to top in Firefox, after I click on a column to sort, the scroll position goes to where it should've been but nothing shows in the table.

       

      Internet Explorer 7.0.5730.13

           - behaviour: after dragging the scroll down the first time, the scroll position stays, but enters an infinite loop of requests that run every 0.5s or so, and on every request table rerenders; only goes through JSF phases 1, 2 and 6;

      Solved infinite loop, one problem was that i set the ScrollableDataTable with rows="10", while the height allowed for 11 rows. This causes an infinite loop of requests. More details that might've helped in the reply.

      Another bug: sometimes, and pretty often, when scrolling, the table content remains blank while releasing mouse button from the scroll bar but still hovering on the scroll bar. Only after hovering over table content does the table display the content.

       

      RichFaces 3.3Final

      JSF Mojarra (1.2_12-b01-FCS)

      Facelets 1.1.15.B1

      JBoss 5.1.0.GA

       

      The code is pretty much that from the downloaded livedemo and its backing bean

      http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf

       

      sample AJAX POST request parameters (I'm wondering why all those scroll parameters leave empty or reseted):

      AJAX:EVENTS_COUNT1
      AJAXREQUEST_viewRoot
      autoScroll
      javax.faces.ViewStatej_id2
      receipts_formreceipts_form
      receipts_form:j_id17receipts_form:j_id17
      receipts_form:j_id17:s-1
      receipts_form:j_id17:scro...
      receipts_form:j_id17:si627,27,67,37,0
      receipts_form:j_id17_hc
      receipts_form:j_id17_opti...
      receipts_form:j_id17_rows...500
      receipts_form:j_id17_stat...27,40,37

       

      and some of subsequent response content that seem relevant:

      <input type="button" style="display: none;" onclick="A4J.AJAX.Submit('receipts_form',event,{'implicitEventsQueue':'receipts_form:j_id17','oncomplete':function(request,event,data){window.Richfaces_ScrollableGrid_receipts_form_j_id17.onScrollComplete(request,event,data)},'similarityGroupingId':'receipts_form:j_id17','parameters':{'receipts_form:j_id17':'receipts_form:j_id17','receipts_form:j_id17:scroll':''} ,'requestDelay':1000,'actionUrl':'/pfWeb/pages/receipts.jsf'} ); return false;" name="receipts_form:j_id17_submit_input" id="receipts_form:j_id17_submit_input">

       

      Response Header:

      ServerApache-Coyote/1.1
      X-Powered-ByServlet 2.5; JBoss-5.0/JBossWeb-2.1, JSF/1.2
      Pragmano-cache
      Cache-Controlno-cache, must-revalidate, max_age=0, no-store
      Ajax-Responsetrue
      Expires0
      Content-Typetext/xml;charset=UTF-8
      Transfer-Encodingchunked
      DateTue, 05 Apr 2011 08:05:11 GMT

       

      Request Header:

      Hostlocalhost:8080
      User-AgentMozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
      Accepttext/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
      Accept-Languageen-us
      Accept-Encodinggzip,deflate
      Accept-CharsetISO-8859-1,utf-8;q=0.7,*;q=0.7
      Keep-Alive115
      Connectionkeep-alive
      Content-Typeapplication/x-www-form-urlencoded; charset=UTF-8
      Refererhttp://localhost:8080/pfWeb/pages/login.jsf
      Content-Length417
      CookieJSESSIONID=78484A69CAF7EEA2B34E6F14BA12C5E8
      Pragmano-cache
      Cache-Controlno-cache

       

       

      relevant xml:

      [code]

      <rich:scrollableDataTable rowKeyVar="rkv"

                                  value="#{receiptsBean.receipts}" var="receipt" width="720px"

                                  height="273px" sortMode="single" rows="10"

                                  selection="#{receiptsBean.selection}"

                                  sortOrder="#{receiptsBean.order}">

                                  <rich:column id="receiptId" width="70px">

                                      <f:facet name="header">

                                          <h:outputText value="#{msg.receiptId}" />

                                      </f:facet>

                                      <h:outputText value="#{receipt.id}" />

                                  </rich:column>

                                  <rich:column id="receiptName" width="150px">

                                      <f:facet name="header">

                                          <h:outputText value="#{msg.name}" />

                                      </f:facet>

                                      <h:outputText value="#{receipt.name}" />

                                  </rich:column>

                                  <rich:column id="receiptDescription" width="200px">

                                      <f:facet name="header">

                                          <h:outputText value="#{msg.description}" />

                                      </f:facet>

                                      <h:outputText value="#{receipt.description}"

                                          title="#{receipt.description}" />

                                  </rich:column>

                                  <rich:column id="receiptQuantity" width="100px">

                                      <f:facet name="header">

                                          <h:outputText value="#{msg.quantity}" />

                                      </f:facet>

                                      <h:outputText value="#{receipt.soldQuantity}" />

                                  </rich:column>

                                  <rich:column id="receiptCostPrice" width="100px">

                                      <f:facet name="header">

                                          <h:outputText value="#{msg.costPrice}" />

                                      </f:facet>

                                      <h:outputText value="#{receipt.costPrice}" />

                                  </rich:column>

                                  <rich:column id="receiptAisle">

                                      <f:facet name="header">

                                          <h:outputText value="#{msg.aisle}" />

                                      </f:facet>

                                      <h:outputText value="#{receipt.aisle}" />

                                  </rich:column>

                                  <a4j:support reRender="selected_receipt"  action="#{receiptsBean.takeSelection}"

                                      event="onselectionchange" />

                              </rich:scrollableDataTable>[/code]

      Removing, a4j:support has no effect

       

      relevant backing code:

      [code]

          private List<Receipt> receipts;

          private Receipt currentReceipt = new Receipt();

          private SortOrder order = new SortOrder();

          private int currentRow;

          private Set<Integer> keys = new HashSet<Integer>();

       

      @PostConstruct

          public void init() {

              SortField[] fields = { new SortField("id", true) };

              order.setFields(fields);

       

              updateReceipts();

          }

       

      // start used by ScrollableDataTable

          public void store() {

              receipts.set(currentRow, currentReceipt);

              keys.clear();

              keys.add(currentRow);

          }

       

          public void delete() {

              receipts.remove(currentRow);

          }

          public void fetchCurrentRow(ActionEvent event) {

              Integer id = Integer.parseInt(FacesContext.getCurrentInstance()

                      .getExternalContext().getRequestParameterMap().get("id"));

              currentRow = Integer.parseInt(FacesContext.getCurrentInstance()

                      .getExternalContext().getRequestParameterMap().get("row"));

              for (Receipt receipt : receipts) {

                  if (receipt.getId().equals(id)) {

                      currentReceipt = receipt;

                      break;

                  }

              }

          }

          // end used by ScrollableDataTable

       

      public List<Receipt> getReceipts() {

              return receipts;

          }

       

          public void setReceipts(List<Receipt> receipts) {

              this.receipts = receipts;

          }

       

          public SortOrder getOrder() {

              return order;

          }

       

          public void setOrder(SortOrder order) {

              this.order = order;

          }

       

          public int getCurrentRow() {

              return currentRow;

          }

       

          public void setCurrentRow(int currentRow) {

              this.currentRow = currentRow;

          }

       

          public Receipt getCurrentReceipt() {

              return currentReceipt;

          }

       

          public void setCurrentReceipt(Receipt currentReceipt) {

              this.currentReceipt = currentReceipt;

          }

       

          public Set<Integer> getKeys() {

              return keys;

          }

       

          public void setKeys(Set<Integer> keys) {

              this.keys = keys;

          }[/code]

        • 1. ScrollableDataTable scroll resets on every request
          ilya_shaikovsky

          does your data unchanged between requests? And check that SDT component not wrapped to AjaxRendered outputPanel.

          • 2. Re: ScrollableDataTable scroll resets on every request
            w0lfshad3

            My data doesn't change between requests.

            My data list (of Receipts) gets initialized on PostConstruct and changes only on special occasions, such as when I select and delete an item. I keep a boolean specially for that to keep updates in check (which is tested and works), since the flow enters the method that updates the list every time the table renders, checks the boolean, and exits if it's false.


            My ScrollableDataTable is not a child component of OutputPanel in the component tree, also sometimes the data shows other times it doesn't when scrolling, and I can't scroll too far either since the scroll keeps reseting to 0 on every AJAX request. I also checked a4j:form vs h:form, no difference.

            • 3. Re: ScrollableDataTable scroll resets on every request
              ilya_shaikovsky

              About problem of selection - yup.. that's livedemo application issue. It was implemented properly but in the last iteration I unfortunatelly mistaken while simplified the code and issue appeared. Proper way should be checked from extendedDataTable demo sample(the same model supported by the SDT component)

               

              Other potential problem - do you use ajax requests queueing in your application? in case of SDT usage there are possible problems while queuing the requests from the table.

              • 4. Re: ScrollableDataTable scroll resets on every request
                w0lfshad3

                I don't use queueing. In fact I just read about it. Sounds like it should solve some of SDT problems on Firefox not cause more

                 

                Even if I would ignore Firefox because my application is only suppose to run in IE, there's the issue with the sorting. Because SDT inserts in "selected" variable row indexes from the table instead of inserting the ids of the records (like in ExtendedDataTable), I can't return the selected id of the record from the "selected" variable unless sorting by the same column as the user internally then relating the row id to extract the record id.

                 

                I even tried synchronizing the data getter but it didn't help at all.

                 

                 

                 

                 

                EDIT

                 

                Think we had something wrong on the network and/or the database, the DataScroller works fine, though its payload is kind of high (~180KB) on 10 pages max, table showing 10 rows per page, 1000 rows in the database.

                 

                Other than that could these settings in web.xml have anything to do with ScrollableDataTable? Haven't tested yet.

                 

                <context-param>

                        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>

                        <param-value>server</param-value>

                    </context-param>

                     <context-param>

                        <param-name>org.ajax4jsf.COMPRESS_SCRIPT</param-name>

                        <param-value>true</param-value>

                    </context-param>

                    <context-param>

                        <param-name>org.richfaces.LoadStyleStrategy</param-name>

                        <param-value>all</param-value>

                    </context-param>

                    <context-param>

                        <param-name>org.richfaces.LoadScriptStrategy</param-name>

                        <param-value>all</param-value>

                    </context-param>

                <filter>

                        <display-name>RichFaces Filter</display-name>

                        <filter-name>richfaces</filter-name>

                        <filter-class>org.ajax4jsf.Filter</filter-class>

                        <init-param>

                            <param-name>enable-cache</param-name>

                            <param-value>true</param-value>

                        </init-param>

                    </filter>

                 

                 

                TIDE