How to make angular -ui cell editable by one click?

Question

I am trying to make an angular ui-grid cell editable (row) cell editable on single click.

Right Now, Cell is becoming editable with a double click.

How to make cell editing with one click?

HTML:

 <div class="grid testGrid" ui-grid="testGridOptions" ui-grid-edit ui-grid-row-edit style="width: 100%;"> </div> 

Controller:

 var columns = [ { field: 'Name', displayName: 'Name', cellEditableCondition: function ($scope) { return $scope.row.entity.showRemoved; } } ]; 

Grid Options:

 $scope.testGridOptions = { enableRowSelection: false, enableRowHeaderSelection: false, enableCellEdit: true, enableCellEditOnFocus: false, enableSorting: false, enableFiltering: false, multiSelect: false, rowHeight: 30, enableColumnMenus: false, enableGridMenu: false, showGridFooter: false, onRegisterApi: function (gridApi) { $scope.gridApi = gridApi; } }; 

Answer 1

One-click editing is automatically added if you use i-grid navigation and set enableCellEditOnFocus to true in gridOptions .

Just add ui-grid-cellNav to your <div> grid.

The only thing I don't know is compatibility with ui-grid-row-edit .

Anyway, check out this tutorial to learn more.