is there a way to auto adjust widths in ng-grid?

Question

I'm having trouble with widths of my columns. I don't know what width they will be beforehand, nor do I want to specify each column's width. Is there an attribute that I can use that auto adjusts all the column widths based on the content (including the column header)?

Epanorthosis

Answer 1

Woot! I came up with a pretty cool answer! Setting the width to "auto" was really not working for me. Maybe it is because I'm using an ng-view? Not sure. So I created 2 new functions you can put in your controller.js. Using them like this will give you computed column widths! Read the code comments; there are some caveats.

Example usage, controllers.js:

var colDefs = makeColDefs(rows[0]);
colDefs = autoColWidth(colDefs, rows[0]);

$scope.phones = rows;
$scope.gridOptions = {
    data : 'phones',
    showFilter : true,
    enableColumnResize : true,
    columnDefs : colDefs
};

The code, controllers.js:

/**
 * Create a colDefs array for use with ng-grid "gridOptions". Pass in an object
 * which is a single row of your data!
 */
function makeColDefs(row) {
    var colDefs = [];
    for ( var colName in row) {
        colDefs.push({
            'field' : colName
        });
    }
    return colDefs;
}

/**
 * Return a colDefs array for use with ng-grid "gridOptions". Work around for
 * "auto" width not working in ng-grid. colDefs array will have percentage
 * widths added. Pass in an object which is a single row of your data! This
 * function does not do typeface width! Use a fixed width font. Pass in an
 * existing colDefs array and widths will be added!
 */
function autoColWidth(colDefs, row) {
    var totalChars = 0;
    for ( var colName in row) {
        // Convert numbers to strings here so length will work.
        totalChars += (new String(row[colName])).length;
    }
    colDefs.forEach(function(colDef) {
        var numChars = (new String(row[colDef.field])).length;
        colDef.width = (numChars / totalChars * 100) + "%";
    });
    return colDefs;
}

Jasmine test, controllerSpec.js:

'use strict';

var ROW = {
    'col1' : 'a',
    'col2' : 2,
    'col3' : 'cat'
};
var COLUMN_DEF = [ {
    field : 'col1'
}, {
    field : 'col2'
}, {
    field : 'col3'
} ];
var COLUMN_DEF2 = [ {
    field : 'col1',
    width : '20%'
}, {
    field : 'col2',
    width : '20%'
}, {
    field : 'col3',
    width : '60%'
} ];

/* jasmine specs for controllers go here */

describe('controllers', function() {
    beforeEach(module('myApp.controllers'));

    it('should make an ng-grid columnDef array from a row of data.',
            function() {
                expect(makeColDefs(ROW)).toEqual(COLUMN_DEF);
            });

    it('should return an ng-grid columnDef array with widths!', function() {
        var colDefs = makeColDefs(ROW);
        expect(autoColWidth(colDefs, ROW)).toEqual(COLUMN_DEF2);
    });

});

Pinsky

Be warned that above solution makes ui-grid 3.0 (ng-grid) terribly slow and sluggish. – Cleveland

I wonder why? I did report an issue a while back for ng-grid being slow. – Pinsky

Answer 2

Use ui-grid, is must better: http://ui-grid.info/docs/#/tutorial/204_column_resizing

but https://github.com/angular-ui/ng-grid/wiki/Configuration-Options

Devilish

Answer 3

This works:

$scope.gridOptions = {
                init: function (gridCtrl, gridScope) {
                    gridScope.$on('ngGridEventData', function () {
                        $timeout(function () {
                            angular.forEach(gridScope.columns, function (col) {
                                gridCtrl.resizeOnData(col);
                            });
                        });
                    });
                },
                data: 'scopeDataField',
                columnDefs: [
                    {
                        field: 'property1',
                        displayName: 'property1title',
                        width: '100px' // a random fixed size, doesn't work without this
                    },
                    {
                        field: 'property2',
                        displayName: 'property2title',
                        width: '100px'
                    }

                ],
                enableColumnResize : true
            };

That

Answer 4

See answer at https://mcmap.net/q/583852/-ng-grid-auto-sizing-columns-width

Column width calculated by column name or datum, whichever is longer.

Continental

Answer 5

Yes! In your columndefs you can set the width to auto and this will automatically size the columns based on the width of the data and/or header.

Reference: Defining Columns

Oarlock

This did not work. Here is a quote from the link you provide: note: "auto" only works in single page apps currently because the re-size happens on "document.ready". Still working on improving that." – Pinsky

Here's whats quirky about this. If I display all columns, it works. If I display 1 column, it only works when my grid is in a scrollable panel and it exceeds the limit. If it's under the limit and there is no scroll (minimal rows), then nothing shows up! If I put a fixed length, then it works no problem.. but becomes a huge burden if I resize my window :( – Kalahari

This auto width setting works quite horribly even in latest ui-grid. It destroys so much data. – Cleveland

Answer 6

I am using ui-grid. The following code is working for me. You can try this.

First you need to add a module dependency 'ui.grid.autoResize' in your main module.

Then add css class something like this 

.grid {
  width    : 400px !important;
  max-width : 400px !important;
  height   : 600px !important;
}

And finally add the ui-grid directive in your html file like this. Keep in mind don't forgot to add the 'ui-grid-auto-resize' in your grid directive.

<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div>

Highstepper

This controls the grid itselfs auto-resize, the OP is asking about column auto-resize – Argyll