Hi.
I'm trying to override the default navigation using the KeyDownHandler client event. I want to skip over those columns or cells that are not editable when the user presses the arrow keys or the tab key. I am able to handle the left and right arrows okay now, and a regular tab, but I cannot figure out how to trap out a shift+tab (which would mimic the left arrow).
I would appreciate any input on this issue.
Hello,
It really depends how far you got with the KeyDownHandler (pasting some javascript code of the handler would help), but I guess you went almost to the end of your tasks since you already handle left, right and tab.
So I assume you already have the event passed to the KeyDownHandler to determine the actually key. To query for shiftKey you can use (assuming the event varaible is called e)
e.shiftKey
it returns true / false depending on the state of the shift key.
Is this helpful / close to what you need? Or maybe I am missing something?
Thank you for your response.
I'm using the Client Side KeyDownHandler. There doesn't seem to be anything to indicate that the shift is currently pressed.
But, I've found a solution. If the shift key is pressed (key #16), I'm setting a global flag in the keydown handle. If the shift is let go, I'm resetting the flag in the KeyUpHandler. Then if a tab is pressed while the flag is set, I mimic a Shift+tab. Otherwise I simply execute a normal tab.
I'll post the code once I have everything working. Maybe it will be helpful to somebody else in the future.
Thanks for sharing the solution in public forums - much appreciated - I am sure other developers will find it useful.
On a second though you are correct - I am now going through the KeyDownHandler documentation and unfortunately the original browser event where you can check for event.shiftKey is not passed to the javascript event handler. It is good to know that Shift refers to keycode #16. In IE browser you can also probably get the event using "window.event" and then check the shiftKey property.
Thanks again.
Well...I've gotten the code working for the most part with one exception. I'm using WebNumericEdit controls in the editable cells, and the Client-Side WebGrid events don't seem to fire when in Edit mode. I'm wondering if anybody has any suggestions.
Here's the code in its current form:
var _shiftPressed = false; function uwgLocates_KeyDownHandler(gridName, cellId, key){ //Add code to handle your event here. // Get the current cell var cell = igtbl_getCellById(cellId); return navigateGrid(cell, key);}function uwgLocates_EditKeyDownHandler(gridName, cellId, key) { //Add code to handle your event here. // Get the current cell var cell = igtbl_getCellById(cellId); if (key == 39 || key == 37 || key == 9 || key == 38 || key == 40) { cell.endEdit(true); } return navigateGrid(cell, key);}function uwgLocates_KeyUpHandler(gridName, cellId, key) { //Add code to handle your event here. switch (key) { case 16: _shiftPressed = false; break; }}
function navigateGrid(cell, key) { switch (key) { // the 'Right' key case 39: // Check to see if there is a next cell in the row var nextCell = getNextEditableCell(cell); if (nextCell.isEditable()) { nextCell.setSelected(true); nextCell.activate(); } return true; break; // the 'Left' key case 37: var prevCell = getPrevEditableCell(cell); if (prevCell.isEditable()) { prevCell.setSelected(true); prevCell.activate(); } return true; break; // the 'Shift' key case 16: // Set a flag to indicate that the 'Shift' key is pressed. Unset the flag in the key-up handler _shiftPressed = true; break; // the 'Tab' key case 9: if (_shiftPressed == true) { var prevCell = getPrevEditableCell(cell); if (prevCell.isEditable()) { prevCell.setSelected(true); prevCell.activate(); } } else { var nextCell = getNextEditableCell(cell); if (nextCell.isEditable()) { nextCell.setSelected(true); nextCell.activate(); } } return true; break; // the 'Up' key case 38: var upCell = getUpEditableCell(cell); if (upCell.isEditable()) { upCell.setSelected(true); upCell.activate(); } return true; break; // the 'Down' key case 40: var downCell = getDownEditableCell(cell); if (downCell.isEditable()) { downCell.setSelected(true); downCell.activate(); } return true; break; }}// Recursive function to get the Next Editable Cellfunction getNextEditableCell(cell) { var nextCell = cell.getNextCell(); if (nextCell != null) { if (nextCell.isEditable()) { return nextCell; } else { return getNextEditableCell(nextCell); } } else { return cell; }}// Recursive function to get the Previous Editable Cellfunction getPrevEditableCell(cell) { var prevCell = cell.getPrevCell(); if (prevCell != null) { if (prevCell.isEditable()) { return prevCell; } else { return getPrevEditableCell(prevCell); } } else { return cell; }}// Recursive function to get the Next Editable Cell Upfunction getUpEditableCell(cell) { // Get the row of the cell var row = cell.getRow(); var prevRow = row.getPrevRow(); if (prevRow != null) { var upCell = prevRow.getCell(cell.Index); if (upCell.isEditable()) { return upCell; } else { return getUpEditableCell(upCell, prevRow); } } else { return cell; }}// Recursive function to get the Next Editable Cell downfunction getDownEditableCell(cell) { // Get the row of the cell var row = cell.getRow(); var nextRow = row.getNextRow(); if (nextRow != null) { var downCell = nextRow.getCell(cell.Index); if (downCell.isEditable()) { return downCell; } else { return getDownEditableCell(downCell, nextRow); } } else { return cell; }}
Just a suggestion that might be helpful - reading through the CSOM of WebNumericEdit here:
http://help.infragistics.com/Help/NetAdvantage/NET/2008.3/CLR3.5/html/WebNumericEdit_Object_CSOM.html
maybe you can hook a client-side event for your WebNumericEdit instance.. say the "blur" event that fires when the numeric loses focus, that I guess should be equivalent to a cell losing focus.