0

I have multiple tabs and each is having angular ui-grid inside it. Each grid should display different data. But i'm facing problem like in one tab data is coming in the grid on page load but in another tab ui-grid itself is not loading. Not getting what is the problem. Please help. Below is the sample of the code:

<uib-tabset class="nav">
<uib-tab heading="User">
<div ng-include="'./public/partials/tabs/user.html'">
</div>
</uib-tab>

<uib-tab heading="Notes">       
<div ng-include="'./public/partials/tabs/notifications.html'">
</div>
</uib-tab>

<uib-tab heading="Assets">
<div ng-include="'./public/partials/tabs/assetsList.html'"></div>
</uib-tab>
<uib-tab heading="Audit Logs">
<div ng-include="'./public/partials/tabs/audit.html'" >
</div>
</uib-tab>
</uib-tabset>

Html for tabs:

<div class="container-fluid">
<form name="assetsForm" novalidate class="form-horizontal">
<div class='container-fluid containerborder'>
<br>
<!--creating table-->
<div data-ui-grid="assetsOptions" data-ui-grid-pagination></div>
</div> 
</form>
</div>

<div class="container-fluid">
<form name="userForm" novalidate class="form-horizontal">
<div class='container-fluid containerborder'>
<br>
<!--creating table-->
<div data-ui-grid="userOptions" data-ui-grid-pagination></div>
</div> 
</form>
</div>

Controller part:

$scope.data = [
  { name: 'Alex', car: 'Toyota' },
  { name: 'Sam', car: 'Lexus' },
  { name: 'Joe', car: 'Dodge' },
  { name: 'Bob', car: 'Buick' },
  { name: 'Cindy', car: 'Ford' },
   ];

$scope.userOptions = {
  data: 'data',
  paginationPageSizes: [5, 10, 25],
  paginationPageSize: 5,
  columnDefs: [
   {name: 'name'},
   {name: 'car'}
     ]
    };

$scope.assetsData = [
     { table: 'Brian', class: 'Audi' },
     { table: 'Malcom', class: 'Mercedes Benz' },
     { table: 'Dave', class: 'Ford' },
     { table: 'Stacey', class: 'Audi' },
     { table: 'Amy', class: 'Acura' },
     { table: 'Scott', class: 'Toyota' },
     { table: 'Ryan', class: 'BMW' },
   ];

   $scope.assetsOptions = {
     data: 'data',
     paginationPageSizes: [5, 10, 25],
     paginationPageSize: 5,
     columnDefs: [
       {name: 'table'},
       {name: 'class'}
     ]
    };
Kirti
  • 89
  • 1
  • 3
  • 14

1 Answers1

0

If one grid is loading on page load and others are not, it basically means A) other tabs are not initialized on page load B) grid initializing code should be in tab switch instead of page load C) file or data is not available at specified location.

I hope this will help.

Syed Rafey Husain
  • 1
  • 1
  • On page load only one tab will be loaded. When I'm navigating to another tab i'm not able to see the grid. Please suggest something. – Kirti Dec 05 '15 at 06:07
  • can you suggest anything on this @Syed? – Kirti Dec 07 '15 at 04:37
  • @Kirti, could you trying putting JS code in a function and thencalling it on page load as well as on tab switch. If grid appears then you have to call this code on tab switch beside page load. If grid still does not appear then either you have not placed grid on that tab or the tab itself is hiding/overlapping grid UI. Try inspecting HTML and see if grid actually is there. Try z-index to bring in front. – Syed Rafey Husain Dec 10 '15 at 05:47