ASP.NET - On Datarow Click, Get Number of Pixels From Top of DataTable

Question

Some background:

I have a datatable displaying data using an asp:Repeater.

I'm using a combination of scroll and paginate. When you click a row, the datatable is reloaded and is scrolled to the top.

I am using scrollTop() to scroll the previously clicked row into view.

scrollTop() takes pixel distance from the top as the parameter. I have an on click function for the rows that displays the details of the row that was clicked.

The Problem:

I am trying to figure out a way to calculate pixel distance from the top of the data table to the selected row so I can use it as a parameter to scrollTop()

Here is the format of the datatable:

<table id="tblId" class="dataTables_display">
    <thead>
        <tr>
            //a bunch of <th tags>
        </tr>
    </thead>
    <tbody>
    <asp:Repeater ID="rptCraft" runat="server" OnItemDataBound="rptCraft_ItemDataBound">
        <ItemTemplate>
            <tr>
                <td style="display:none;" class="rowClick"><asp:Literal ID="litId" runat="server" text='<%# DataBinder.Eval(Container.DataItem, "Id") %>'/></td>
                <td><asp:CheckBox ID="chkDelete" runat="server" AutoPostBack="false" /></td>
                <td><asp:Literal ID="litDescription" ClientIDMode="Static" runat="server" Text='<%# Eval("Description")%>'/></td>   
             </tr>
         </ItemTemplate>                
     </asp:Repeater>
     </tbody>

And here is the on click function:

        $("#tblId tbody tr").live("click", function (event) {

        var cell = $(this).children("td:first");
        var id = jQuery.trim(cell.text());        //get id code

        if (id != "" && !isNaN(id)) {
            //some code that accesses DB and shows details of row
        }
    });

My guess is that I can store the pixel distance from the clicked row in the on click function and then use it to call scrollTop().

Is there an easy way to calculate this pixel distance? Or is there a better way to scroll the previously clicked row?

Answer 1

A simple reference to 'this.offsetTop' was all that I needed in the on click function. I passed this value as a parameter to scrollTop() and got the functionality I needed.

offsetTop returns the pixel distance from the parent element's top position to the caller's top position.