I have a scrollable table with some account records. Once any record is edited and save button is clicked/rerenders the focus auto scrolls to top of the Scrollable Table. I am trying to set the focus to the last edited record's row instead of top of the scrollable table.

<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" />
    .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;
<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"/>
<!-- ***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>          
            <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>
                            <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"/>
    var $ = jQuery.noConflict();
            $('#linkTextId').html('Click here to show the Contact information in the Tabular form.');
            $('#linkTextId').html('Click here to Hide.');
    }); </script> </apex:page>

enter image description here

  • @Partha Sarathi Mandal - can you pls help with this – Sam May 19 '17 at 6:12
  • @Rohit Mourya - can you pls help with this – Sam May 19 '17 at 6:13
  • @crmprogdev - can you pls help on this if possible – Sam May 19 '17 at 6:14
  • @Keith Can you pls help – Sam May 20 '17 at 7:00
  • @Mohith Shrivastava Can you pls help – Sam May 20 '17 at 7:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.