Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Keyboard selection behavior in the Grid

Dan Golob
6 years ago Aug 19, 2015 2:35pm

I am having an incredibly difficult time trying to figure out how to get row selection to work with the keyboard when using the grid. In a table environment, when you select a row with your mouse, using the up/down arrows will select the row above or below. In the grid, however, the originally selected row stays selected, but a strage box selection moves up/down/left/right instead. The problem is that no listeners seem to fire when this happens. 

My application must work fully with no mouse, so this is problematic. I need to know where selection is so that other things can occur on the page. How do I figure out where the box is? ... or, more precisely, when the box is moved, how can I fire an event?

 

Blanford Robinson
6 years ago Aug 19, 2015 6:45pm
Pekka Hyvönen
6 years ago Aug 20, 2015 7:06am
Dan Golob
6 years ago Aug 20, 2015 1:19pm

Thanks, Pekka, while that helps, it doesn't help a great deal. The thing is, I need the row to be selected as the down arrow is pressed. Much happens on the screen on selection, which happens to be triggered by said SelectionListener. This feature is very important for the screen, but unfortunately I can't seem to capture this down arrow. 

I have tried adding a Shortcut Listener to the grid itself listening for the down arrow, but this only seems to fire if a cell is in Edit Mode. Otherwise, I get nothing. Is there a trick to this? If I could at least capture this event, I can overload the operation I need, but so far I have had no luck. Any idea?

Blanford Robinson
6 years ago Aug 20, 2015 1:48pm
Blanford Robinson
6 years ago Aug 20, 2015 2:43pm

Hello @Pekka

Is it possible to overload the function of the arrow keys?

To be specific, is it possible to have the [arrow key] act like [arrow key + space] ?

Pekka Hyvönen
6 years ago Aug 21, 2015 8:28am
Dan Golob
6 years ago Aug 21, 2015 12:11pm
Pekka Hyvönen
6 years ago Aug 21, 2015 1:37pm
Marius Reinwald
6 years ago Aug 21, 2015 1:57pm
Dan Golob
6 years ago Aug 21, 2015 2:52pm
Dan Golob
6 years ago Aug 31, 2015 7:28pm
René Zurbrügg
6 years ago Sep 09, 2015 7:35am
Dan Golob
6 years ago Sep 09, 2015 12:48pm
René Zurbrügg
6 years ago Sep 09, 2015 1:27pm

If it's not too much trouble for you and if you have a clean solution i'd be happy to see it.
I'm not that happy with my javascript solution and i'm sure we're not the only ones dealing with this problem.
 

Dan Golob
6 years ago Sep 09, 2015 1:29pm

No problem. I will post it shortly. Need to meet up with the guy who actually got it working so that I don't post half-assed code. I will try to get it online in the next few hours.

Blanford Robinson
6 years ago Sep 09, 2015 3:42pm
Marius Reinwald
6 years ago Sep 09, 2015 7:26pm

Nice Step-by-Step explanation Blanford Robinson. Just to add remember to put the Connector classes in the client package below the Widgetset. (Also i have never inherited Resources in the Widgetset as far as i know)
René's Javascript solution actually gave me an idea to make my code better performance-wise by making a JSNI jquery method call on Key Press.
To make things easier. I'm going to attach the source for the java Files of the Project. There is also a basic TextfieldRenderer and a UI to test it in there if someone needs it.
Both the Extension and the Renderer could maybe use some work though if used in a productive environment but it should have the basic functionality in them.

Blanford Robinson
6 years ago Sep 09, 2015 8:31pm
Marius Reinwald
6 years ago Sep 09, 2015 8:51pm

Totaly forgot that you can also select the header like this. Yes it will in that case try to Sort the Column which is not ideal.
Changing the JS part in th Connector to

$wnd.$(".v-grid-body .v-grid-cell-focused").click();

seems to do the trick. The only problem is that when you press up to select the header the first row is still selected so when you then go back down using "arrow down" it deselects the first row. If your Grid can't be unselected this might not be a problem. If not you could maybe find a way to exclude rows from the jQuery selector that have a parent with .v-grid-row-selected in their classname.

René Zurbrügg
6 years ago Sep 10, 2015 2:07pm

Thanks a lot! It works perfectly. Wasn't so happy with my Javascript solution because you need to check in a specific intervall.
To solve the deselect problem that Marius mentioned i check first if the focused row is allready selected.
I also had some troubles because i have two Grids on my page. To solve this, i set a unique class name for every grid and pass them to execClick using grid.getStyleName().

I'll just write it here in case anyone else has the same problem.
Thanks for helping

public static native void execClick(String class)  /*-{
​   // Replace ' ' because getStyleName returns ' ' instead of '.'
    var id = "."+class.replace(/ /g, ".");    
    if(!$wnd.$(id+" .v-grid-row-focused.v-grid-row-selected").length)
    {    
      $wnd.$(id+" .v-grid-body .v-grid-cell-focused").click();
    }
Enkara Dura
5 years ago Jan 12, 2017 1:56pm
Moritz Christian
4 years ago Oct 16, 2017 2:55pm
Alexander Cherepanov
4 years ago Mar 02, 2018 8:15am
user vaadin
3 years ago Nov 23, 2018 12:35pm
Moritz Christian
2 years ago Feb 12, 2020 12:17pm