Treegrid navigation after row edit cancel

[bduguay]

The problem that I am having is that after editing a row and pressing escape to cancel the changes(using cancelEdit), the grid no longer has focus and the up/down arrows won't move up and down in the treegrid items. But, the focus will return to the treegrid after I have saved the row(using endEdit).

Here is my code for navigating the treegrid

Code:

    $(currentGrid).treegrid('getPanel').attr('tabindex','-1').bind('keydown', function(e) {
    		// Only allow the key up/key down events when the user is not editing the row.
	       	if (editingId == undefined) {
	    		// Prevent the default key press action
	    		e.preventDefault();
	    		// Up key - move to the previous row
	    		if (e.keyCode === 38) {
	    			var $curGrid = $(currentGrid),
	    				row = $curGrid.treegrid('getSelected'),
	    				gridData = $curGrid.treegrid('getData'),
	    				i = 0,
	    				found = false,
	    				previousRowId = 0;
	    			while ((i < gridData.length) && !found) {
	    				var gridRow = gridData[i];
	    				if (i === 0) {
	    					previousRowId = gridRow.id;
	    				}
	    				if (gridRow.children) {
	    					var j = 0;
	    					while (j < gridRow.children.length && !found) {
	    						child = gridRow.children[j];
	    						if (child.id === row.id) {
	    							found = true;
	    						} else {
	    							previousRowId = child.id;
	    						}
	    						j++;
	    					}
	    				} else if (gridRow.id === row.id) {
	    					found = true;
	    				} else {
	    					previousRowId = gridRow.id;
	    				}
	    				i++;
	    			}
	    			if (found) {
	    				$curGrid.treegrid('select', previousRowId);
	    			}
			    	// Down key - move to the next row
	    		} else if (e.keyCode === 40) {
	    			var $curGrid = $(currentGrid),
	    				row = $curGrid.treegrid('getSelected'),
	    				gridData = $curGrid.treegrid('getData'),
	    				i = gridData.length - 1,
	    				found = false,
	    				previousRowId = 0;
	    			while ((i >= 0 ) && !found) {
	    				var gridRow = gridData[i];
	    				if (i === gridData.length - 1) {
	    					previousRowId = gridRow.id;
	    				}
	    				if (gridRow.children) {
	    					var j = gridRow.children.length - 1;
	    					while (j >= 0 && !found) {
	    						child = gridRow.children[j];
	    						if (child.id === row.id) {
	    							found = true;
	    						} else {
	    							previousRowId = child.id;
	    						}
	    						j--;
	    					}
	    				} else if (gridRow.id === row.id) {
	    					found = true;
	    				} else {
	    					previousRowId = gridRow.id;
	    				}
	    				i--;
	    			}
	    			if (found) {
	    				$curGrid.treegrid('select', previousRowId);
	    			}
	    		} else if (e.keyCode === 32) {
	    			editRow(batchDateDeptNum, false);
	    		}
	       	}
    });

Here is the code for cancelling or saving the changed row

Code:

                // Set the escape key to cancel the row edit
                $currentGrid.treegrid('getPanel').bind('keyup', function(e) {
                		// Prevent the default key press action
                		e.preventDefault();
                		// Escape key - Cancel changes
                		if (e.keyCode === 27) {
                			cancelRowEdit(batchDateDeptNum);
                 			$(currentGrid).focus();
                		// Enter key - Save changes
                		} else if (e.keyCode === 13) {
                			// We need to set focus on the save button so that data in the cell will be correctly saved.
                			$('[id="' + batchDateDeptNum + 'SaveButton"]').focus();
                			saveRow(batchDateDeptNum);
                		}
                });

Please help.

I'm using jQuery Easy-Ui 1.3.4. I tried to update to 1.4.1 and found that all of the formatting for my project was messed up.(no I don't have any custom formatting, only using the easy-ui default theme)

[bduguay]

I figured it out myself. By setting focus on the cancel button it allowed the focus to be set back on the treegrid and now the up/down buttons work.

Code:

               $currentGrid.treegrid('getPanel').bind('keyup', function(e) {
                 		// Escape key - Cancel changes
                		if (e.keyCode === 27) {
                			// Tell the browser that the keyCode has been handled
                			e.handled = true;
               			// Focus on the cancel button so that the up/down button will work correctly in the treegrid.
                			$('[id="' + batchDateDeptNum + 'CancelButton"]').focus();
               			cancelRowEdit(batchDateDeptNum);
                		// Enter key - Save changes
                		} else if (e.keyCode === 13) {
                			// Tell the browser that the keyCode has been handled
                			e.handled = true;
                 			// We need to set focus on the save button so that data in the cell will be correctly saved.
                			$('[id="' + batchDateDeptNum + 'SaveButton"]').focus();
                			saveRow(batchDateDeptNum);
                		}
                });