Detect column resize event in angular ui-grid

Question

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.

oleh.meleshko · Accepted Answer · 2016-03-14 11:05:27Z

2

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>

edited Mar 14, 2016 at 11:05

answered Mar 14, 2016 at 9:44

oleh.meleshko

4,8052 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aravinder Over a year ago

Its not working. $watch is not calling when I resizing the columns in the grid.

oleh.meleshko Over a year ago

@Aravinder did you check you have gridOptions field in your $scope with all other options defined for your grid?

Aravinder Over a year ago

In gridOptions, $gridScope variable is not there. How do I put $gridScope in to gridOptions

Aravinder Over a year ago

Thank you Meleshko. It worked with minor changes. Please update your answer with below code.$scope.gridOptions.onRegisterApi = function( gridApi ) { $scope.gridApi = gridApi; $scope.gridApi.colResizable.on.columnSizeChanged( $scope, function(colDef, deltaChange) { console.log('resized #############'); }); };

Homer Over a year ago

I needed to know the new column width. The event doesn't give you that, so to get the new width I did this (in TypeScript):

gridApi.colResizable.on.columnSizeChanged(this.$scope, (colDef, deltaChange) => { 	var column = gridApi.grid.columns.filter(x => x.name == colDef.name)[0]; 	if (column) { 		console.log(``${colDef.name} resized by ${deltaChange} to ${column.width}``); 	} });

Collectives™ on Stack Overflow

Detect column resize event in angular ui-grid

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related