Wednesday, 16 April 2014

Auto save data to the server after a cell value changed - AngularJS and ng-grid

Hi friends,

how get the data or auto save data to the server after a cell value changed in angular js

I have to create a controller as "DonarController" and with in create a ng-grid "GridOptions"
<div data-ng-controller="DonarController">
    <form name="bb-donar-form">
        <div class="col-sm-12">
                <div class="gridStyle" data-ng-grid="GridOptions">
                </div>
            </div>
    </form>
</div>
Then have to create functionality for particular grid

(function () {
    angular.module('BloodBank.Controller')
    .controller('DonarController', ['$scope', function ($scope) {
 //past below code here
    } ]);
})()

below code have to past the above.
This functionality is declare the celledit template as a input box with updateEntity(col,row) function

 var cellEditableTemplate = "<input type=\"number\" style=\"width:56px; text-align: right;\" ng-class=\"'colt' + col.index\" ng-input=\"COL_FIELD\" ng-blur=\"updateEntity(col,row)\" ng-model='row.entity.phno'/>";
        
        $scope.GridOptions = {
            data: 'datas',
            enableCellSelection: true,
            enableRowSelection: false,
            columnDefs: [
                { field: 'username', displayName: 'User Name' },
                { field: 'fullname', displayName: 'Full Name' },
                { field: 'bloodtype', displayName: 'Blood Type' },
                { field: 'gender', displayName: 'Gender' },
                { field: 'location', displayName: 'Location'},
                { field: 'phno', displayName: 'Phone No',                                          enableCellEdit: true,                                                            editableCellTemplate: cellEditableTemplate }
            ]
        };

and also add below function,

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

below screen i get changed cell value from ng-grid



2 comments:

KendoUI Chart using in AngularJS with Dynamic data

Here i'm going to do the KendoUI Chart using AngularJS  and getting dynamic data from angular services. First need to down-lode the r...