primefaces datatable scroll down to position

Question

i am developing an application using jsf with primefaces, i need one help regarding primefaces datatable i have large number of datas in datatable with selection single or multiple option.

I want to select the row automatically through action or default position which is selected.

My need is when i am selecting 20th row in the table and goes into next page and do some process returns back to the same page but it is selected in the 20th row but it is not scrolled down yet.

I need scroll down position to where it is selected and processed.

Here is my code for view

<p:dataTable id="reactionTable" var="reactions" value="#{curation.reactionsList}"
                                                selection="#{curation.selectedReactions}" scrollable="true" scrollHeight="200" rows="10"
                                                rowKey="#{reactions.id}" widgetVar="reactionVar"
                                                style="width: 1350px; font-size: 13px;" filteredValue="#{curation.reactionsFilteredList}" 
                                                resizableColumns="true">
       <p:ajax event="rowToggle" listener="#{curation.toggleReaction}"/>
       <p:ajax event="rowSelect" listener="#{curation.showStages}" update="@form"/>
       <p:column selectionMode="multiple" style="width:5%" />  
       <p:column headerText="Id" width="7%" filterBy="#{reactions.rxnId}" filterStyle="width: 35px;" filterMatchMode="contains" sortBy="#{reactions.rxnId}">
                                            #{reactions.rxnId}
      </p:column>
      <p:column headerText="RxnNo" width="9%" filterBy="#{reactions.rxnNo}" filterStyle="width: 35px;" filterMatchMode="contains" sortBy="#{reactions.rxnNo}">  
                                            #{reactions.rxnNo}  
       </p:column>
        <p:column headerText="RxnSeq" width="9%" filterBy="#{reactions.rxnSeq}" filterStyle="width: 25px;" filterMatchMode="contains" sortBy="#{reactions.rxnSeq}">  
                                            #{reactions.rxnSeq}  
       </p:column>
                                        <p:column headerText="RSD" width="40%" filterBy="#{reactions.rsd}" filterStyle="width: 250px;" filterMatchMode="contains" sortBy="#{reactions.rsd}">  
                                            #{reactions.rsd}  
        </p:column>
        <p:column headerText="RSN" width="40%" filterBy="#{reactions.rsn}" filterStyle="width: 250px;" filterMatchMode="contains" sortBy="#{reactions.rsn}">  
                                            #{reactions.rsn}  
        </p:column>
        <p:column headerText="RSN Free Type" width="40%" filterBy="#{reactions.rtf}" filterStyle="width: 250px;" filterMatchMode="contains" sortBy="#{reactions.rtf}">  
                                            #{reactions.rtf}  
        </p:column>
        <f:facet name="footer">   
        <p:commandButton value="Copy" icon="ui-icon-search"  
                update="reactionTable" actionListener="#{curation.copyReaction()}" style="height: 25px; font-size: 12px; font-weight: bold;"/>
            <p:commandButton value="Create RSD" id="create" actionListener="#{curation.createReaction()}" action="#{createReaction.createRsd()}" style="height: 25px; font-size: 12px; font-weight: bold;"/>
            <p:commandButton value="Update" id="ajax" update="@form" actionListener="#{curation.updateBatch}" style="height: 25px; font-size: 12px; font-weight: bold;"/>    
        </f:facet>

but i've used one javascript for scrolling position fixed

var scrollPosition;
        function saveScrollPosition() {
            scrollPosition = $('#reactionTable').scrollTop();
        }
        function setScrollPosition() {
            $('#reactionTable').scrollTop(scrollPosition);
        }

but it didn't worked also Can anyone help me solve this problem

Answer 1

The following javascript function scrolls the selected item of a <p:dataTable selectionMode="single" into the visible area:

/**
 * This function scrolls the selected Item of a 
 * <p:dataTable id="idDataTable" selectionMode="single" 
 * into the visible area
 * <p:dataTable renderes to a scroll-container with the css-class: ui-datatable-scrollable-body (inside the element with the id : "idDataTable")
 * and to a container holding all items with the id: "idDataTable"_data 
 *
 * @param idDataTable   z.B.: idForm:idDataTable
 */
function autoScrollPDatatable(idDataTable) 
{
    // for selection in JQuery the ids with : must be endoded with \\:
    var primfcid = idDataTable.replace(':', '\\:');
    var idDataTbl = '#' + primfcid;
    var idDataContainer = idDataTbl  + "_data";

    var totalHeight = $(idDataTbl + " .ui-datatable-scrollable-body").height();
    var lichildren = $(idDataContainer).children("tr");
    var itemHeight = $(idDataContainer).children("tr").height();
    var anzItems = lichildren.length;
    var anzVisItems = totalHeight / itemHeight;
    var selItem = detectDataTableScrollPos(lichildren); 
    if(selItem == -1)
    {
        // no selection found...
        return;
    }

    var maxScrollItem = anzItems - anzVisItems;
    var scrollTopInPx; 
    if(selItem >= maxScrollItem)
    {
        // scroll table to the bottom
        scrollTopInPx = maxScrollItem * itemHeight;
    }
    else if(selItem < 2)
    {
        // scroll table to the top
        scrollTopInPx = 0;
    }
    else
    {
        // scroll selected item to the 1.2 th position
        scrollTopInPx = (selItem - 1.2) * itemHeight;
    }

    $(idDataTbl + " .ui-datatable-scrollable-body").animate({scrollTop:scrollTopInPx}, scrollTopInPx);  
}


function detectDataTableScrollPos(liChildren)
{
    for (i=0;i< liChildren.length;++i)
    {
        var chd = liChildren[i];
        var x = chd.getAttribute("aria-selected");
        if(x === "true")
        {
            return i;
        }
    }
    return -1;
}

Call this function for example after an ajax request that manipulated the content of your datatable:

<body>
    <f:view>
        <h:form id="idForm">
            <p:dataTable    id="idDatalist" 
                            selectionMode="single"
                            scrollable="true"
                            scrollHeight="100%"
                            ....>
            </p:dataTable>



            ....
            <p:ajax update=":idForm:idDatalist"
                        oncomplete="autoScrollPDatatable('idForm:idDatalist');" />

            ....