Navigate using Arrow Keys

Question

I m using this Gridview

http://gridviewscroll.aspcity.idv.tw/Demo/Style.aspx#StyleCustom2

Can someone tell me how i can Navigate into GridView using Arrow Keys into that gridview

Thanks :)

Answer 1

1. Edit the webform with the GridView you wanna extend with the functionallity. There, add two buttons. ButtonUp and ButtonDown.

2. Add the following click-events for the buttons. I assume that your GridView is called GridView1:

     protected void ButtonUp_Click(object sender, EventArgs e) { int i = GridView1.SelectedIndex; if(i>0) GridView1.SelectedIndex = GridView1.SelectedIndex - 1; } protected void ButtonDown_Click(object sender, EventArgs e) { int i = GridView1.SelectedIndex; if (i < GridView1.Rows.Count - 1) GridView1.SelectedIndex = GridView1.SelectedIndex + 1; } 

3. If you run your page now, you are able to navigate through GridView with the buttons on the page. Now, we will bind the button clicks to our keyboard via javascript. Add the following code to the Page_Load event:

     ClientScript.RegisterClientScriptBlock(typeof(string), "keyScript", @"function move(e) { var key = 0; if(window.event) key = event.keyCode; else key = e.keyCode; if(key == 38) document.getElementById('ButtonUp').click(); if(key == 40) document.getElementById('ButtonDown').click(); } document.onkeydown=move; ", true); 

4. Now you should be able to navigator with your keyboard up and down keys.

5. To make the page buttons invisible, create the following CssClass for them:

    .Invisible { display:none; } 

Answer 2

<script type="text/javascript">
    $(document).keydown(function (e) {
        var keyCode = e.keyCode || e.which;
        var arrow = { left: 37, up: 38, right: 39, down: 40 };
        switch (keyCode) {
            case arrow.left:
                break;
            case arrow.up:
                document.getElementById(('<%= ButtonUp.ClientID %>')).click();
                break;
            case arrow.right:
                break;
            case arrow.down:
                //alert("down");
                document.getElementById(('<%= ButtonDown.ClientID %>')).click();
                break;
        }
    });
</script>