How do I make angular-ui cell editable on single click?

Question

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

Right Now, Cell becomes editable on double click.

How do I make cell editable on single 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;
    }
};

Teakwood

Answer 1

Editing on single click is automatically added if you use ui-grid's navigation and set enableCellEditOnFocus to true in your gridOptions.

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

The only thing I don't know is if it's compatible with ui-grid-row-edit.

Anyhow take a look at this tutorial to know more.

Higgler

It IS compatible. I just added the gridOptions: { enableCellEditOnFocus: true } on a <div ui-grid="vm.gridOptions" ui-grid-cellNav ui-grid-edit ui-grid-row-edit ...>. The only thing is that for the first edit I still have to double click, only thereafter does single clicking (now) suffice. – Moller