CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
T. Holland
T. Holland

Reputation: 89

How to get angular ui-grid remaining columns to resize after one column width is resized manually?

After resizing a coulmn to be smaller I want the remaining columns to adjust their width to take up the entire space of the grid. There should never be any white space. How do I achieve this behavior?

The behavior I want is on this demo from ui-grid: http://ui-grid.info/docs/#/api/ui.grid.resizeColumns.directive:uiGridColumnResizer

Currently when I resize a column all columns maintain their size and the right side of the grid has white space.

Upvotes: 3

Views: 10062

Answers (1)

Kathir
Kathir

Reputation: 6196

This could be because you are setting a width on each of the columns in your columnDefs. 

var app = angular.module('app', ['ui.grid', 'ui.grid.resizeColumns']);

app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.gridOpts = {
    enableColumnResizing: true,
    columnDefs : [
       {displayName:"Name",field:"name",width:200},
       {displayName:"Gender",field:"gender",width:200},
       {displayName:"Company",field:"company",width:200}
      ],
    data: [
      { "name": "Ethel Price", "gender": "female", "company": "Enersol" },
      { "name": "Claudine Neal", "gender": "female", "company": "Sealoud" },
      { "name": "Beryl Rice", "gender": "female", "company": "Velity" },
      { "name": "Wilder Gonzales", "gender": "male", "company": "Geekko" }
    ]
  };
}]);

From the same example if you remove the width from the last column it provides a decent behavior. But if you resize the last column then you will still get the white space.

Upvotes: 4

Related Questions