When a Grid's EnableKeyboardNavigation is set to true and FullRowMode is set to false, user can use tab key and arrow keys to navigate the focus cell. However when a cell in a ButtonColumn is focused, the button itself does not automatically receive focus. Because the button is not focused, pressing enter or space key will not trigger the button's click event. The following code can be used to automatically set focus to the button when a cell in a ButtonColumn is selected thus allowing user to use enter or space key to trigger the button's click event.
Code: JavaScript
//Set focus to the first link button or input element
//inside "root"
function focusButton(root)
{
if ((root.tagName == "A") ||
(root.tagName == "INPUT"))
{
//Focus the element if it is a link or an input
//element
root.focus();
}
else
{
//Going through all child nodes
for (var i = 0; i < root.childNodes.length; i++)
focusButton(root.childNodes[i]);
}
}
//This function is called when a cell is selected
//because the Grid's ClientSideOnCellSelected is set
//to "cell_selected"
function cell_selected()
{
//Get the grid object
var grid = eo_GetObject("Grid1");
//Get the selected cell
var selectedCell = grid.getSelectedCell();
//This code uses hard coded column index to determine
//whether the column is the column with the button. You
//must change this line to perform the test based on
//whatever your own app logic is. For example, you can
//set the GridColumn's Name property to a special value,
//then check that special value with getName() on the
//client side to determine whether it is the column you
//wish to handle enter key
if (selectedCell.getColumn().getOriginalIndex() == 2)
{
//Get the root element of the cell
var root = selectedCell.getDOMElement();
//Set focus to the first link (link button)
//or button (push button) in the cell
focusButton(root);
}
}
Code: HTML/ASPX
<eo:Grid ClientSideOnCellSelected="cell_selected" ....>
....
</eo:Grid>
The code handles the Grid's ClientSideOnCellSelected event, then automatically focus the button in the selected cell in the event handler.