CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
Aravinder
Aravinder

Reputation: 503

Detect column resize event in angular ui-grid

I need to do some operation after re-sizing the column in ui-grid. I didn't find any column re-size event in ui-grid. Please provide a way to detect column re-size event in ui-grid.

Upvotes: 2

Views: 3389

Answers (1)

oleh.meleshko
oleh.meleshko

Reputation: 4795

First check your enableColumnResizing to be enabled.

enableColumnResizing: true

Then you might want to use a watcher like this:

$scope.$watch('gridOptions.$gridScope.isColumnResizing', 
    function (newValue, oldValue) {        
        // do something here        
    });

Would be a good way to create a dedicated plugin for that purpose and plug it as a custom plugin then to your grid.

UPDATE: If above snippet isn't working:

I just found in their source code following part:

var publicApi = {
  events: {
    /**
     * @ngdoc event
     * @name columnSizeChanged
     * @eventOf  ui.grid.resizeColumns.api:PublicApi
     * @description raised when column is resized
     * <pre>
     *      gridApi.colResizable.on.columnSizeChanged(scope,function(colDef, deltaChange){})
     * </pre>
     * @param {object} colDef the column that was resized
     * @param {integer} delta of the column size change
     */
    colResizable: {
      columnSizeChanged: function (colDef, deltaChange) {
      }
    }
  }
};
grid.api.registerEventsFromObject(publicApi.events);

So, in your grid options object it'd be:

$scope.gridOptions = {
   enableColumnResizing: true,
   ...,
   onRegisterApi : function(gridApi) {            
     $scope.gridApi = gridApi; 
     $scope.gridApi.colResizable.on.columnSizeChanged($scope, function(colDef, deltaChange) {
       console.log('resized #############'); 
     });            
   }
};

And finally in html:

<div ui-grid="gridOptions" ...></div>

Upvotes: 2

Related Questions