How can I use the ScrollTo jQuery plugin to scroll to particular row in a repeater in ASP.NET?

Question

I have a simple repeater that looks like:

 <asp:Repeater runat="server" ID="rptOptions" OnItemDataBound="rptOptions_ItemDataBound">
     <HeaderTemplate>
         <thead>
             <tr>
                 <td class="GridHeader">Account</td>    
                 <td class="GridHeader">Margin</td>  
                 <td class="GridHeader">Symbol</td>  
                 <td class="GridHeader">Usymbol</td>  
             </tr>
         </thead>
     </HeaderTemplate>
     <ItemTemplate>
         <tbody>
             <tr runat="server" ID="trOption">
                 <td class="GridRow"><asp:Label runat="server" ID="lblOptionAccount"></asp:Label></td>
                 <td class="GridRow"><asp:Label runat="server" ID="lblOptionMargin"></asp:Label></td>
                 <td class="GridRow"><asp:Label runat="server" ID="lblOptionSymbol"></asp:Label></td>
                 <td class="GridRow"><asp:Label runat="server" ID="lblOptionUsymbol"></asp:Label></td>                         
             </tr>
         </tbody>
     </ItemTemplate>
 </asp:Repeater>

Now, in my code-behind I have an event which is fired that is supposed to add/insert a row into the database. After this happens, I re-grab the new list of options from the database and re-bind them to the repeater. This takes place inside an update panel so the list refreshes right away for the user.

protected void lbtnAddOptionSave_Click(object sender, EventArgs e)  
{
    SelectedOption = new Option()
    {
        Account = txtAddOptionAccountNumber.Text,
        Margin = chkAddOptionMargin.Checked,
        Symbol = txtAddOptionSymbol.Text,
        Usymbol = txtAddOptionUsymbol.Text,
    };

    Presenter.OnAddOption(); // Insert new option into database
    RefreshOptions(); // Re-get list of options, bind them to repeater
}

Now, what I would ~love~ to do, is use the jQuery ScrollTo plugin to scroll straight to the newly added row.

What would be the best way to call the ScrollTo() method in the jQuery plugin so I scroll to that particular row that was just added? Is there anyway I can mark my rows in my ItemTemplate so I can easily select an element to scroll to via jQuery?

Ideally, right after RefreshOptions() I would like to execute the ScrollTo function to scroll down to the new row.

Answer 1

If you know the client side Id of the row (which you can get), its relatively painless to simply call

$(document).scrollTo("#<row-id-here>", 800);

Answer 2

When you add the object to the database (or just after that), grab the id of the newly inserted object. Modify the repeater to include a Label with Visible="false" so that it doesn't get rendered to the client. Hook into the ItemDataBound event and check each label against the id you've grabbed. When you find the matching row, you can get the id of the row and then you'll be able to use for the scrolling parameter.

Note: Other data-bound controls have a DataKey property which could be used for the id of the object and make this a bit simpler. Not sure if you're tied to the Repeater at this point, but a GridView or ListView could be worth looking into.