Richfaces ExtendedDataTable update without scrolling to top

Question

I'm trying to implement a chat function using rich:extendedDataTable. I can receive messages as they come in by polling the table just fine, but each time I poll the table it scrolls back to the top, making it impossible to read earlier messages. Is there a way to disable that function, or to load in such a way that it doesn't refresh the entire table but instead adds rows as needed? Here is the code:

<rich:extendedDataTable
    id="message_list"
    var="message"
    value="#{studentChat.chatLog.messages}">
    <rich:column width="100%">
        <f:facet name="header">
            <h:outputText value="Messages" styleClass="label_general"/>
        </f:facet>
        <!-- Style blue if teacher sent, light grey if student sent -->
        <div style="border-radius:3px; background-color: #{(message.senderRole eq loggedUser.role ) ? '#b9caee': '#eeeeee'}">
            <h:outputText value="#{message.message}" style="font-size: 1.3em"/><br></br>
            <h:outputText value="sent #{message.timestamp}" style="float:right; font-size:.9em" /><br></br>
            <h:outputText value="#{message.viewed ? 'read' :'delivered'}" style="font-size: .9em; float: right" />
        </div>  
    </rich:column>
</rich:extendedDataTable>

It is being polled by an each second. I am limited to Richfaces 3 and JSF 1.2. Thanks in advance!

Take a look at the usage example on Exadel: livedemo.exadel.com/richfaces-demo/richfaces/… and here is the source code of the extendedDataTableBean opensourcejavaphp.net/java/jbossportletbridge/org/richfaces/… — Jorge Campos
With a very small amount of javascript (jquery), you can make it scroll down after the update — Kukeltje
@Kukeltje would you mind explaining how to do that with Jquery? I am not too familiar with it yet as I have only recently gotten into web dev. Thanks for the help so far! — vdwtanner
Sorry, not much time and no RichFaces user anymore. But check this google.nl/search?q=jquery+scroll+div+to+bottom first hits in google are stackoverflow ones and check related questions on the right in the full desktop site of SO stackoverflow.com/questions/14918787/… — Kukeltje

vdwtanner vdwtanner · Accepted Answer · 2015-02-27T05:56:56

I got an answer from a coworker. It's actually incredibly simple. All you have to do is wrap a normal dataTable within a panelGroup as follows:

<h:panelGroup layout="block" style="overflow: auto; height: 700px">
    <h:dataTable id="myTable" ></h:dataTable>
</h:panelGroup>

With this setup you can still use a poll on the table, but the parent component isn't rerendered so it the user isn't forced to scroll back to the top.

Hope that helps someone else as much as it did me!

Richfaces ExtendedDataTable update without scrolling to top

1 Answers