Editable DataGrid cell follow by [arrow key]

[kg]

How can move Editable DataGrid cell follow by [arrow key]?

Code:

	<script type="text/javascript">
		$(function(){
			$('#tt').edatagrid({
				autoSave: true,
				url: 'add.php',
				saveUrl: 'save.php',
				updateUrl: 'update.php',
				destroyUrl: 'destroy.php'
			});
		});
	</script>
<table id="tt" style="width:600px;height:200px"
        title="Editable DataGrid"
        singleSelect="true">
    <thead>
        <tr>
            <th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
            <th field="productid" width="100" editor="text">Product ID</th>
            <th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
            <th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
            <th field="attr1" width="150" editor="text">Attribute</th>
        </tr>
    </thead>
</table>