Google table - rowselect by the arrow keys

[Bjarni]

Hi, I've had problem figuring out if and how I can implement this.   To select the next or previous row in a table using the arrow keys.

Is there a way to capture the keydown event when the focus is on the table - or  during a document keydown capture detect if my table has the focus so I can react accordingly ?

Anyone ?

[Daniel LaLiberte]

Hi Bjarni,

The table chart doesn't support keyboard events currently, but you could attach event handlers to the html elements yourself, and in your handler call table.setSelection().  You should probably attach your handler to the container element that you give to the table chart constructor, rather than to any deeper html that is generated by the table chart. 

To find out if a table element has the focus, in your document keydown handler, here is an appropriate stackoverflow page about that: http://stackoverflow.com/questions/497094/how-do-i-find-out-which-dom-element-has-the-focus

Given the active element, you can crawl up the dom tree to find out if your table container is one of the ancestors.

Hope that helps.

It would be nice if we had some built-in support for keyboard events in the table chart.  Feel free to make a feature request about that: https://code.google.com/p/google-visualization-api-issues/issues/list

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Bjarni Gudmundsson]

Thanks for your reply, Daniel.

I've learned something, but didn't get me all the way.  I can put a handler on the containing div of the table and I get mouse click event that way, but the keydowns don't turn up. Like the table's scrollbar is consuming it...

If I put the handler on the whole document, I get the keydown events - always. But when I try use document.activeElement to find the one with the focus it returns rational result for all other elements on my page - other than the goggle table.  If my table has the focus, activeElement just returns the body element like if nothing had the focus :-\

So I guess I have use some other approach for this.

Thanks again,

Bjarni

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/8X9d-W5aeng/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Daniel LaLiberte]

Bjarni,

I am surprised to hear that keyboard events are not propagated out of the table chart elements.  I'd like to find a resolution that at least allows you to proceed as you have tried.  If you have energy to investigate further, it may be useful to know that the table chart uses the Google Closure EventHandler, which is documented at  http://docs.closure-library.googlecode.com/git/class_goog_events_EventHandler.html

As an experiment, you might try adding your own html to a column of the table, just to see if you can focus on those elements.  Be aware that each time you call the table.draw() method, it will reuse the previously generated table element and header row, but replace the body.

[Bjarni Gudmundsson]

Thanks, I'll try again :)

But maybe I've been doing something else wrong; I get these events when I put the handler on the whole document, but not when I put it on the div containing the table I get nothing...

All best,

Bjarni

[Daniel LaLiberte]

If you mean you put the handler on the container element that you give to the Table chart constructor, then that should work as well as any element outside of that container element.  If you look at the elements inside that container, you'll see a couple nested divs and possibly multiple tables, depending on your options.  But key events should propagate out from the active element, assuming it is properly active.

Have you looked also for the keyup and key press events?

[Bjarni Gudmundsson]

Hi, I'm doing it like this:

In my .aspx:

<div id="divTableWrapper" style="position:absolute; top:400px; left:20px; ">

<div id ="divTable" style="position:inherit;width:300px;" >

</div>

</div> 

inside my 'ready()' in js:

        drawTable();

        document.getElementById("divTable").addEventListener("keydown", eventHandl);

        //document.addEventListener("keydown", eventHandl);  //-> this one gives me the events

and inside the drawTable():

                theTable = new google.visualization.Table(document.getElementById('divTable'));

                google.visualization.events.addListener(theTable, 'select', selectHandler);

                  theTable.draw(dataT1, {

                      width: 300, height: 100,

                });

and the screenshot below shows the resulting html

If you have some hints for me, it would be appreciated :)

Best regards,

Bjarni