Programmatically set dgrid row as active

Question

I'm trying to programmatically set a dgrid row as active, not just selected. I have a dojo dgrid OnDemandList which is using the Selection and Keyboard Mixins.

Using the select(row) method I can programmatically select a given row, but that row is not active. When a row is active, I can use the Up and Down arrow keys to navigate to the rows above and below it. When a row is just selected, the row is highlighted but the arrows keys do not work.

Clicking the row with the mouse will make it active and selected, but I'm trying to build my interface to be 100% usable with just the keyboard.

Answer 1

Ok, took me awhile but got it figured out. What I was really trying to do was add focus to a row. The code for doing that was in dgrid/Keyboard.js under the _focusOnNode method.

The actual code to change focus from row currentFocusedNode to row focusedNode is:

if(currentFocusedNode){
    // Clean up previously-focused element
    // Remove the class name and the tabIndex attribute
    put(currentFocusedNode, "!dgrid-focus[!tabIndex]");
    if(has("ie") < 8){
        // Clean up after workaround below (for non-input cases)
        currentFocusedNode.style.position = "";
    }
}

if(has("ie") < 8){
    // setting the position to relative magically makes the outline
    // work properly for focusing later on with old IE.
    // (can't be done a priori with CSS or screws up the entire table)
    focusedNode.style.position = "relative";
}
focusedNode.tabIndex = grid.tabIndex;
focusedNode.focus();
put(focusedNode, ".dgrid-focus");

The code above is really just a code fragment, for it to work you will have to declare "dojo/has" and "put-selector/put" first as well as define the currentFocusedNode and focusedNode. But I'm leaving that as an exercise for the reader ;-)

Also note that this only changes the "focus", it will not select the focusedNode but that can easily be done using grid.select(focusedNode);