Question

I have been searching for a while to find a solution for DataTable live scroll problem after sorting by a column.

First I found that “the columns” should have fixed width:

http://code.google.com/p/primefaces/issues/detail?id=1333

Then I found that scrollRows should be used instead of rows

http://code.google.com/p/primefaces/issues/detail?id=1236

Although I have made those changes, I couldn’t manage to put live scroll after sorting by a column.

Can anyone help me please?

Thanks & Regards.

<p:dataTable  id="simulationProductDtId" emptyMessage="#{msgs.notFoundSimulationDetail}" var="item"
         value="#{SimulationResultProductBean.simulationSummaryDetailList}"
         scrollable="true"
         scrollRows="25"
         scrollHeight="350" 
         liveScroll="true"
          resizableColumns="true" 
         style="border-bottom:1px solid #427CC7; overflow:scroll;position: relative;max-width: 100%;overflow-x: hidden"
         rowStyleClass="#{(SimulationResultProductBean.collapseSuperCode and item.gam) ? 'row' : null}"
          selection="#{SimulationResultProductBean.selectedSimulationDetail}" selectionMode="multiple"
         rowKey="#{item.id}">
          <f:facet name="header">
                                                  ...
          </f:facet>
          <p:column sortBy="#{item.productCode}" width="40"
                          rendered="#{DynamicSimulationTableBean.columnRenderedMap['productCode']}">
                         <f:facet name="header">
                               <h:outputLabel value="#{msgs.code}"/>
                          </f:facet>
                          <h:outputText value="#{item.productCode}" >
                                 <f:convertNumber type="number" integerOnly="true" groupingUsed="false"/>
                         </h:outputText>
           </p:column>

           <p:column sortBy="#{item.productName}" style="width:100px"
                           rendered="#{DynamicSimulationTableBean.columnRenderedMap['productName']}">
                          <f:facet name="header">
                             <h:outputLabel value="#{msgs.description}"/>
                          </f:facet>
           </p:column>
          //Other columns with fixed widths...

Answer 1

I found a LAZY solution with a reminder on the top of the datatable:

    <script> 
    function liveScroll(){
         simulationProductDt. scrollOffset = 25;
     }
    </script>
     <!-- UPDATE scrollOffset value in the liveScroll method when scrollRows is changed!-->
    <p:dataTable  id="simulationProductDtId" emptyMessage="#{msgs.notFoundSimulationDetail}" 
                         scrollable="true" scrollRows="25" scrollHeight="350"  liveScroll="true" 
                        ...other properties


         <p:ajax  event="sort" update="simulationProductDtId" onstart="liveScroll()" onerror="alert('ERROR!')" />
     </p:dataTable>

Hope this helps to somebody.