AngularJS - ng-grid数据不会显示在列大小调整上

Question

I'm facing an issue where ng-grid data does not display on column resizing, when column names change.

Created a plunkr at - http://plnkr.co/edit/eV9baoDOV9A46FZmKW8G?p=preview

Please note the below function in main.js to explicitly change the column names and corresponding data.

$scope.reload = function(){
  $scope.columnDefinitions = [
      {field: 'first_col'},
      {field: 'second_col'}
    ];

  $scope.myData = [{first_col: "colData1", second_col: "colData2"},
                  {first_col: "colData3", second_col: "colData4"},
                  {first_col: "colData5", second_col: "colData6"}
                ];  
}

Steps -

Scenario 1 (works) .

1. Once the example fully loads including data from ng-grid, click on the "change" button.
2. With that, the "name" and "age" columns will change to "first_col" and "second_col" along with corresponding data.

Scenario 2 (doesn't work)

1. Rerun the example.
2. Once the example fully loads including data from ng-grid, resize the columns a bit.
3. After resizing, click the "change" button.
4. The grid now shows up as empty.

Really stuck with this issue. Any help will be much appreciated.

Answer 1

It seems the width of the column is not getting picked up when you press change. If you manually define it , it will work :

{field: 'first_col', width: 200},
{field: 'second_col', width: 200}

From the ng-grid documentation :

Width can also be defined in percentages (20%, 30%), in weighted *s, or "auto" (which sizes the column based on data length) (much like WPF/Silverlight)/ note: "auto" only works in single page apps currently because the re-size happens on "document.ready". Still working on improving that .

So I'm guessing it's defaulting on "auto" and that's why it's not working. If you try putting "auto" (or anything %-based) as width, you'll also get the error. I suggest you use a workaround in the meantime.