[Solved] ASP.Net: JavaScript focus not working after UpdatePanel PostBack

makumbi
 
on Jun 20, 2022 12:35 AM
233 Views

my remarks the cursor moves well in other columns except for one column remarks where the cursor does not move to the next row in the cell.

please help

<script type="text/javascript">
    function enter(obj) {
        var tr = obj.parentNode.parentNode.parentNode;
        var cellIndex = obj.parentNode.cellIndex;
        var rowIndex = obj.parentNode.parentNode.rowIndex;
        if (event.keyCode == 37) //Left
        {
            if (cellIndex > 0)
                tr.parentNode.rows[rowIndex].cells[cellIndex - 1].getElementsByTagName('INPUT')[0].focus();
            return;
        }
        if (event.keyCode == 38) //Up
        {
            if (rowIndex > 1)
                tr.parentNode.rows[rowIndex - 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            return;
        }
        if (event.keyCode == 39) //Right
        {
            if (cellIndex < tr.cells.length - 1)
                tr.parentNode.rows[rowIndex].cells[cellIndex + 1].getElementsByTagName('INPUT')[0].focus();
            return;
        }
        if (event.keyCode == 40) //Down
        {
            if (rowIndex < tr.parentNode.rows.length - 1)
                tr.parentNode.rows[rowIndex + 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            return;
        }
    }
</script>

 

<asp:GridView ID="StudentGridMarks" runat="server" BackColor="White" AutoGenerateColumns="False" AllowPaging="True" OnPageIndexChanging="OnPageIndexChanging" PageSize="45">
    <Columns>
         <asp:TemplateField>
             <HeaderTemplate>
                 <asp:CheckBox ID = "chkAll" runat="server" AutoPostBack="true"  />
             </HeaderTemplate>
             <ItemTemplate>
                 <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" Enabled="False"  />
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Admno">
             <EditItemTemplate>
                 <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("admno") %>'></asp:TextBox>
             </EditItemTemplate>
             <ItemTemplate>
                 <asp:Label ID="Label1" runat="server" Text='<%# Bind("admno") %>' Visible="False"></asp:Label>
                 <asp:TextBox ID="admno" runat="server" Height="16px" Text='<%# Eval("admno") %>' onkeyup="enter(this)" Width="70px"></asp:TextBox>
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Names">
             <EditItemTemplate>
                 <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Name") %>' onkeyup="enter(this)" ></asp:TextBox>
             </EditItemTemplate>
             <ItemTemplate>
                 <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>' Visible="False"></asp:Label>
                 <asp:TextBox ID="Names" runat="server" Height="16px" Text='<%# Eval("Name") %>' onkeyup="enter(this)" Width="245px"></asp:TextBox>
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Class">
             <EditItemTemplate>
                 <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Class") %>' ></asp:TextBox>
             </EditItemTemplate>
             <ItemTemplate>
                 <asp:Label ID="Label3" runat="server" Text='<%# Bind("Class") %>' Visible="False"></asp:Label>
                 <asp:TextBox ID="Classr" runat="server" Height="16px" Text='<%# Eval("Class") %>' onkeyup="enter(this)" Width="34px"></asp:TextBox>
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Stream">
             <EditItemTemplate>
                 <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Stream") %>'></asp:TextBox>
             </EditItemTemplate>
             <ItemTemplate>
                 <asp:Label ID="Label4" runat="server" Text='<%# Bind("Stream") %>' Visible="False"></asp:Label>
                 <asp:TextBox ID="Stream" runat="server" Height="16px" Text='<%# Eval("Stream") %>' onkeyup="enter(this)" Width="47px"></asp:TextBox>
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Score">
             <EditItemTemplate>
                 <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("score") %>'></asp:TextBox>
             </EditItemTemplate>
             <ItemTemplate>
                 <asp:Label ID="Label5" runat="server" Text='<%# Bind("score") %>' Visible="False"></asp:Label>
                 <asp:TextBox ID="Score" runat="server" Height="16px" Text='<%# Eval("score") %>' Width="30px" onkeyup="enter(this)" OnTextChanged="Score_TextChanged"></asp:TextBox>
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Agg">
             <EditItemTemplate>
                 <asp:TextBox ID="TxtAgg" runat="server" Text='<%# Bind("Grade") %>' onkeyup="enter(this)" ></asp:TextBox>
             </EditItemTemplate>
             <ItemTemplate>
                 <asp:Label ID="Label6" runat="server" Text='<%# Bind("Grade") %>' Visible="False"></asp:Label>
                 <asp:TextBox ID="Agg" runat="server" Height="16px" Text='<%# Eval("Grade") %>' onkeyup="enter(this)" Width="28px" Enabled="False"></asp:TextBox>
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Remarks">
             <EditItemTemplate>
                 <asp:TextBox ID="txtRemarks" runat="server" Text='<%# Bind("Remark") %>'></asp:TextBox>
             </EditItemTemplate>
             <ItemTemplate>
                 <asp:Label ID="Label7" runat="server" Text='<%# Bind("Remark") %>' Visible="False"></asp:Label>
                 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                     <ContentTemplate>
                         <asp:TextBox ID="Remarks" runat="server" Height="16px" OnTextChanged="Remarks_TextChanged" Text='<%# Eval("Remark") %>' onkeyup="enter(this)" Width="392px"></asp:TextBox>
                     </ContentTemplate>
                 </asp:UpdatePanel>
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="UserName">
             <EditItemTemplate>
                 <asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("username") %>'></asp:TextBox>
             </EditItemTemplate>
             <ItemTemplate>
                 <asp:Label ID="Label8" runat="server" Text='<%# Bind("username") %>' Visible="False"></asp:Label>
                 <asp:TextBox ID="Username" runat="server" Height="16px" Text='<%# Eval("username") %>' onkeyup="enter(this)" Width="89px"></asp:TextBox>
             </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="DateTime">
             <EditItemTemplate>
                 <asp:TextBox ID="TextBox9" runat="server" Text='<%# Bind("time") %>'></asp:TextBox>
             </EditItemTemplate>
             <ItemTemplate>
                 <asp:Label ID="Label9" runat="server" Text='<%# Bind("time") %>' Visible="False"></asp:Label>
                 <asp:TextBox ID="DateTime" runat="server" Text='<%# Eval("time") %>'></asp:TextBox>
             </ItemTemplate>
         </asp:TemplateField>
    </Columns>
</asp:GridView>
Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jun 20, 2022 02:04 AM

Hi makumbi,

Place the GridView inside the UpdatePanel.

Also you need to call the JavaScript function on UpdatePanel's Partial PostBack event handler.

<script type="text/javascript">
    function enter(obj) {
        var tr = obj.parentNode.parentNode.parentNode;
        var cellIndex = obj.parentNode.cellIndex;
        var rowIndex = obj.parentNode.parentNode.rowIndex;
        if (event.keyCode == 37) //Left
        {
            if (cellIndex > 0)
                tr.parentNode.rows[rowIndex].cells[cellIndex - 1].getElementsByTagName('INPUT')[0].focus();
            return;
        }
        if (event.keyCode == 38) //Up
        {
            if (rowIndex > 1)
                tr.parentNode.rows[rowIndex - 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            return;
        }
        if (event.keyCode == 39) //Right
        {
            if (cellIndex < tr.cells.length - 1)
                tr.parentNode.rows[rowIndex].cells[cellIndex + 1].getElementsByTagName('INPUT')[0].focus();
            return;
        }
        if (event.keyCode == 40) //Down
        {
            if (rowIndex < tr.parentNode.rows.length - 1)
                tr.parentNode.rows[rowIndex + 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            return;
        }
    };
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                enter(obj);
            }
        });
    };
</script>

For more details refer below article.

JavaScript not working in UpdatePanel after PostBack in ASP.Net