Showing posts with label gridview navigation using arrows. Show all posts
Showing posts with label gridview navigation using arrows. Show all posts

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>