ngGrid - edit a row on button click (ASP.NET Gridview edit equivalent) - row

Question

Is there a straightforward way to enable an entire row of ng-grid to edit mode, in the click of a button. I know if you set gridOptions for enableCellEditOnFocus or enableCellEdit, you can click/doubleclick to edit a particular cell. But what I want is to have a button in each row, and when clicked on that the whole row should be editable.
The code I have right now is this, but it doesn't achieve what I want.
vm.grid.childServicesGridOptions = {
data: "vm.grid.childServices",
rowHeight: 35,
enableCellSelection: false,
enableRowSelection: true,
multiSelect: false,
columnDefs: [
{ field: 'serviceId', displayName: 'Service Id', visible: false },
{ field: 'location.locationName', displayName: 'Location Name', width: "25%" },
{ field: 'serviceDisplayName', displayName: 'Product/Service Display Name', width: "25%" },
{ field: 'duration', displayName: 'Duration', width: "10%" },
{
field: '', displayName: 'Action', width: "10%",
cellTemplate: '<button ng-click="vm.grid.editChildService(row)"><span class="glyphicon glyphicon-pencil"></span></button>'
}
],
pagingOptions: { pageSizes: [10, 20, 30], pageSize: 10, currentPage: 1 },
totalServerItems: 'vm.grid.childServices.length',
};
vm.grid.editChildService = function (row) {
row.entity.edit = !row.entity.edit;
}

Answer 1

It seems like there's no straightforward way to do this, I had to add a cell template and set it to edit in the [Edit] button click. Following is what I did:
vm.holidayProperties.childHolidayGridOptions = {
data: "holidayProperties.selectedHoliday.childHolidays",
rowHeight: 35,
enableCellSelection: false,
enableRowSelection: true,
multiSelect: false,
columnDefs: [
{ field: 'holidayId', displayName: localize.getLocalizedString('_HolidayId_'), visible: false },
{ field: 'location.locationName', displayName: localize.getLocalizedString('_LocationName_'), width: "15%" },
{ field: 'holidayName', displayName: localize.getLocalizedString('_Holidayname_'), width: "15%" },
{
field: 'isAllDay', displayName: localize.getLocalizedString('_IsAllday_'), width: "10%",
cellTemplate: '<input type="checkbox" ng-model="row.entity.isAllDay" ng-change="holidayProperties.setEndDateDisabled()" ng-disabled="!row.editable">'
},
{
field: '', displayName: localize.getLocalizedString('_Action_'), width: "10%",
cellTemplate: '<button ng-show="!row.editable" ng-click="holidayProperties.setRowEditable(row)"><span class="glyphicon glyphicon-pencil"></span></button>' +
'<button ng-show="row.editable" ng-click="holidayProperties.reset(row)"><span class="glyphicon glyphicon-arrow-left"></span></button>'
}
],
enablePaging: true,
showFooter: true,
showFilter: true,
pagingOptions: { pageSizes: [10, 20, 30], pageSize: 10, currentPage: 1 },
totalServerItems: 'holidayProperties.selectedHoliday.childHolidays.length',
};
vm.holidayProperties.setRowEditable = function (row) {
row.editable = true;
}
vm.holidayProperties.reset = function (row) {
clientcontext.rejectChangesForEntity(row.entity);
row.editable = false;
}
Using the row.editable field, I set the disabled property of the field to be edited to true or false.