Grid not loading data in angular bootstrap modal popup window.

[natarajanmca11]

Grid not loading data in ui but total count is showing correctly. Grid looking like below.
I have tried $timeout(function () { ...}, 1000) and $scope.$apply() everything. But no luck.

it is loading properly after Ctrl + scroll action.

Note. I am trying to load this grid inside angular bootstrap Model.
https://angular-ui.github.io/bootstrap/#/modal

[PaulL1]

Could you provide a plunker? It is logically something different in your code, since this works in the tutorials, but without seeing that code running it's hard to provide input.

[natarajanmca11]

Plunker is not working in my machine.. I am working in jsbin. Let you know the url soon...
Sorry for late reply.

[natarajanmca11]

Hi Paul,
I got the solution for this problem.
enableRowHeaderSelection was false. Thats why it was not showing in model popup. I don't know the relationship b/w model popup and this field. other place are working fine without any issue.

I missed attribute on top in index.html file. thats why i got more space to grid header. Now I fixed that problem also.
Plunker did not work in my machine. anyway, i am fine with this solution.
Thanks for your support.

[natarajanmca11]

I have given the width like number , percentage, and '*' for auto (as follows.) . In normal screen it shows properly. but in bootstrap modal, initial load its look like shrinked. after Ctrl + scroll, its realigned automatically.

columnDefs: [
{ name: 'id', width: '50' },
{ name: 'name', width: '20%' },
{ name: 'age', displayName: 'Age (no focus)', allowCellFocus: false, width: '100' },
{ name: 'address.city', width: '150' },
{ name: 'phone', width: '15%' },
{ name: 'company', width: '100' },
{ name: 'email', width: '150' },
{ name: 'balance', width: '100' },
{ name: 'guid', width: '*' }
]

[PaulL1]

Bootstrap modal runs an animation on render, and so the point the grid is rendering the modal is not yet full size. The modal tutorial shows how to use handleWindowResize from a $timeout to deal with this.

[natarajanmca11]

Hi Paul,
Yes. This issue is fixed.
Just called the following method. :)
$scope.gridApi.grid.handleWindowResize().

Thank you Paul.

[sanjayon19]

I'm still facing this technical challenge. We have a modal which has UI grid in it. On click of a button we are trying to load the data for Grid. Ajax request is successful, but data is not being displayed on Grid. Only on CTRL+SCROLL or on resize of browser data appears on the Grid. Any suggestion plz?

[sanjayon19]

Finally.... Adding 'ui.grid.autoResize' in the angular.module(...) solved this challenge for me.
Thank you :)