How to disable sorting on edit in angular ui grid

Question

I am using angular ui-grid to display tabular data.

The cell data can be edited. I noticed that if a column is sorted and then if we edit the cell, the sorting gets kicked in and moves the row. I would like to disable sorting on cell edit, is there any way to do this. I have provided plunker link below. In the plunk first sort the first column in ascending order then edit value of a2 to say x and click outside the cell, you will see that eidted row now moved to the last. I would like to prevent sorting on edit, basically its OK if we remove all the existing active column sorts on edit.

  &ltdiv id="grid1" ui-grid="gridOptions" class="grid" ui-grid-edit &gt
  &lt/div&gt

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid','ui.grid.edit',
            'ui.grid.selection',
            'ui.grid.rowEdit', 'ui.grid.cellNav']);
app.controller('MainCtrl', function($scope) {
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'A' },
      { field: 'B' },
      { field: 'C', enableSorting: false }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
    }
  };

  $scope.gridOptions.data = [{'A':'a1', 'B':'b1', 'C':'c1'}, {'A':'a3', 'B':'b3', 'C':'c3'}, {'A':'a2', 'B':'b2', 'C':'c2'}];

});

see Plunk for the behavior http://plnkr.co/edit/17H5K6nOEz9gf4Keeap9?p=preview

Answer 1

set enableSorting to false

enableSorting: false

Answer 2

From the beginEditCell callback, you can know when the user is editing. You can take the advantages of saving and restoring states of ui-grid. Save and Restore Ui-grid state From the afterCellEdit or cancelCellEdit callback, you can know when the user is done with editing,then you can restore.

Answer 3

I found a way to fix this problem by doing a simple hack.

The sorting is happening because of a call back function (registerDataChangeCallback) when there is notifyDataChange event gets fired and the processRowsCallback function is getting called and the processRowsCallback definition is as follows.

Grid.prototype.processRowsCallback = function processRowsCallback( grid ){
    grid.queueGridRefresh();
  };

Here Grid is a factory and the processRowsCallback functions is defined under the factory and its calling the grid.queueGridRefresh() and the sort is getting called and the sort happening just after the data changes in the grid.

So, I thought of overriding the prototype function processRowsCallBack by injecting the Grid factory to the factory which I have created (extendedGridFactory) and replicated the same function but having a condition checked, if the grid is not in editmode and calling grid.queueGridRefresh(); like the following.

app.factory('extendedGridFactory', ['Grid', '$rootScope', function (Grid, rootScope) {
    var extendedGrid = Object.create(Grid);
    extendedGrid.prototype.processRowsCallback = function processRowsCallback(grid) {
        if (!rootScope.isInEditMode) {
            grid.queueGridRefresh();
        }
    };
    return extendedGrid;
}]);

Great, so far its works fine.

Let me know if you people finding any problem with this code. :)