Comments on: KeyTable: Instant keyboard navigation in a table

By: Webspeeder

Webspeeder — Fri, 14 Aug 2009 18:07:32 +0000

Hey, this sounds like it is what I’m looking for. I have written an app where I can use the keyboard to view the table and am trying to convert it over to jQuery using Flexigrid for the table.

What I need is this. , and arrow-dn moves down 1 row. Arrow-up moves up 1 row. I can handle that much.

But paging up and down is where I’m currently working. In Flexigrid, as long as the “grid” has focus, page up and page down work fine but I need to know when the end of the current result set is reached.

Basically, this app started as a desktop GUI app and I converted it to browser based. So, the user wants to see from 1 to X records (could be hundreds, could be thousands) “all at the same time”.

Well, due to loading this is what I’ve come up with. I only show X records (users choice, more records more time needed) but the user wants to be able to navigate down the page without having to hit a paging button. So, when they page down and hit the end of the current result set, an event is fired that reloads the table with the next result set.

In Flexigrid, even though it pages (which may be default to browser), the first row of the new “page” is not selected. In otherwords, if you select row 1 and page down 3 times, the first row that you see is not highlighted.

I got around this with HTML tables by keeping track of the tabindex and having a fixed “viewing area”, this allowed me to reposition the highlighted row.

Do you having anything that can help with what I need? Am I stating my issue “clear” enough?

Dean

By: JonBad

JonBad — Wed, 18 Mar 2009 14:08:19 +0000

Now you can color me impressed after the love was shown to Safari 4. Awesome work! I hope I find a place to use it.

By: aw93053

aw93053 — Wed, 18 Mar 2009 12:40:49 +0000

@theallan oops, it’s so simple that it’s hard / confused me. please ignore my request I figured it out :)

By: theallan

theallan — Wed, 18 Mar 2009 12:35:23 +0000

@aw93053: How do you mean? KeyTable will interact with any HTML table, so you can just output your MySQL db into an HTML table and initialise KeyTable on top of that. Or am I misunderstanding?

@aurora (and the kind words from others): :-) Thanks

By: aurora

aurora — Wed, 18 Mar 2009 12:27:14 +0000

i love this table widget and it get’s even better and better!

By: aw93053

aw93053 — Wed, 18 Mar 2009 11:48:18 +0000

Awesome script with a ton of good examples.

Could we get a working example with a MySQL dump / example?

By: theallan

theallan — Wed, 18 Mar 2009 10:59:44 +0000

Hi Novalis,

Good call. I had thought about this before and prototyped it but it didn’t work. However I’ve just realised that I made a very simple mistake in my prototype, and it works great now :-) I’ve updated KeyTable to take account of this.

Allan

By: Novalis

Novalis — Wed, 18 Mar 2009 09:50:20 +0000

Brilliant.
Just one little thing. The “KeyTable form integration example” works fine going down with “TAB”. But going back up with “Shift + TAB” it will not take me out of the table to the “input 2″

By: theallan

theallan — Wed, 18 Mar 2009 09:18:28 +0000

Hi JonBad,

Thanks for spotting that. There appears to be a small bug in Safari 4 (need to track it down and file a bug report…) which stopped this operation working correctly (Safari 3 was fine). I’ve corrected this now and the editing example works in Safari 4 and Chrome.

Allan

By: JonBad

JonBad — Wed, 18 Mar 2009 08:07:30 +0000

I’d love it except that it doesn’t seem to work correctly in Safari 4. Hitting the return key doesn’t appear to do anything whatsoever (Safari 4/Mac OS X Leopard). Safari 4 is the love of my life so it’s got to work correctly for it in order to win me over.