javascript - ng-grid auto sizing columns width - Stack Overflow

admin管理员组

文章数量:1391987

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,
    };

});

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,
    };

});

• javascript
• angularjs

Share Follow asked Mar 4, 2014 at 1:58 Mahmoud MetwallyMahmoud Metwally 99011 gold badge1010 silver badges2424 bronze badges 3

• Have you tried not specifying any width properties? – link64 Commented Mar 4, 2014 at 4:23
• @link64 yes and it gets worse! The columns shrink so much to the extend that it is hard to read the content – Mahmoud Metwally Commented Mar 4, 2014 at 8:34
• This may be helpful: stackoverflow./questions/17174096/… – brimble2010 Commented Jul 23, 2014 at 15:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： javascriptnggrid auto sizing columns widthStack Overflow