CODEWITHSUNDEEP
angularjs
rpkrpk
rpkrpk

Reputation: 291

angular-js + tr-ng-grid - how to change the displayed table's schema?

I have a simple Angular-JS page that uses tr-ng-grid tag 

<div ng-controller="TableDataCtrl">
     <div id="tableview_element">
         <table tr-ng-grid="" items="data" 
                ng-show="data_available()"> 
         </table>
     </div>
     {{str_data}}
</div>

Whenever user clicks on a link, the application should display a different table. The controller is able to obtain the JSON data from the server using HTML get. 'str_data' is stringified form of the JSON data. That seems correct always.

But the tr-ng-grid does not ever update the table's schema. It seems to lock on to the very first table that is displayed with it. The whole table may be hidden or displayed using ng-show(), but then the column headings don't get modified to that of the newly loaded table.

To be very clear: Say you have two tables, birds and mammals. If the first table is a list of all birds and birds-attributes, tr-ng-grid displays the table by automatically figuring out the column headings. If the user clicks on mammals then on the page, the mammal data gets loaded, but tr-ng-grid is still looking for bird-attributes in a mammals table which has a different set of columns (and a few common columns like id and name)

How would one force tr-ng-grid to erase the current template and construct a whole new table?

One method is of course to keep every table in its own controller, and own HTML element. Is there a simpler way? or is there an alternative to tr-ng-grid that supports such a full-fledged table view refresh?

Upvotes: 0

Views: 1234

Answers (1)

Vinay K
Vinay K

Reputation: 5572

Seems like, grid headers are initialized only once.

One solution to solve your problem is to re-compile the grid whenever the data is changed.

Here is the updated plunker. http://plnkr.co/edit/34nUGmopB8q4GWQ9uF57?p=preview

Upvotes: 0

Related Questions