ng-grid auto sizing columns width

Question

I am using AngularJS ng-grid and trying to make it 1. Auto-size column width based on the column content 2. When less columns are displayed, to make last column width auto-size to fill the empty area (For example say I have 8 columns each with width : 100 and the whole ng-grid width is 800...then if I hide 4 columns, then last column width should automatically be equal to 500).

So far I have the following code for task 1 above but unfortunately it is not working (columns are not auto-sized based on column content). So I was wondering if anyone can please help by telling me what I am missing here, and how I can do task 2. Thanks

var app = angular.module('myNGridApp', ['ngGrid']);

app.controller('myNGCtrl', function($scope) {
    $scope.myData = [{id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"},
                     {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"},
                     {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"},
                     {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text ", datecreated: "02/04/2014"},
                     {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"}];

   $scope.columnDefs= [{ field: 'id', displayName: 'ID', resizable: true, minWidth: 100, width: 'auto' },
                         { field: 'di', displayName: 'DI', resizable: true, minWidth: 100, width: 'auto' },
                         { field: 'taskstatus', displayName: 'Task Status', resizable: true, minWidth: 200, width: 'auto' },
                         { field: 'notes', displayName: 'Notes', resizable: true, minWidth: 400, width: 'auto' },
                         { field: 'datecreated', displayName: 'Date Created', resizable: true, minWidth: 200, width: 'auto' }];

      $scope.gridOptions = { 
        data: 'myData',
        columnDefs: 'columnDefs',
        footerVisible: true,
        enableColumnResize: true,
        filterOptions: {filterText: '', useExternalFilter: false},
        showColumnMenu: true,
        showFilter: true,
        plugins: [new ngGridFlexibleHeightPlugin()],
        virtualizationThreshold: 10,
    };

});

@link64 yes and it gets worse! The columns shrink so much to the extend that it is hard to read the content — MKM
This may be helpful: stackoverflow.com/questions/17174096/… — brimble2010

JamieS JamieS · Accepted Answer · 2015-09-16T10:14:34

I was struggling with this same issue, and I've solved in a way which worked for my requirements, hope it can help someone else!

Basically I pass in the first row of data, along with an optional object containing friendly column names. Any names not in here, or if the object is not passed at all, will have camelCase split, underscores and hyphens changed for spaces, and first letter capitalised.

Column width calculation is based on a monospaced font (I used Lucida Console), and the longest of the column name, or the datum, will be used to calculate the width.

if(!datum || datum.toString().length < displayName.length)
  result.width = displayName.length * 7.5;
else
  result.width = datum.toString().length * 7.5;

if(result.width < 40)
  result.width = 40;

See the Plunker: http://plnkr.co/edit/9SIF0wFYBTW9m5oaXXLb?p=info

ng-grid auto sizing columns width

1 Answers