When I'm finished editing a textarea in the grid the edit mode is not closing.
In this Plunker, if you double-click one of the cells under Title, the textarea opens correctly, but does not close after I click out of the cell.
http://plnkr.co/edit/9jrzziWOP6hWWQ1Gab39?p=preview
<div ui-grid="{ data: data, columnDefs: columnDefs }" ui-grid-edit></div>
var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data = [
{ name: 'John', title: 'CEO' },
{ name: 'Jane', title: 'Developer' }
];
$scope.columnDefs = [
{name: 'name', enableCellEdit: false},
{ name: 'title',
cellEditableCondition: true,
enableCellEdit: true,
editType: 'textarea',
editableCellTemplate: '<textarea rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'
}
];
}]);
Your problem has to do with the line:
editableCellTemplate: '<textarea rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'
In the API for uiGrid-edit, it states that you must have valid html, templateCache Id, or url that returns html content to be compiled when edit mode is invoked. In your case, you haven't included a means for the textarea to exit edit mode. To remedy this, include ui-grid-editor in the tag as follows.
editableCellTemplate: '<textarea ui-grid-editor rows="4" cols="140" ng-model="MODEL_COL_FIELD"></textarea>'