Lose the focus of the textboxes in gridview

Question

I have a grid view in an updatepanel like this :

<asp:UpdatePanel ID="UpdatePanel3" runat="server">
        <ContentTemplate>
            <asp:Panel ID="pnl_lect" runat="server">
                <asp:GridView ID="gv_ques" runat="server" CssClass="formTable cr_center" AutoGenerateColumns="False"
                    ShowFooter="True" OnRowDataBound="gv_ques_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="عناصر التقييم">
                            <ItemTemplate>
                                <asp:Label ID="lbl_ques" runat="server" Text='<%# Bind("que_desc") %>'></asp:Label>

                            </ItemTemplate>
                            <FooterTemplate>
                                <asp:Label ID="Label1" runat="server" Text="الاجمالي"></asp:Label>
                            </FooterTemplate>
                            <ItemStyle Width="45%" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="ممتاز (4)">
                            <ItemTemplate>
                                <telerik:RadNumericTextBox ID="txt_1" runat="server" DbValue='<%# Bind("grade_id1") %>'
                                    AutoPostBack="true" Width="60px" MinValue="0" MaxValue="999999999" OnTextChanged="txt_1_TextChanged">
                                    <NumberFormat GroupSeparator="" DecimalDigits="0" />
                                </telerik:RadNumericTextBox>
                                <asp:HiddenField ID="hf_1" runat="server" Value="1" />
                            </ItemTemplate>
                            <FooterTemplate>
                                <asp:Label ID="lbl_1" runat="server"></asp:Label>
                            </FooterTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="جيد جدًا (3)">
                            <ItemTemplate>
                                <telerik:RadNumericTextBox ID="txt_2" runat="server" DbValue='<%# Bind("grade_id2") %>'
                                    AutoPostBack="true" Width="60px" MinValue="0" MaxValue="999999999" OnTextChanged="txt_1_TextChanged">
                                    <NumberFormat GroupSeparator="" DecimalDigits="0" />
                                </telerik:RadNumericTextBox>
                                <asp:HiddenField ID="hf_2" runat="server" Value="2" />
                            </ItemTemplate>
                            <FooterTemplate>
                                <asp:Label ID="lbl_2" runat="server"></asp:Label>
                            </FooterTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="جيد (2)">
                            <ItemTemplate>
                                <telerik:RadNumericTextBox ID="txt_3" runat="server" DbValue='<%# Bind("grade_id3") %>'
                                    AutoPostBack="true" Width="60px" MinValue="0" MaxValue="999999999" OnTextChanged="txt_1_TextChanged">
                                    <NumberFormat GroupSeparator="" DecimalDigits="0" />
                                </telerik:RadNumericTextBox>
                                <asp:HiddenField ID="hf_3" runat="server" Value="3" />
                            </ItemTemplate>
                            <FooterTemplate>
                                <asp:Label ID="lbl_3" runat="server"></asp:Label>
                            </FooterTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="مقبول (1)">
                            <ItemTemplate>
                                <telerik:RadNumericTextBox ID="txt_4" runat="server" DbValue='<%# Bind("grade_id4") %>'
                                    AutoPostBack="true" Width="60px" MinValue="0" MaxValue="999999999" OnTextChanged="txt_1_TextChanged">
                                    <NumberFormat GroupSeparator="" DecimalDigits="0" />
                                </telerik:RadNumericTextBox>
                                <asp:HiddenField ID="hf_4" runat="server" Value="4" />
                            </ItemTemplate>
                            <FooterTemplate>
                                <asp:Label ID="lbl_4" runat="server"></asp:Label>
                            </FooterTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="ضعيف (0)">
                            <ItemTemplate>
                                <telerik:RadNumericTextBox ID="txt_5" runat="server" DbValue='<%# Bind("grade_id5") %>'
                                    AutoPostBack="true" Width="60px" MinValue="0" MaxValue="999999999" OnTextChanged="txt_1_TextChanged">
                                    <NumberFormat GroupSeparator="" DecimalDigits="0" />
                                </telerik:RadNumericTextBox>
                                <asp:HiddenField ID="hf_5" runat="server" Value="5" />
                            </ItemTemplate>
                            <FooterTemplate>
                                <asp:Label ID="lbl_5" runat="server"></asp:Label>
                            </FooterTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>

---

I lose the focus with every postback so i write the following :

protected void txt_1_TextChanged(object sender, EventArgs e)
        {
            int progSer = int.Parse(Session["prog_serial"].ToString());
            int total = 0;
            RadNumericTextBox txt = (RadNumericTextBox)sender;

            GridViewRow r = (GridViewRow)txt.NamingContainer;

            TableCell cell = null;

            Control parent = txt;
            while ((parent = parent.Parent) != null && cell == null)
                cell = parent as TableCell;
            int indexOfTextBoxCell = -1;
            if (cell != null)
                indexOfTextBoxCell = r.Cells.GetCellIndex(cell);


            foreach (GridViewRow row in gv_ques.Rows)
            {
                if (row.RowType == DataControlRowType.DataRow)
                {
                    total = total + int.Parse(((RadNumericTextBox)row.Cells[indexOfTextBoxCell].Controls[1]).Value.ToString());
                }
            }
            ((Label)gv_ques.FooterRow.Cells[indexOfTextBoxCell].Controls[1]).Text = total.ToString();

            ScriptManager.RegisterStartupScript(this, this.GetType(), "selectAndFocus", "$get('" + txt.ClientID + "').focus();$get('" + txt.ClientID + "').select();", true);//the focus
        }

---

Now I tab out of the textbox, the focus still doesn't quite set correctly. I have to tab once after the postback for it to work.how to set the focus to the tabbed one rather than the current textbox ?

Answer 1

One solution i suggest is to use javascript DOM Storage. Keep the id of the focus text input with local storage:

$(':text').on("focus", function(){
  localStorage.setItem("focusItem", this.id);//here set in localStorage id of the textbox
  //console.log(localStorage.getItem("focusItem"));test the focus element id
});

And on $(document).ready(function(){}); event you can set the focus on input textbox:

$('#' + localStorage.getItem("focusItem")).focus();

Here also an live example. Focus in a text and after reload the page.

Keep in mind to remove things in localStorage you have to explicitly clear them via localStorage.removeItem(itemName).

More specific info here. Also full screen live example.

Answer 2

It sounds like the textbox you lose focus on is triggering the post back? If so,look into this, it's not a full solution but it's a start. This is more or less off the top of my head, sorry if it's not 100% correct. http://msdn.microsoft.com/en-us/library/vstudio/bb383810(v=vs.100).aspx

The Sys.WebForms.PageRequestManager can get the textbox id, or an item id that int the postback. From there you can use the document.getElementById("itemID").focus();

var requestMgr = Sys.WebForms.PageRequestManager.getInstance();
requestMgr.add_endRequest(endRequestHandler);

function endRequestHandler() {
  var itemID = requestMgr.args.get_postBackElement().id
  document.getElementById("itemID").focus()
}

Answer 3

You can easily focus on certain element using JavaScript:

window.onload = function() {
    document.getElementById("txt_1").focus();
};

Or, if you prefer jQuery:

$(function() {
    $("#txt_1").focus();
});

This code will focus on element with id "txt_1" after the page has completely loaded.