Kendo Overriding keys navigation

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="ttp://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div data-ng-app="app">
    <div data-ng-controller="Grid as vm">
        <div id="gridID" pckendo kendo-grid='grid' k-options="vm.options"></div>  	
    </div>
</div>

JavaScript

angular
  .module("app", ["kendo.directives"])
  .controller("Grid", Grid)
  .directive('pckendo', PCKendo);

// Grid controller constructor
function Grid() {
  var vm = this;  

  vm.gridData = getDataSource(); 

  vm.options = {
    height: 200,
    navigatable: true,
    sortable: true,
    editable: true,
    columns: getColumns(),
    dataSource: vm.gridData,

  };

  $(document).on("click", ".k-grid-mycreate", function () {
    console.log("addRow called");
    vm.gridData.add(new RowData("", "", "", "", ""))

    console.log(vm.gridData);
  });

}


function getDataSource() {
  var gridData = [
      new RowData('1 jan 2015', 'C1', 'Car 1 - Red GMH sedan', 'TR1', 'Trailer 1'),
      new RowData('2 jan 2015', 'C2', 'Car 2 - Blue Toyota', 'TR1', 'Trailer 1'),
      new RowData('2 jan 2015', 'C2', 'Car 3 - Blue Toyota', 'TR2', 'Trailer 2'),
  ];

  
  // Need to bind to a data source. If pass just the dataservice.getData(viewName) result,
  // the grid takes a copy of this and put into it's own internal data source. If we pass this one,
  // we can get at the modified values.       
  var dataSrc = new kendo.data.DataSource({

    transport: {
      read: function (e) {
        e.success(gridData);
      },

      update: function (e) {
        console.log("update is called: ", e);
        var updateItem = e.data;
        console.log("updated object : ", updateItem);

        e.success();
      },

      create: function (e) {
        console.log("create is called:", e);
        console.log("create data is:", e.data);

        e.success(e.data);
      },
      destroy: function (e) {
        e.success();
      }
    },
    schema: {
      data: function (response) {
        // console.log("results", response);
        return response;
      },
      model: {
        id: "bookingId",

      }
    }
  });

  return dataSrc;
}

function getColumns() {
  var carList = [
       new RegoDescriptionPair('C1', 'Car 1 - Red GMH sedan'),
       new...