AngularJS - ng-grid data does not display on column resizing

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).

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

Scenario 2 (doesn't work)

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

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

Saw the issue before, cannot reproduce it anymore for some reason. I also tried on JSBin, and it just works for me now. Did you have the issue locally or was it on plunkr only ? — Goodzilla
– Goodzilla, Commented Jul 26, 2014 at 13:51
I have this issue locally as well. Been struggling with it for a while now. I'm using "ng-grid-2.0.11.min.js". Is this different from what you have? — pkshenvi
– pkshenvi, Commented Jul 26, 2014 at 16:45
Nvm, I thought you meant ticking off a column by resizing (that was also triggering a similar issue for me, earlier). I do get the error too. — Goodzilla
– Goodzilla, Commented Jul 26, 2014 at 18:28
NP. Thanks for letting me know. BTW, do you know if there is any way I can reinitialize ng-grid on demand (in my case if the column names change)? — pkshenvi
– pkshenvi, Commented Jul 26, 2014 at 18:35

Goodzilla · Accepted Answer · 2014-07-26 19:25:56Z

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.

edited Jul 26, 2014 at 19:25

answered Jul 26, 2014 at 18:50

Goodzilla

1,48311 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Goodzilla Over a year ago

You may have another problem with the sorting btw. If you try sorting before changing, you'll see some fun results.

Collectives™ on Stack Overflow

AngularJS - ng-grid data does not display on column resizing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related