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.


First check your enableColumnResizing to be enabled.

enableColumnResizing: true

Then you might want to use a watcher like this:

    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) {

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>

Need Your Help

Keylogger or Knowing the mostly pressed button in Android app (Eclipse)

android eclipse

I want to develop an Android app in which I have key log press. In layman language, I want to keep track of the all the Buttons that I have pressed on my Android App so that I can make FAVORITE col...