CODEWITHSUNDEEP
javascriptangular-ui-grid
Sitaramaiah Singamsetti
Sitaramaiah Singamsetti

Reputation: 21

How to auto resize last column in angular ui grid

I have defined column definition as below:

$scope.gridOptions = {
enableColumnResizing: true,
    columnDefs : [
        {displayName : "Name", field : "name", width : '200'}, 
        {displayName : "Gender", field : "gender" , width:'300'},
        {displayName :"Address",field:"address",width:'400'}
    ]
};

The expectation is that if I resize the columns last column should adjust to the remaining width of the grid.

Upvotes: 0

Views: 1522

Answers (1)

Sitaramaiah Singamsetti
Sitaramaiah Singamsetti

Reputation: 21

By removing last column width or setting last column width to '*' will resolve the issue.
But the whitespace problem arises if we resize the last column. 
So to avoid whitespace problem you have to approaches:
1)You have to disable resizing on the last column 

$scope.gridOptions = {
enableColumnResizing: true,
    columnDefs : [
        {displayName : "Name", field : "name", width : '200'}, 
        {displayName : "Gender", field : "gender" , width:'300'},
        {displayName :"Address",field:"address",width:'*',enableColumnResizing:false}
    ]
};

Or
2) set the width of the previous column to '*' dynamically.


$scope.gridOptions = {
enableColumnResizing: true,
    columnDefs : [
        {displayName : "Name", field : "name", width : '200'}, 
        {displayName : "Gender", field : "gender" , width:'300'},
        {displayName :"Address",field:"address",width:'*'}
    ]
};

If you want to resize the last column set the width of "gender" column to '*' using some JS snippet.

Upvotes: 0

Related Questions