tabbing from cell to cell

I'm having a heck of a time geting this to work. Anyone been able to? Examples would be great! Heres what I have so far:

obj.setEvent("onkeydown", function (event){
// alert(event.keyCode);
if(event.ctrlKey) {
var key=event.keyCode;
if (key==67) // Ctrl-c copies to the clipboard
CopyToClipboard();
if (key==86) // paste from clipboard
PasteFromClipboard();
}
var colIndex = obj.getCurrentColumn();
if (event.keyCode==9) { // tab from field to field
window.event.cancelBubble = true; //cancels browser Tab event
window.event.returnValue = false;
// obj.refresh(); if I un-comment these 2 lines, the grid becomes un-editable
// obj.setCellEditable(true, colIndex, currRowIndex);

editCell(colIndex+1, currRowIndex);
}
});

and my editCell() function:
function editCell(col, row) {
obj.setCellEditable(false);
var MyInput = new AW.UI.Input;

var lastcol="";
var lastrow="";
var defaultcelltemplate = obj.getCellTemplate(2,2);


obj.setCellTemplate(defaultcelltemplate, lastcol, lastrow);
obj.getCellTemplate(lastcol, lastrow).refresh();
obj.setCellTemplate(MyInput , col, row);
obj.getCellTemplate(col, row).refresh();
lastcol = col;
lastrow = row;
}

TIA
Josh

It is possible to add mappings for additional keys this way -

obj.setController("myTabKeys", {
        onKeyTab: "selectNextCell",
        onKeyShiftTab: "selectPreviousCell"
    });

There is a list of keyboard events and some examples here -

http://www.activewidgets.com/aw.system.control/control-keyboard-events.html

Is there a list of the built in event actions? like selectNextCell...
Might there be an editNextCell?

actually it also looks as though the grid widget itself loses focus upon the tab event. So a click is still needed to start editing the next cell. Perhaps I have someting wrong.

what exactly does this code do?

obj.setController("myTabKeys", {
onKeyTab: "selectNextCell",
onKeyShiftTab: "selectPreviousCell"
});


is it referencing the selectNextCell function? I tried that and still couldn't get it to work.

any help on this would be greatly appreciated :)

It raises "selectNextCell" event in response to "onKeyTab" event and "selectPreviousCell" in response to "onKeyShiftTab".

The handlers for selectNext/PreviousCell (internal) events are defined in /source/lib/grid/_actions.js

ok, I again apologize for my lack of intelligence on this one, as you can see, i'm not much of a JS guy. I added the code you suggested, but its still not tabbing, I saw the event listed in _grid.js, it just doesn't seem to be firing off. What am I doing wrong here?

<script>
var obj = new AW.UI.Grid;
obj.setVirtualMode(false);

obj.setSize(800, 500);
obj.setCellText(rows_data);
obj.setHeaderText(col_columns);
obj.getRowTemplate().setClass("text", "normal"); // hide overflow (ellipsis), default
obj.getRowTemplate().setClass("text", "wrap"); // multiline text
obj.setRowHeight(22);

obj.setColumnCount(4);
obj.setRowCount(<%=numRows%>);

obj.setCellEditable(true);

var currRowIndex = 0;

obj.onCellValidated = function(text, column, row){
obj.setCurrentRow(row);
var col;
var str = new String('');

for (col=0; col<5; col++)
str = str + obj.getCellText(col, row) + '||||';

str = str + '@@@@';
document.frmEmplPage.formData.value = document.frmEmplPage.formData.value + str;
}

obj.onCurrentRowChanged = function(index){
var lastRow = 0;
lastRow = obj.getCurrentRow();
if (!bScrolling)
obj.getRowTemplate(lastRow).setStyle("background", "yellow");
}

var bFirtTimeRowIsClicked = true;
obj.onRowClicked = function(event, index){
if (!bFirtTimeRowIsClicked)
obj.getRowTemplate(currRowIndex).setStyle("background", (currRowIndex % 2)? "#ffffff" : "#eeeeee");
else {
currRowIndex = index;
bFirtTimeRowIsClicked = false
}

obj.getRowTemplate(index).setStyle("background", "yellow");

currRowIndex = index;
}
obj.setEvent("onkeydown", function (event){
// alert(event.keyCode);
if(event.ctrlKey) {
var key=event.keyCode;
if (key==67) // Ctrl-c copies to the clipboard
CopyToClipboard();
if (key==86) // paste from clipboard
PasteFromClipboard();
}
var colIndex = obj.getCurrentColumn();
if (event.keyCode==9) { // tab from field to field
window.event.cancelBubble = true;
window.event.returnValue = false;

}
});
obj.setController("myTabKeys", {
onKeyTab: "selectNextCell",
onKeyShiftTab: "selectPreviousCell"
});

document.write(obj);
</script>

Tabbing using:

obj.setController("myTabKeys", {
        onKeyTab: "selectNextCell",
        onKeyShiftTab: "selectPreviousCell"
    });

does not seem to be working properly in Firefox.

the following error is given on the event:

Error: this.element().focus is not a function
Source File: http://server/ActiveWidgets/runtime/lib/aw.js
Line: 67

I think it should be:
this.element().focus()

This was happening because of code I had in place to make single click edit cell work.
I have removed that code; now tab moves the selection over one cell then loses focus.

FF 1.0.7

Am I doing something wrong?

IE seems to work just fine.

I've now resolved my problem. It seems the statement:
obj.setEvent("onkeydown", function (event)......
was killing the tabbing functionality. Once I moved my code from there to a function called by <body onKeyDown=someFunction()> it worked! The only thng is when the tabbing does work, going from cell to cell doesn't LOOK like the focus is being set, the user has to begin for this to happen. Other than that, its working great!

Thx for the help
Josh

Josh,

though it looks like I am late with this one - here is the list of keyboard events and some examples -

http://www.activewidgets.com/aw.system.control/control-keyboard-events.html

You may add handlers for Ctrl-C and Ctrl-V this way -

obj.onKeyCtrlC = function(){
    CopyToClipboard();
}

obj.onKeyCtrlV = function(){
    PasteFromClipboard();
}

if you want switching to editing mode automatically when the cell is selected - use onCellSelectedChanged event -

obj.onCellSelectedChanged = function(selected, col, row){
    if (selected){
        this.setTimeout(function(){
            this.raiseEvent("editCurrentCell", {}, col, row);
        });
    }
}

Setting the controller to support tabbing works great. However, it only works within the current row.
How do you:
1. On back tab, tab to the last column of the previous row?
2. On forward tab, tab to the first column of the next row?
3. On back tab when on the first column of the first row, tab out of the grid to the previous control (text input field etc)?
4. On forward tab when on the last column of the last row, tab out of the grid to the next control (text input field etc)?

You should look in /source/lib/grid/_actions.js - this is where all navigation actions are implemented and design something similar.

How would I add/insert my own navigation actions without modifying the _action.js code?

Thanks.

Ok,

figured out how to do it. It appears that the action methods get added to the grid prototype. In my case we have extended the grid so the new methods have been added to the prototype of the extended grid. The following code tabs through all cells in a grid immediately putting the cell into edit mode (if it is editable). Supports back tab and forward tab. On tab from last cell goes to next tab-able component following grid. On backtab in first cell goes to previous tab-able component preceeding grid. After tabbing out of the grid and then back tabbing back into the grid, focus goes to the first cell in the grid which meets my needs. There is one issue where the user clicks to a component outside of the grid. On tab back into the grid, focus goes to the cell which last had focus. I'm pretty sure I can resolve that issue but that is low down on my list of priorities. I got to say that this is pretty cool control.

proto_type.setController("MyTabKeys", {
        onKeyTab: "mySelectNextCell",
        onKeyShiftTab: "mySelectPreviousCell"
    });

    proto_type.mySelectNextCell = function(event) {
        var c = new Number(this.getCurrentColumn()) + 1;
        var r = new Number(this.getCurrentRow());
        if (c >= this.getColumnCount()) {
            c = 0;
            r++;
        }
        try {
            // move focus out, triggers end of edit
            this.getContent("focus").element().focus();
        }
        catch(err) {
            // ignore focus errors
        }
        if (r < this.getRowCount()) {
            this.mySelectCell(c, r);
            AW.setReturnValue(event, false);
        }
        else {
            // make sure that when grid gets focus again, focus goes to first cell
            this.setCurrentColumn(0);
            this.setCurrentRow(0);
        }
        event = null;
    }

    proto_type.mySelectPreviousCell = function(event) {
        var c = new Number(this.getCurrentColumn()) - 1;
        var r = new Number(this.getCurrentRow());
        if (c < 0) {
            c = this.getColumnCount() - 1;
            r--;
        }
        try {
            // move focus out, triggers end of edit
            this.getContent("focus").element().focus();
        }
        catch(err) {
            // ignore focus errors
        }
        if (r > -1) {
            this.mySelectCell(c, r);
            AW.setReturnValue(event, false);
        }
        event = null;
    }

    proto_type.mySelectCell = function(c, r){

        if (c != this.getCurrentColumn()){
            this.setCurrentColumn(c);
        }

        if (r != this.getCurrentRow()){
            this.setCurrentRow(r);
        }

        var cc = this.getSelectedColumns();
        if (cc.length != 1 || cc[0] != c){
            this.setSelectedColumns([c]);
        }

        var rr = this.getSelectedRows();
        if (rr.length != 1 || rr[0] != r){
            this.setSelectedRows([r]);
        }
    }
    

    /**
     * auto edit on cell selection (if cell supports edit)
     */
    proto_type.onCellSelectedChanged = function(selected, col, row) {
       if (selected) {
            this.setTimeout(function(){
                this.raiseEvent("editCurrentCell", {}, col, row);
            });
        }
    }

The example abowe works fine but if i instead of tab maps this to Enter it result is that i need to enter "Enter" 2 times.

proto_type.setController("MyTabKeys", {
onKeyEnter: "mySelectNextCell",
onKeyShiftEnter: "mySelectPreviousCell"
});

....
code from Bryn:s example
....

I supose this have to do with the edit template....
But how to do if i want enter key to work like the tab example from Bryn.

Summary : How to do if i want key Enter to work like key ArrowRight with the extended "next row/first cell" feature

You have to modify editing code to make it work for Enter key - the reason is that the Enter key is used by default to start editing and finish editing, and the event is cancelled when in edit mode.

I implemented the code above and found that when i use oncellvalidated, an error is not displayed when it occurs.

The focus stays in the current cell on (shitf)tab, however the selection does move to the next or previous cell.

when changing AW.setReturnValue(event, false); to AW.setReturnValue(event, true); the error does display, however the difference between the focus and selection still occurs.

Does anyone have an idea to catch the result of onCellValidated?

Thanks in advance

I also use an AW2 extended grid.
Where do I insert the above code?
I get an error: 'proto_type' is undefined.

when press tab, cell change but focus lost.
why?

The above solution works fine for the textfields. But does not loose focus on tab if the cell is combo field.

focus change works fine on grid with combo with
obj.setController("myTabKeys", {
onKeyTab: "selectNextCell",
onKeyShiftTab: "selectPreviousCell"
});

but this code does not make it editable..when i added code
obj.onCellSelectedChanged = function(selected, col, row){
if (selected){
this.setTimeout(function(){
this.raiseEvent("editCurrentCell", {}, col, row);
});
}
}

it makes the text fields editable but tab key does not work on combo field.

can anyone guide me further.

In iFrame , when i press enter key it is going down to two lines instead of single line,the same thing is working fine when i press enter+shift, what might be the reason