how to catch arrow keys in grid that uses MVVM [closed]

asked 2015-03-23 20:33:57 +0800

robertkaren gravatar image robertkaren
77 7

I have a grid of intboxes with a variable number of rows and cols and want to catch the arrow keys to navigate among them. I've ported over the documentation and am still confused as to how to do it, especially with MVVM. Here is the grid I'm working with. Can someone give me an idea how to do it?


delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by Senthilchettyin
close date 2015-03-25 03:52:15

2 Answers

Sort by ยป oldest newest most voted

answered 2015-03-23 20:52:05 +0800

chillworld gravatar image chillworld flag of Belgium
5322 4 9

updated 2015-03-24 10:33:55 +0800

It's actually pretty straight forward :

ctrlKeys="#up" onCtrlKey="@command('keyPressed')"

java :

public void keyPressed(@ContextParam(ContextType.TRIGGER_EVENT) KeyEvent event) {
    Clients.showNotification("pressed : " + event.getKeyCode()); 

Updated fiddle.


Well I've updated the fiddle again, only for right key and down key.

code :

public void keyPressed(@ContextParam(ContextType.TRIGGER_EVENT) KeyEvent event) {
    InputElement comp = (InputElement) event.getTarget();
    if (event.getKeyCode() == 39) {
        Component nextSybling = comp.getParent().getNextSibling() == null ? comp.getParent().getParent().getFirstChild().getFirstChild() : comp.getParent().getNextSibling().getFirstChild();
        while (!(nextSybling instanceof InputElement)) {
            nextSybling = nextSybling.getParent().getNextSibling() == null ? comp.getParent().getParent().getFirstChild().getFirstChild() : nextSybling.getParent().getNextSibling().getFirstChild();
        ((InputElement) nextSybling).setFocus(true);
    } else if (event.getKeyCode() == 40) {
        int tabIndex = comp.getTabindex();
        Component nextRow = comp.getParent().getParent().getNextSibling() == null ? comp.getParent().getParent().getParent().getFirstChild() : comp.getParent().getParent().getNextSibling();
        Component next = nextRow.getFirstChild().getFirstChild();
        while (!(next instanceof InputElement) || ((InputElement) next).getTabindex() != tabIndex) {
            next = next.getParent().getNextSibling().getFirstChild();
        ((InputElement) next).setFocus(true);

And in the zul I've changed also :

<intbox tabindex="${forEachStatus.index}"

So I could navigate under and know at what position I was.
Also in the implementation : end of row or line, goto beginning.
The right key has also the feature if you swap more of template, it still work (tested it with swapping template on foreachstatus.index%2==0).

For key down, the tabindex must be same for a inputelement or there are problems.

Greetz chill.

link publish delete flag offensive edit


Thanks so much. That's a great help!

robertkaren ( 2015-03-24 14:36:45 +0800 )edit

answered 2015-03-24 06:19:33 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2611 3 8

Hi Chill

The challenge will be when user press down arrow key, we need to move down on same column and when up key, move up on the same column.

Do you have example for that please ?

link publish delete flag offensive edit

Question tools

1 follower



Asked: 2015-03-23 20:33:57 +0800

Seen: 18 times

Last updated: Mar 24 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More