Up and Down arrow navigation in datagrid columns

Discussion in 'ASP .Net Datagrid Control' started by David Hirschfeld, Dec 24, 2003.

  1. I have created a Multi-row editable datagrid with
    textboxes. Does anyone know how to create the Javascript
    necessary so that up and down arrow navigation will work
    in the datagrid? Or, is there a Non-Javascript approach
    available?
     
    David Hirschfeld, Dec 24, 2003
    #1
    1. Advertisements

  2. Hi David,

    Based on my understanding, you want to implement a scrollable datagrid.
    I think this should be done through client side html tag <div> with
    attribute OVERFLOW-Y:scroll, please refer to the article below:
    http://www.dotnetjohn.com/articles/articleid98.aspx

    Merry Christmas!!

    Best regards,
    Jeffrey Tan
    Microsoft Online Partner Support
    Get Secure! - www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.
     
    Jeffrey Tan[MSFT], Dec 25, 2003
    #2
    1. Advertisements

  3. Thanks for the suggestion. However, I'm not trying to make a datagrid
    scroll up or down. What I'm trying to do is get the cursor to move
    vertically up and down to the cell immediately above or below the
    current cell in an editable datagrid by pressing the up and down arrow
    keys, instead of having to use the mouse. This is unrelated to
    scrolling. For example, if I have display a grid of addresses with
    columns such as Address, City, State, Zip, etc... and I want to edit
    several zipcodes that are listed one below the other consecutively. I
    would like to be able to edit the first zipcode, press the down arrow,
    moving the cursor to the next zipcode textbox below and edit that
    zipcode, just like using a spreadsheet.
     
    David Hirschfeld, Dec 26, 2003
    #3
  4. Hi David,

    Sorry for misunderstand you, I already know that you want to implement the
    function mimic the WinForm datagrid keyboard navigation.
    I think the cursor can only appear in the textbox field.
    How do you implement your datagrid? Do you place all the cells of the
    datagrid as textbox?
    And normally, the textbox cell only appear, when this row is in edit
    mode(this row's index equals the DataGrid.EditItemIndex)
    So do you use edit mode to place your row into textbox or you just create
    textbox cells in normal mode?

    Best regards,
    Jeffrey Tan
    Microsoft Online Partner Support
    Get Secure! - www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.
     
    Jeffrey Tan[MSFT], Dec 29, 2003
    #4
  5. I have created an 'Always' editable datagrid. All the rows are editable
    and they all have textboxes, checkboxes, or dropdown lists. Some of the
    columns are read only, but that is not an issue for the up and down
    arrows since these columns will never have focus anyway. I think I have
    figured out how to accomplish what I need but I am really weak with
    javascript. I am trying to pass in the ID of the textbox, use regular
    expression to parse out the numeric component of that id and either
    increment it or decrement it, then set the focus on the desired control.
    I have been able to capture the arrow keys with the OnKeyUp event. I
    can't seem to get the code to work. I'm having a problem with casting
    from numeric to string. The following is a simple test webpage with a
    test script that attempts to display an alert incrementing the value of
    the TextBox ID which is ID="TB1234a". If this code worked, an alert
    would display "1235". Obviously, this test program doesn't perform all
    the functionality I'm trying to write, but it is an important step in
    the process. Do you know why this code doesn't work? The following
    page has no code in the Code Behind:

    <%@ Page Language="vb" AutoEventWireup="false" Codebehind="Test.aspx.vb"
    Inherits="ProductMngt.Test" debug="true"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Test</TITLE>
    <META name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    <META name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
    <META name="vs_defaultClientScript" content="JavaScript">
    <META name="vs_targetSchema"
    content="http://schemas.microsoft.com/intellisense/ie5">
    <SCRIPT language="javascript">
    function newalert(TB)
    {
    window.alert(TB.id);
    }
    function keyalert(TB)
    {
    var rel;
    var newval = 0;
    var TBName = new String();

    rel = /[0-9]+/;
    TBName = TB.name;
    var oldval = new String(TBName.match(rel));
    //var newval : Object = (int(oldval) + 1);
    if (oldval==""){
    window.alert("NULL");
    }
    else
    {
    //newval = (int(oldval) + 1);
    newval = int(oldval) + 1;
    window.alert(newval);
    }
    /*
    var VK_LEFT = 37;
    var VK_UP = 38;
    var VK_RIGHT = 39;
    var VK_DOWN = 40;
    switch (event.keyCode){
    case VK_LEFT : {window.alert("Left");break}
    case VK_UP : {window.alert("Up");break}
    case VK_RIGHT : {window.alert("Right");break}
    case VK_DOWN : {window.alert("Down");break}
    default : {window.alert(event.keyCode)};
    //window.alert(event.keyCode);
    }
    */
    }
    </SCRIPT>
    </HEAD>
    <BODY ms_positioning="GridLayout">
    <FORM id="Form1" method="post" runat="server">
    <%-- Comments --%>
    <INPUT onclick=newalert(Form1.TB) id="TB" name="TB1234a"
    style="Z-INDEX: 103; LEFT: 340px; POSITION: absolute; TOP: 212px"
    type="text" onkeyup=keyalert(Form1.TB)>
    </FORM>
    </BODY>
    </HTML>



    You can see that I have commented out some code that tests the capture
    of the arrow keys. That code worked fine.
     
    David Hirschfeld, Dec 29, 2003
    #5
  6. Hi David,

    Thanks for your feedback.
    I also think the way to get what you want is through client script keyboard
    event.(Because .Net Framework does not encapsulate this)
    For your code, I will do some research into. I will reply to you ASAP.
    Thanks for your understanding.

    Best regards,
    Jeffrey Tan
    Microsoft Online Partner Support
    Get Secure! - www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.
     
    Jeffrey Tan[MSFT], Dec 30, 2003
    #6
  7. Hi David,

    To use client javascript to convert string to int, you should use the
    parseInt() method.
    Note: Javascript is case-sensitive.

    Best regards,
    Jeffrey Tan
    Microsoft Online Partner Support
    Get Secure! - www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.
     
    Jeffrey Tan[MSFT], Dec 30, 2003
    #7
  8. Jeffrey Tan[MSFT], Dec 30, 2003
    #8
  9. Jeffrey Tan[MSFT], Dec 30, 2003
    #9
  10. Hi David,

    Is your problem resolved?
    If there is still something you did not figure out, please feel free to
    tell me.
    I will work with you.

    Best regards,
    Jeffrey Tan
    Microsoft Online Partner Support
    Get Secure! - www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.
     
    Jeffrey Tan[MSFT], Jan 5, 2004
    #10
  11. My problem is resolved. I now have a web grid that I can use the up and
    down arrow keys to move vertically among editable fields.
     
    David Hirschfeld, Jan 5, 2004
    #11
  12. Hi David,

    Oh, I am glad to hear that.
    If you still have any problem, please feel free to post in this group.

    Best regards,
    Jeffrey Tan
    Microsoft Online Partner Support
    Get Secure! - www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.
     
    Jeffrey Tan[MSFT], Jan 5, 2004
    #12
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.