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 different approaches but none of them have properly worked out. I have a minimalistic grid:
// Configure ng-grid $scope.gridOptions = { data: 'questions', enableCellSelection: true, selectedItems: $scope.selectedRow, multiSelect: false, columnDefs: [ {field: 'id', displayName: 'Id'}, {field: 'name', displayName: 'Name'}, {field: 'answers[1].valuePercent', displayName: 'Rural', enableCellEdit: true} ] };
For example, I tried to watch the data model passed to the Grid. But doing so won't return me the edited cell:
$scope.$watch('myData', function (foo) { // myModel.$update() }, true);
I tried to fiddle with the "ngGridEventData" data event but it does not fire after cell edit
$scope.$on('ngGridEventData', function (e, gridId) { // myModel.$update() });
Finally, I tried to observer a Cell. However, this only work for a row by the mean of the "selectedCell" property of the grid:
$scope.selectedRow = []; $scope.gridOptions = { selectedItems: $scope.selectedRow, } $scope.$watch('selectedRow', function (foo) { console.log(foo) }, true);
Is it a ng-grid plugin needed? I can't believe it is not something out of the box.
Would you have a pointer / snippet how I could solve the auto save / send to the server?
There are two ways you can save your data on your Ag-Grid. 1) Get all data and send everything to the backend. 2) Get only the rows which you have changed, and send these rows to the backend.
UI-Grid 3.0 (formerly ng-grid) is a 100% Angular grid written with no dependencies other than AngularJS. It is designed around a core grid module and features are layered as Angular modules and Directives. This keeps the core; small and focused, while executing very complex features only when you need them.
Generic UI Data Grid is one of the best free grid library. Performance is the main focus point, grid is able to present huge sets of data up to 1 000 000 rows. It greatly integrates with the best javascript framework there is Angular. All of that makes this library a great free to use Angular data table component.
ng-grid is Angular's native implementation of the Grid. There are many plugins from third-parties that can be integrated into AngularUI Pages, but ng-grid exists inside the AngularJs framework and is very rich in functionality and compatibility. Let us create a sample ng-grid and understand how ng-grid works.
Maybe this is new but ng-grid actually publishes events which can be used to implement a simple update on change.
Event Reference: https://github.com/angular-ui/ng-grid/wiki/Grid-Events
Example code (add to controller where you setup the grid):
$scope.$on('ngGridEventEndCellEdit', function(evt){ console.log(evt.targetScope.row.entity); // the underlying data bound to the row // Detect changes and send entity to server });
One thing to note is that the event will trigger even if no changes have been made, so you may still want to check for changes before sending to the server (for example via 'ngGridEventStartCellEdit')
I've found what I think is a much nicer solution:
cellEditableTemplate = "<input ng-class=\"'colt' + col.index\" ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\" ng-change=\"updateEntity(row.entity)\"/>"
Using ng-change this way will cause updateEntity to be called with the entire object (row) that has been changed and you can post it back to the server. You don't need any new scope variables. A deficiency of the previous solution was that when you clicked in to start editing the field, it would always be blank instead of the original value before you began to edit.
That will cause updateEntity() to be called on each keystroke. If that is too frequent for you, you could use a timeout before posting to the server, or just use updateEntity() to record the id you want to push, and then use ng-blur to post the recorded id.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With