A little custom crud for ui-grid with angular.js

ui-grid-directive-actions.js

angular.module('App').directive("actionButton", ['$compile', function ($compile) {

    function addButton(scope, element, attrs) {

        var id = element.attr('id');

        var button = '<div class="ui-grid-footer-action">' +
                        '<button type="button" class="btn btn-danger btn-sm" ng-click="{scope}.Crud.deleteBatch()">' +
                            '<span class="glyphicon glyphicon-trash"></span> Remover</button>' +
                        '<button type="button" class="btn btn-success btn-sm" ng-click="{scope}.Crud.insert()">' +
                            '<span class="glyphicon glyphicon-plus"></span> Adicionar' +
                        '</button>' +
                        '</div>';

        button = angular.element(button.replace(/{scope}/g, id));

        var linkFn = $compile(button);

        var newElement = linkFn(scope);

        element.after(newElement);
                        
    }

    return {
        link: addButton
    }
}]);

ui-grid.crud.js

angular.module('App').factory('GridView', ['$interval', '$compile', function ($interval, $compile) {

    var App = function () {

        var root = this;

        //default options for create ui-grid
        var defaultOptions = {
            enableSorting: true,
            enableRowHeaderSelection: true,
            enableRowSelection: false,
            enableSelectAll: true,
            showGridFooter: false,
            multiSelect: true,
            showGridFooter: false,
            rowEditWaitInterval: -1
        }

        var cellTemplate = {
            default: '<div ng-class="{\'deleted\': row.entity.deleted}" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div>',
            trash: '<button type="button" class="btn btn-sm btn-danger" ng-click="grid.appScope.{id}.Crud.delete([row.entity])"><span class="glyphicon glyphicon-trash"></span></button>'
        }        

        //the id of grid view into page
        var gridId;

        //The variable in the scope of application and the id of dom element
        var gridIdScope;

        this.gridApi = {};
        this.grid = {};
        this.Crud = { delete: {}, deleteBatch: {}, insert: {} };

        this.build = function (scope, elementId, options, callback) {

            if (elementId.indexOf("uiGrid") != 0)
                throw "The grid id must be the start with 'uiGrid', example: 'uiGridMyScope'";

            if (scope[elementId.replace('uiGrid','')] == undefined)
                throw "The variable into angular scope must be {name}".replace("{name}", elementId.replace('uiGrid', ''));

            gridIdScope = elementId.replace('uiGrid', '') ;
            gridIdElement = elementId;

            //merge options, but user options have priority
            Object.assign(defaultOptions, options);

            if (options.columnDefs != undefined) {
                var count = 0;
                options.columnDefs.forEach(function (item) {

                    if (item.enableCellEdit == undefined)
                        item.enableCellEdit = true;

                    if (item.cellTemplate == undefined)
                        item.cellTemplate = cellTemplate.default;

                    if (item.enableCellEditOnFocus == undefined)
                        //only the first cell is enable for cell edit on focus
                        item.enableCellEditOnFocus = (count == 0);
                });

                options.columnDefs.push({
                    enableColumnMenu: false,
                    enableHiding: false,
                    enableSorting: false,
                    name: ' ',
                    cellEditableCondition: false,
                    enableCellEdit: false,
                    cellTemplate: cellTemplate.trash.replace('{id}', gridIdScope),
                    width: 70,
                    cellClass: 'ui-grid-action'
                });

                if (options.columnTrash != undefined && options.columnTrash == false) {
                    options.columnDefs.pop();
                }
                
            }            

            scope[gridIdElement] = defaultOptions;

            scope[gridIdElement].onRegisterApi = function (gridApi) {
                this.gridApi = gridApi;
                this.gridApi.rowEdit.on.saveRow(scope, callback);

            }.bind(this);

            this.grid = scope[gridIdElement];

            return this;
        }

        this.Crud.deleteBatch = function () {

            this.Crud.delete(this.gridApi.selection.getSelectedRows());

        }.bind(this);

        this.Crud.delete = function (itens) {
                
            itens.forEach(function (item) {

                //adiciona 'deleted' para cada item
                if (item.deleted == undefined) {
                    item.deleted = true;
                }
                else if (item.deleted == true) {
                    item.deleted = false;
                }
                else if (item.deleted == false) {
                    item.deleted = true;
                }

                //adiciona e remove o item como excluído ao executar o metódo para salvar
                if (item.deleted) {
                    this.gridApi.rowEdit.setRowsDirty([item]);
                }
                else {
                    this.gridApi.rowEdit.setRowsClean([item]);
                }

            }, this);
            
        }.bind(this);

        var scrollTo = function (rowIndex, colIndex) {

            this.gridApi.core.scrollTo(this.grid.data[rowIndex], this.grid.columnDefs[colIndex]);

        }.bind(this);

        this.Crud.insert = function () {
            
            this.grid.data.push({new: true});
            var that = this;

            setTimeout(function () {

                var last = that.grid.data.length - 1;
                that.gridApi.rowEdit.setRowsDirty([that.grid.data[last]]);
                scrollTo(last, 0);
                $("#{} .ui-grid-row:last-child .ui-grid-cell".replace("{}", gridIdScope)).eq(1).find('div').click();

            }, 0)

        }.bind(this);
      
    }

    return App;

}]);