Add multiple ui-grids using ng-include

Question

I have multiple tabs on a page for different statuses. Each tab is having its own ui-grid and it is included by ng-include. The sample code is given below.

 <tab heading="@L("Incomplete")">
        <div ng-include="'~/App/common/views/incentives/incomplete.cshtml'"></div>
    </tab>

    <tab heading="@L("PendingApproval")">
        <div ng-include="'~/App/common/views/incentives/pendingApproval.cshtml'"></div>
    </tab>

    <tab heading="@L("AwaitingTracker")">
        <div ng-include="'~/App/common/views/incentives/awaitingtracker.cshtml'"></div>
    </tab>

    <tab heading="@L("DistributedToSales")">
        <div ng-include="'~/App/common/views/incentives/distributed2sales.cshtml'"></div>
    </tab>

I would like to achieve the below functionality.

Each tab will load the data when we will focus on it.
As now it all the tabs are loading data at a same time but all ui-grids are not loading the data. Only first grid loads the data. refer this video http://screencast.com/t/HM0cfjOgCK

Community · Accepted Answer · 2017-05-23 10:28:05Z

0

You can try to reload tabs content on select:

<tab heading="@L("AwaitingTracker")" select="reload()">
        <div ng-include="'~/App/common/views/incentives/awaitingtracker.cshtml'"></div>
    </tab>

<script>

function reload(){
 if($scope.tabs[tabIndex].isLoaded){
      return
    }
    /* or make request for data , delayed to show Loading... vs cache */
    $timeout(function(){
        var jsonFile='data'+(tabIndex +1)+'.json'
        $http.get(jsonFile).then(function(res){
            $scope.tabs[tabIndex].content=res.data;
            $scope.tabs[tabIndex].isLoaded=true;
        });

    }, 2000)
}

</script>

i havent check that this reload() method is working, but i have same problem with slider in tab. With refreshing slider using timeout it shows init values correclty. Check this reload for tabs: tabs with angular: loading tab content on click only with $http

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Feb 26, 2016 at 14:53

alexey

8011 gold badge8 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Add multiple ui-grids using ng-include

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related