Type Ahead to navigate grid

I want to add a feature to the grid where a user types in a letter or two of word in first column and the grid navigates to the row in the grid where the first column value matches that string....

ideas?

Daron

October 18,

Ideas: Where are they going to be typing in these characters at?

Couldn't they just sort the grid by the column of interest, then scroll down to the row that starts with the letter they were going to be typing in anyhow?

Just some thoughts...

Michael

October 18,

they'd just start typing... capture the keystoke and then jump to that row in the grid - why? cause the boss said it'd be nice ;)

Daron

December 2,

Daron,

I'm glad I am no longer needing to deal with situations like yours...:-) i.e. A boss who wants the impossible.

Okay - so HOW are you going to capture the keystroke?

In a text field or what?

Tell your boss that this is a web-based application, where everyone always has access to the latest version.

Keep in mind that web pages are a 'publishing medium' and were never intended to be used the way we use them today - we're lucky to be able to do as much as we can already to.

Did you ever notice how some sites require you to download a sign active-X components, since they need to do something beyond the functional scope of your browser? (hint, Microsoft Windows Update is a prime example).

What your boss would seem to be confused about in his wants of a 'nice' feature would be better deployed as an application written in C++, or Visual basic....of course, then you need to install it on each machine, and update each machine whenever there is a new version.

That's just part of your 'trade-off' factor.

Of course, you could always code it using window.onkeydown or window.onkeypress events, then some custom javascript routines to look at the value within a certain cell of a chosen column, and if the first letter matches, select that row. Of course, I can't make either approach work in IE 6 as in the example below.

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=us-ascii">
<title>Window onKeyDown Test</title>
<script type="text/javascript">
function e()
{
  alert("window.onKeyDown works!");
}
window.onKeyDown = e;
</script>
</head>
<body>
<p>An alert should appear when a key is pushed down while this window has the focus.</p>
</body>
</html>

More trade-off's: We have yet to see a single function that works for both Netscape and Internet Explorer.

Final note - this isn't an Excel spreadsheet, so don't expect that much functionality. What you have with Alex's excellent code is a fantastic way to display tabled data with fixed column headers, sortable columns, XML functionality, and a plethura(sp?) of other features.

Michael

December 4,

Daron,

As a follow up, this approach worked in IE 6:

<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=us-ascii"> 
<title>Window onKeyDown Test</title> 
<script type="text/javascript"> 
function e() 
{ 
  alert("body onKeyDown works!"); 
} 

</script> 
</head> 
<body onKeyDown="e();"> 
<p>An alert should appear when a key is pushed down while this window has the focus.</p> 
</body> 
</html>

Michael

December 4,

On a keypress event in the text box, use the text value as an xpath expression to refresh the grid.

Steve N

June 21,

This topic is archived.

Type Ahead to navigate grid

See also:

Search

New Data Grid

Version 2