Editable cells in Angular UI Grid not working

This week at work I spent too much time on this small issue I had with UI Grid so I thought I will share the solution.

Angular documentation tells you that it is possible to make a column editable by setting enableCellEdit to true in columnDef.

What wasn’t obvious for me, is that for this to work you also need to load the ui.grid.edit module and add the uiGridEdit directive to the element on which you enabled uiGrid. Code example below.

$scope.gridOptions.columnDefs = [ 
  { name: 'name', enableCellEdit: true }, 
  // ...


<div ui-grid="gridOptions" ui-grid-edit class="grid"></div><br>