AngularJS and ng-grid - auto save data to the server after a cell was changed

Question

My Use Case is pretty simple. A User, after editing a Cell (enableCellEdit: true), should have the data \"automatically\" sent to the server (on cell blur). I tried differen

Answer 1

This is an improvement to the answer which has a few flaws: - it triggers a JS exception, as indicated in one of answer's comments - the data input in the cell is not retained in the grid - the updateEntity method does not illustrate how to save the input data

In order to remove the exception, create a scope attribute and add it to cellEditableTemplate:

$scope.cellValue;
...
var cellEditableTemplate = "";

Notice that the ng-blur call to updateEntity now includes cellValue as an argument. Next, update the updateEntity blur handler to include the argument and update the grid:

$scope.updateEntity = function(column, row, cellValue) {
    console.log(row.entity);
    console.log(column.field);
    row.entity[column.field] = cellValue;

    // code for saving data to the server...
    // row.entity.$update() ... <- the simple case

    // I have nested Entity / data in the row <- the complex case
    // var answer = new Answer(question.answers[answerIndex]); // answerIndex is computed with "column.field" variable
    // answer.$update() ...
};

I'm now able to see the changes on the screen as well as to trigger cell-based back-end updates.