dustyjuicebox dustyjuicebox - 1 year ago 211
AngularJS Question

ui-grid is blank when opening a bootstrap accordion a few seconds after the page loads?

So I'm currently attempting to dynamically create accordions which expand to a ui-grid containing some data. The issue is that if I do not expand the accordions within a few seconds of the page loading the ui-grid is blank. The outline of where the table should be exists but there is no data being displayed. I say being displayed because the data itself is in the html. It seems like its hidden by the accordion? When I resize the browser window the data appears though. Sorry if this is not detailed enough or I missed obvious debugging steps, I'm new to js/angular and to html. Below is my HTML code

<div ng-controller="TestController as test">
<script type="text/ng-template" id="group-template.html">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
<uib-accordion close-others="oneAtATime">
<div ng-repeat="model in myData" track by $index>
<div uib-accordion-group class="panel-default" is-open="isOpen">
Test Model {{$index}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
<div id="grid[$index]" ui-grid="gridOptions[$index]" ui-grid-edit class="grid" style="clear:both"></div>
<br />
<strong>Last Cell Edited:</strong>{{msg[$index]}}<br />
<button>Commit Changes</button>

and my angular

(function () {
var app = angular
.module('testApp', ['ui.grid', 'ui.grid.edit', 'ui.bootstrap', 'ngAnimate'])
.controller('TestController', TestController);

TestController.$inject = ['$scope', 'uiGridConstants'];

function TestController ($scope, uiGridConstants) {
$scope.oneAtATime = false;
$scope.myData = myData;
$scope.msg = [];
$scope.gridOptions = [];
$scope.getGridOptions = function (index) {
$scope.gridOptions[index] ={
showColumnFooter: true,
columnDefs: [
{ field: 'ticker', enableCellEdit: false, width: '33%' },
{ field: 'current_w', aggregationType: uiGridConstants.aggregationTypes.sum, enableCellEdit: false, width: '33%' },
{ field: 'new_w', aggregationType: uiGridConstants.aggregationTypes.sum, width: '33%' }
data: myData[index],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
$scope.msg[index] = 'Edited Ticker:' + rowEntity.ticker + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue;
for (i = 0; i < Object.keys($scope.myData).length; i++) {

var myData = [
[{ ticker: 'TICKER', current_w: 5, new_w: 4, },
{ ticker: 'TICKER 2', current_w: 3, new_w: 2, },
{ ticker: 'TICKER 3', current_w: 7, new_w: 0, }],

[{ ticker: 'TICKER', current_w: 5, new_w: 4, },
{ ticker: 'TICKER 2', current_w: 3, new_w: 2, },
{ ticker: 'TICKER 3', current_w: 7, new_w: 5, }]


Answer Source

I would take a stab at this and say that you may want to add a ng-if="isOpen" to the ui-grid. So something like below should fix your problem.

 <div id="grid[$index]" ui-grid="gridOptions[$index]" ui-grid-edit class="grid" style="clear:both" ng-if="isOpen"></div>

I was having issues with my grid displaying as well, and ensuring that the grid only appears when it is absolutely ready fixed the problem. The ui-grid documentation goes over this concept of a hidden grid at http://ui-grid.info/docs/#/tutorial/108_hidden_grids. They also have a plnkr that you can follow at http://plnkr.co/edit/LtpFnDUTofuxitb4Vh9x?p=preview. I hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download