ui grid example 6

editable ui grid

by Aswin Devarajan

HTML

<div ng-app="uigrid">
    <div ng-controller="MainCtrl">
        <div class="text-warning">Only the <b>Description</b> and <b>Price</b> columns are editable in the server side</div>
        <div ui-grid="gridOptions" class="grid" ui-grid-edit></div>
        <p>Current page:
            <input type="number" min="1" max="{{ pagination.getTotalPages() }}" ng-model="pagination.pageNumber" ng-change="load()">of {{ pagination.getTotalPages() }}</p>
        <button type="button" class="btn btn-success" ng-click="pagination.previousPage()">previous page</button>
        <button type="button" class="btn btn-success" ng-click="pagination.nextPage()">next page</button>
    </div>
    <p><a target="_blank" href="http://blog.backand.com/ng-grid-and-a-simple-rest-api/">Back to the article</a></p>
    <p><a target="_blank" href="https://www.backand.com/apps/#/sign_up">Create your own backend</a></p>
</div>

CSS

</style> <!-- remove this, it is just for jsfiddle --> 
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> 
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> 
<style>
.grid {
  width: 500px;
  height: 250px;
}
.text-warning {
  color: #8a6d3b; 
}

JavaScript

var app = angular.module('uigrid', ['ngTouch', 'ui.grid', 'ui.grid.edit']);

app.controller('MainCtrl', ['ProductsService', '$scope', function (ProductsService, $scope) {
    $scope.sort = [];
    $scope.filter = [];
    $scope.pagination = {
        pageSize: 5,
        pageNumber: 1,
        totalItems: null,
        getTotalPages: function () {
            return Math.ceil(this.totalItems / this.pageSize);
        },
        nextPage: function () {
            if (this.pageNumber < this.getTotalPages()) {
                this.pageNumber++;
                $scope.load();
            }
        },
        previousPage: function () {
            if (this.pageNumber > 1) {
                this.pageNumber--;
                $scope.load();
            }
        }
    };
    
    $scope.gridOptions = {
        excludeProperties: '__metadata',
        enablePaginationControls: false,
        useExternalSorting: true,
        useExternalFiltering: true,
        enableFiltering: true,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            
            //declare the events
			$scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
                $scope.sort = [];
                angular.forEach(sortColumns, function (sortColumn) {
                    $scope.sort.push({
                        fieldName: sortColumn.name,
                        order: sortColumn.sort.direction
                    });
                });
                $scope.load();
            });

            $scope.gridApi.core.on.filterChanged($scope, function () {
                $scope.filter = [];

                var grid = this.grid;
                angular.forEach(grid.columns, function (column) {
                    var fieldName = column.field;
                    var value = column.filters[0].term;
                    var operator = "contains";
                    if (value) {
                        if (fieldName == "id") operator =...