ScrollableDataTable scroll resets on every request
w0lfshad3 Apr 5, 2011 6:20 AMEDIT
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_COUNT | 1 |
AJAXREQUEST | _viewRoot |
autoScroll | |
javax.faces.ViewState | j_id2 |
receipts_form | receipts_form |
receipts_form:j_id17 | receipts_form:j_id17 |
receipts_form:j_id17:s | -1 |
receipts_form:j_id17:scro... | |
receipts_form:j_id17:si | 627,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:
Server | Apache-Coyote/1.1 |
X-Powered-By | Servlet 2.5; JBoss-5.0/JBossWeb-2.1, JSF/1.2 |
Pragma | no-cache |
Cache-Control | no-cache, must-revalidate, max_age=0, no-store |
Ajax-Response | true |
Expires | 0 |
Content-Type | text/xml;charset=UTF-8 |
Transfer-Encoding | chunked |
Date | Tue, 05 Apr 2011 08:05:11 GMT |
Request Header:
Host | localhost:8080 |
User-Agent | Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 |
Accept | text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 |
Accept-Language | en-us |
Accept-Encoding | gzip,deflate |
Accept-Charset | ISO-8859-1,utf-8;q=0.7,*;q=0.7 |
Keep-Alive | 115 |
Connection | keep-alive |
Content-Type | application/x-www-form-urlencoded; charset=UTF-8 |
Referer | http://localhost:8080/pfWeb/pages/login.jsf |
Content-Length | 417 |
Cookie | JSESSIONID=78484A69CAF7EEA2B34E6F14BA12C5E8 |
Pragma | no-cache |
Cache-Control | no-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]