Div overflow, ASP.NET GridView, JQuery and anchor

Question

Hi !

I'm not a pro in web UI, so I will try to explain myself clearly. I have a tag with overflow: auto;. Inside that div, I have a GridView. There's a JQuery function that select the line clicked in the grid, only by changing the CSS class (to change the backgroud_color). I would like to know if I can put a kind of anchor so that the grid return to the selected row when the user make a postback (with a "Refresh" button).

Here is som code sample to show you the idea. The grid :

    <div id="divGrilleConsole" class="pnlGrilleConsole">
    <asp:GridView id="dbgListeOperations" runat="server" CssClass="texte-normal" Width="930px" AutoGenerateColumns="False" ShowHeader="False" >
        <HeaderStyle Font-Size="11px" Font-Names="Verdana" Font-Bold="True" BackColor="#E8EDF5"></HeaderStyle>
        <Columns>
            <asp:BoundColumn DataField="NO_SEQ_ACT_DEPLO" HeaderText="No Séq.">
                <HeaderStyle Width="35px"></HeaderStyle>
            </asp:BoundColumn> 
            <asp:TemplateColumn>
                <HeaderStyle Width="10px"></HeaderStyle>
                <ItemTemplate>
                    <asp:HiddenField ID="hdfNoAction" runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:BoundColumn DataField="NOM_PROJ_DEPLO" HeaderText="Projet">
                <HeaderStyle Width="295px"></HeaderStyle>
            </asp:BoundColumn>
            <asp:BoundColumn DataField="NOM_SERVE_PHYSIQUE" HeaderText="Serveur physique">
                <HeaderStyle Width="275px"></HeaderStyle>
            </asp:BoundColumn>          
        </Columns>
    </asp:GridView>
</div>

Partial JQuery script :

$(document).ready(function() {

    var gv = $("#<%= dbgListeOperations.ClientId %>");
    var rows = gv.find('tbody > tr');
    //Boucle dans toutes les lignes de la grille maitre
    rows.each(function() {
        //add handler for click event on each row
        $(this).click(function() {
                $(this).toggleClass("GrilleDonneesTriee_Select");
                //Rest of logic here...
                .
                .
                .

        });


    });

Do you think that it is possible to position the div to the selected line when a postback occur ? How would I do that ? With anchors I guess, but I don't realy understand how those works.

Answer 1

Just in case some people run into this post looking for a solution, I finally used a JQuery plugin. http://plugins.jquery.com/project/ScrollTo Works fine and easy to use.