+ Start a Discussion
SATHISH REDDY.SATHISH REDDY. 

VFP scrolls - Set Focus/landing on the last edited record instead of setting it to top record in the scrollable table

Hi, We have a VF page with scrollable table with some Account records and a Save button at the top of the Table. If we scroll to the middle and try editing any record there, and then click Save, the page redirects the focus position to the top of that table. I want to keep the focus where the last Scroll was left or at the last edited record. Please let me know if anybody faced this issue and were able to get through it.

In the below code, I have removed all the fields shown in the image except for the Activity Date.
<apex:page sidebar="false" controller="Test" standardStylesheets="true">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/JavaScript" />
    <style>
        .table-container {
            Width:  100.5%;
            height: 400px;
            border: 1px solid black;
            margin: 10px auto;
            background-color: #FFFFED;
            position: relative; /* or absolute */
            padding-top: 30px; /* matches height of header */
        }
        .table-container-inner {
            overflow-x: hidden;
            overflow-y: auto;
            height: 100%;
            Width:  auto;
        }
        .heading-bg {
            background-color: #66C87D;
            height: 30px; /* matches padding of table-container */
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            border-bottom: 1px solid black;
        }
        table {
            width: auto;
        }
        .heading {
            position: absolute;
            top: 0;
            font-weight: bold;
            text-align: center;
        }    
    </style>
    <apex:form id="formId">
        <apex:pageMessages id="msgId"/>
        <apex:pageBlock Title="Accounts List" mode="inlineEdit" id="acc_list" >
        <apex:pagemessages />
            <apex:pageBlockButtons >
                 <apex:commandButton action="{!Edit}" id="editButton" value="Edit"/>
                 <apex:commandButton action="{!save}" id="saveButton" value="Save"/>
                 <apex:commandButton action="{!cancel}" onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>
            </apex:pageBlockButtons>    
    <!-- ***Detail Mode*** -->            
            <apex:outputpanel rendered="{!view}" id="view">
                <apex:actionStatus id="loading" >
                    <apex:facet name="start" >
                      <center><img src="/img/loading32.gif" />      Loading....  Please Wait...  </center>          
                    </apex:facet>
                </apex:actionStatus>
                <div class="table-container">
                <div class="heading-bg"></div><div class="table-container-inner"> 
                        <table id="schTable" >
                            <thead><tr><td><div class="heading" style="width: 60px;word-wrap:break-word;">Activity Date</div></td></tr></thead>
                            <tbody>
                                <apex:repeat value="{!lstaAccs}" var="a"><tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
                                <td><div style="width: 80px;word-wrap:break-word;">
                                   <apex:outputField value="{!a.Acc.Due_Date__c}" title="Due Date">
                                                <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton" event="ondblclick" changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                                  </apex:outputField></div>
                                </td></tr></apex:repeat>
                            </tbody>
                        </table>
                    </div></div>
            </apex:outputpanel>                       
        </apex:pageBlock>
    </apex:form>
    <script>
        var $ = jQuery.noConflict();
         $(document).ready(function(){
          $("#toggleId").click(function(){
            $("#detailTblId").toggle();
            if($("#detailTblId").css('display')=='none'){
                $('#linkTextId').html('Click here to show the Contact information in the Tabular form.');
            }else{
                $('#linkTextId').html('Click here to Hide.');
            }
          });                                           
        }); </script> </apex:page>

User-added image