3.2.0

Setting focus on a cell

I am having focus issues when using the 2.0 version of the Grid. First, despite having perused the forum, I have been unable to figure out exactly how to set focus on an individual cell. If someone could give me a simple sample of code to set focus, I would be most appreciative.

The second, and related problem, is that when I perform a validation after editing a cell, the focus is set on the adjacent cell. At this point the user is unable to use the cursor keys to navigate; the mouse must be used. The following code is how I invoke the validation function:

this.gridObj.onCellEditEnded = 
   function(text, col, row){ProcessEdit(text, col, row, this);} ;


The first issue is related: I really need to be able to set the focus on the cell in error.

Anybody know how to resolve these issues?
Michael Norton, Compass Technology
April 11,
Unfortunately focus is a complicated issue. Except for IE all other browsers do not allow setting focus on arbitrary html element (but only to a small subset - input, button, etc.). For this reason in AW you can set a focus to the control but not to the particular part of the control as this might be impossible depending how this part of the control is implemented.

With the grid you can set the current row and column (which together define current cell) and/or you can specify which cells or rows are selected but the focus itself is managed on the control level.

There is one exception - cell editing. When the cell is switched into editing mode it receives focus.

I guess your question is close to 'how to switch particular cell into editing mode?' - there is no special method for this but you can use internal event editCurrentCell for this purpose -

function editFirstCell(){
        obj.setCurrentColumn(0);
        obj.setSelectedColumns([0]);
        obj.raiseEvent("editCurrentCell");
    }


or complete example -

var obj = new AW.UI.Grid;
    obj.setCellData("cell");
    obj.setHeaderText("header");
    obj.setColumnCount(10);
    obj.setRowCount(10);
    obj.setCellEditable(true);
    document.write(obj);

    function editFirstCell(){
        obj.setCurrentColumn(0);
        obj.setSelectedColumns([0]);
        obj.raiseEvent("editCurrentCell");
    }

    var button = new AW.UI.Button;
    button.setControlText("edit");
    button.onControlClicked = editFirstCell;
    document.write(button);
Alex (ActiveWidgets)
April 11,
Alex,

Thanks for the quick response. I understand the principles, and am attempting to implement your suggested work around. It is pretty close, but I'm receiving an error on the obj.raiseEvent("editCurrentCell"); line of code. The error is: 'undefined' is null or not an object. The indicated location is line 19, char 347, which is

ture){window.removeEventListener(name.replace(/^on/,""),handler[name],true);handler[name]=null}


Of course this may not be accurate; I've included the snippet just to provide as much info as I have available to me.
Michael Norton, Compass Technology
April 12,
Just to confirm and a similar one:
Using:
obj.raiseEvent("editCurrentCell", {}, col, row);

In FireFox 1.5 the error is:
Error: event.preventDefault is not a function
Source File: file: aw.js
Line: 19
Carlos
April 12,
Please see a workaround here -
http://www.activewidgets.com/javascript.forum.13419.1/error-on-obj-raiseevent-editcurrentcell.html
Alex (ActiveWidgets)
April 17,

This topic is archived.

See also:


Back to support forum