views:

45

answers:

1

Is it possible to put focus back on a gridview row after that a selection of the row generates a postback?

I'm trying to add an onkeydown handler on the gridview rows in order to use the keyboard for navigation. My problem, I believe, is that after the first postback, the selected cell loses focus, and so the next key stroke is not caught by the cell.

I have the following code

The grid view

    <asp:GridView runat="server" ID="gdvPersons" AutoGenerateColumns="false" 
        onrowcreated="gdvPersons_RowCreated" onselectedindexchanged="gdvPersons_SelectedIndexChanged">
        <Columns>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <%# ((GridviewFocus.Person) Container.DataItem).Name %>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Age">
                <ItemTemplate>
                    <%# ((GridviewFocus.Person) Container.DataItem).Age %>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

The Code behind

    protected void Page_Load(object sender, EventArgs e)
    {
        var persons = new List<Person> {new Person() {Name = "Fikre", Age = 24}, 
                                        new Person() {Name = "Mike", Age = 29},
                                        new Person() {Name = "Mark", Age = 35}};
        gdvPersons.DataSource = persons;
        gdvPersons.DataBind();
    }

    protected void gdvPersons_RowCreated(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
            e.Row.Attributes.Add("onkeydown", ClientScript.GetPostBackEventReference((Control)sender, "Select$" + e.Row.DataItemIndex));
    }

    protected void gdvPersons_SelectedIndexChanged(object sender, EventArgs e)
    {
        gdvPersons.SelectedRow.Focus();
    }
+1  A: 

On your onkeydown script code copy the id of the cell to a hidden input field.

<input type="text" id="gridviewcell_id" onkeydown="lastcell.value = this.id" />
<input type="hidden" id="lastcell" runat="server" />

the example above is plain html, and you would have to add the proper onkeydown code to your gridview.

In your postback (for example onclick) event handler code you can retrieve the id from the hidden fields value property and register javascript to execute once the page is refreshed. If you have a button which is clicked which performs the postback you could do something like this:

protected void MyButton_Click(object sender, EventArgs e)
{
   string id = lastcell.Value;
   string script = "var ctrl = document.getElementById('" + lastcell.Value + "');";
   script += "ctrl.focus();";
   ClientScript.RegisterClientScriptBlock(this.GetType(), 
       "focusScript", script, true);

}

This should make your page execute the following script once it's loaded, and the control should retrive focus:

var ctrl = document.getElementById("yourid"); 
ctrl.focus();
Mikael Svenson
I had a go at your solution but im having trouble with the gridview's rows' ids. I included my original code to the question
Fikre
There are no edit fields in the code you posted. So how do you intend to do navigation? Could you provide a more complete sample, and are you using .net3.5 or 4.0?
Mikael Svenson
Im adding the onkeydown event to each row in the gdvPersons_RowCreated event.The problem with my code is that a table row needs a tab index in order to be focusable. I also changed gdvPersons.SelectedRow.Focus(); with your code for focusing the row, so i marked it as the answer. Thanks
Fikre