Tuesday, September 23, 2014

GridView textbox Navigation using Arrow(up/down) keys using Javascript in ASP.Net

 function GetTextBoxValues1(txt) {
//sai krishna for right arrow
//debugger;
if (window.event.keyCode == 39) {
    //var cnt = document.getElementById("GridView1").rows[0].cells.length;
    var gridView = document.getElementById("GridView1");
    for (var i = 1; i < gridView.rows.length - 1; i++) {
        if (txt == document.getElementById("GridView1_txtWeek1_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek2_" + (i - 1)).focus();
            return false;
        }
        if (txt == document.getElementById("GridView1_txtweek2_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek3_" + (i - 1)).focus();
            return false;
        }
        if (txt == document.getElementById("GridView1_txtweek3_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek4_" + (i - 1)).focus();
            return false;
        }
        if (txt == document.getElementById("GridView1_txtweek4_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek4_" + (i - 1)).focus();
            return false;
        }
                  
    }
}
//sai krishna for left arrow
//debugger;
if (window.event.keyCode == 37) {
    //var cnt = document.getElementById("GridView1").rows[0].cells.length;
    var gridView = document.getElementById("GridView1");
    for (var i = gridView.rows.length - 1; i >= 1 ; i--) {
        if (txt == document.getElementById("GridView1_txtWeek1_" + (i - 1)).id) {
            document.getElementById("GridView1_txtWeek1_" + (i-1)).focus();
            return false;
        }
        if (txt == document.getElementById("GridView1_txtweek2_" + (i - 1)).id) {
            document.getElementById("GridView1_txtWeek1_" + (i - 1)).focus();
            return false;
        }
        if (txt == document.getElementById("GridView1_txtweek3_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek2_" + (i - 1)).focus();
            return false;
        }
        if (txt == document.getElementById("GridView1_txtweek4_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek3_" + (i - 1)).focus();
            return false;
        }
    }
}
//sai krishna for down arrow
if (window.event.keyCode == 40) {
    var gridView = document.getElementById("GridView1");
    for (var i = 1; i < gridView.rows.length-1; i++) {
        if (txt == document.getElementById("GridView1_txtWeek1_" + (i - 1)).id)
        {
            document.getElementById("GridView1_txtWeek1_" + (i)).focus();
            return false;
        }
    }
    for (var i = 1; i < gridView.rows.length - 1; i++) {
        if (txt == document.getElementById("GridView1_txtweek2_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek2_" + (i)).focus();
            return false;
        }
    }
    for (var i = 1; i < gridView.rows.length - 1; i++) {
        if (txt == document.getElementById("GridView1_txtweek3_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek3_" + (i)).focus();
            return false;
        }
    }
    for (var i = 1; i < gridView.rows.length - 1; i++) {
        if (txt == document.getElementById("GridView1_txtweek4_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek4_" + (i)).focus();
            return false;
        }
    }
}
//sai krishna for UP arrow
if (window.event.keyCode == 38) {
    var gridView = document.getElementById("GridView1");
    for (var i = gridView.rows.length - 1; i > 1 ; i--) {
        if (txt == document.getElementById("GridView1_txtWeek1_" + (i - 1)).id) {
            document.getElementById("GridView1_txtWeek1_" + (i-2)).focus();
            return false;
        }
    }
    for (var i = gridView.rows.length - 1; i > 1 ; i--) {
        if (txt == document.getElementById("GridView1_txtweek2_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek2_" + (i - 2)).focus();
            return false;
        }
    }
    for (var i = gridView.rows.length - 1; i > 1 ; i--) {
        if (txt == document.getElementById("GridView1_txtweek3_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek3_" + (i - 2)).focus();
            return false;
        }
    }
    for (var i = gridView.rows.length - 1; i > 1 ; i--) {
        if (txt == document.getElementById("GridView1_txtweek4_" + (i - 1)).id) {
            document.getElementById("GridView1_txtweek4_" + (i - 2)).focus();
            return false;
        }
    }
}
}

<asp:GridView ID="GridView1" TabIndex="0" runat="server" Width="100%" GridLines="Horizontal">
  <Columns>
    <asp:TemplateField HeaderText="Week" ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="datagridheaders" HeaderStyle-ForeColor="white">
    <ItemTemplate>
  <asp:TextBox ID="txtweek2" runat="server" Width="75px" onkeyup="return GetTextBoxValues1(this.id);" Columns="10"></asp:TextBox>
  </ItemTemplate>
  </asp:TemplateField>
 </Columns>
</asp:GridView>

No comments:

Post a Comment