Up and Down arrow navigation in datagrid columns

D

David Hirschfeld

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?
 
J

Jeffrey Tan[MSFT]

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.
 
D

David Hirschfeld

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.
 
J

Jeffrey Tan[MSFT]

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.
 
D

David Hirschfeld

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.
 
J

Jeffrey Tan[MSFT]

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.
 
J

Jeffrey Tan[MSFT]

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.
 
J

Jeffrey Tan[MSFT]

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.
 
D

David Hirschfeld

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.
 
J

Jeffrey Tan[MSFT]

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.
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top