Ng-grid editable grid does not get focus on click

I need a grid that the user can edit. I also need to be able to add an extra row to the data set, preferably from the grid. But first of all i need to be able to edit the data.

I thought i could just use plain 2 way binding for this. But clicking on a cell does not make it editable. I have added enableCellEdit:true and also tried to add enableCellEditOnFocus. I would prefer just having all the cells editable without having to use a template. The cells contain a number and a date.

Below are my grid options that i pass the grid.

  $scope.gridOptions = {
    data: 'account.interests',enableRowSelection: false,
    enableCellEditOnFocus: true,
    multiSelect: false,
    columnDefs: [{
      field: 'rate',
      enableCellEdit: true,
      width: 60
    },
    {
      field: 'date',
      enableCellEdit: true,
      cellFilter: 'date:\'yyyy-MM-dd\''
    }]
  };

And my grid in the view:

<div ng-if="showInterestRates" >
    <div ui-grid="gridOptions"></div>
</div>

enter image description here

Solution

To get the edit future you must add the edit module: 'ui.grid.edit' module and you must include the ui-grid-edit directive on your grid element.