Angular Grid ag-grid columnDefs Dynamically change

Vaso Beruashvili picture Vaso Beruashvili · Jul 31, 2015 · Viewed 55.7k times · Source

I have a problem about columnDefs change dynamically. Here is my gridOptions:

$scope.gridOptions = {
  columnDefs: [],
  enableFilter: true,
  rowData: null,
  rowSelection: 'multiple',
  rowDeselection: true
};

And when I retrieve data from server:

$scope.customColumns = [];

$http.post('/Home/GetProducts', { tableName: 'TABLE_PRODUCT' }).success(function (data) {
    angular.forEach(data.Columns, function (c) {
        $scope.customColumns.push(
            {
                headerName: c.Name,
                field: c.Value,
                width: c.Width
            }
        );
    });

    $scope.gridOptions.columnDefs = $scope.customColumns;

    $scope.gridOptions.rowData = data.Products;
    $scope.gridOptions.api.onNewRows();
}).error(function () {

});

Note: here c is column object which comes from server.

When dynamically generating columns and assigning it to $scope.gridOptions.columnDefs there is blank grid but $scope.customColumns array is filled with right generated column objects. Please help me is this bug or I am doing something wrong?

Answer

Niall Crosby picture Niall Crosby · Aug 4, 2015

In ag-grid the columns in gridOptions are used once at grid initialisation. If you change the columns after initialisation, you must tell the grid. This is done by calling gridOptions.api.setColumnDefs()

Details of this api method are provided in the ag-grid documentation here.