UI Grid AngularJS - How to update the column headers in ui-grid?

Question

I'm working on a data driven application where the columns(table headers) are dynamically updated based on the user click. I'm loading the data from a JSON File.

It works when I use a normal table with ng-repeat="heading in gridHeaders">{{ heading }}, but when I include ui-grid and the view is updated with a different set of data, the grid cells becomes empty and the columns headers remain static. How can I update my column definition in ui-grid?

Here is the JSFiddle http://jsfiddle.net/masoom/svcxh6hu/7/

controllers.js

$scope.gridOptions = {
    data: 'grid',
   columnDefs : '' /* not sure how to use the <ng-repeat="heading in gridHeaders"> {{ heading}} here*/
};

 /* 
 Watch for the change in the Tree's current node. 
 When user clicks on a node, $scope.currentNode will update
 */
$scope.$watch(function () {
    return $scope.currentNode;
}, function () {
    $scope.displayGrid(angular.fromJson($scope.currentNode.json));
});

/*
Sets the Grid's data model. The view will update when this is called.
*/
$scope.displayGrid = function (data) {
    $scope.grid = data;
    $scope.gridHeaders = new Array();
    if (typeof data != 'undefined') {
        for (var key in data[0]) {
            $scope.gridHeaders.push(key);
        }
    }
}

index.html

<table ui-grid="{ data: grid }" class="grid1" ng-show="gridHeaders.length>0" >

                <thead>
                    <tr>
                       <th ng-repeat="heading in gridHeaders">{{ heading }}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="obj in grid">
                    <td ng-repeat="heading in gridHeaders">{{ obj[heading]      }}</td>
                    </tr>
                </tbody>
        </table>
 <div ui-grid="gridOptions" class="grid1" ng-show="gridHeaders.length>0" >    
          </div>

@Alon I'm using the UI Grid ! Here is the fiddle jsfiddle.net/masoom/svcxh6hu/7 — StarJedi
– StarJedi, Commented Mar 21, 2015 at 16:55
It looks like you're replacing ALL the columns and data in the ui-grid. You might just be better off having multiple ui-grids, and using ng-if to determine which one displays. — Mordred
– Mordred, Commented Mar 23, 2015 at 17:44

Prathyusha · Accepted Answer · 2015-03-20 12:27:21Z

1

$scope.gridHeaders1 =  [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}];            
 $scope.gridHeaders2 =  [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}, {field:'occupation', displayName:'Occupation'}];  
$scope.gridOptions = { 
    data: 'myData',
    columnDefs: 'gridHeaders1'
};

answered Mar 20, 2015 at 12:27

Prathyusha

214 bronze badges

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

1 Comment

StarJedi Over a year ago

This solution does not work. Because I don't want the headers to be hard-coded. Here is the JSFiddle jsfiddle.net/masoom/svcxh6hu/7

Community · Accepted Answer · 2017-05-23 12:14:50Z

0

This question shows that altering the gridOptions.columnDefs will update the columns in the grid, but that assigning a new object or array to columnDefs will not affect because then you'll lose the reference to the object in the api. How to update the columnDef of an angular ui-grid column dynamically

I haven't found any refresh that would help, but using this method you don't need to call refresh().

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 26, 2016 at 22:10

Gary

3,3142 gold badges30 silver badges31 bronze badges

Collectives™ on Stack Overflow

UI Grid AngularJS - How to update the column headers in ui-grid?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related