Angular Grid ag-grid columnDefs Dynamically change

问题

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 retrive 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?

回答1:

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.

回答2:

I think this has been fixed already.

I am able to do something like this now with latest angular and ag-grid. Please note I am using ngxs here, however this still indicates the ability to get the column definitions async as I am getting the column defs based on the property names of the data that is being returned from the back-end in this case rowData.

Firstly, I am fetching the row data from the back-end API. Then when it is fetched I perform operations in the Select for column that map the headers from returned data to properties.

The data will not be displayed without headers, as soon as the headers are there it will redraw the grid with all the column definitions and data.

<ag-grid-angular 
    style="width: 100%; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData$ | async" 
    [columnDefs]="columnsDefs$ | async"
    >
</ag-grid-angular>


export class AgGridComponent {
    @Select(MyState.getColumnDefs) public columnsDefs$!: Observable<ReadonlyArray<any>>;

    @Select(MyState.getRowData) public rowData$!: Observable<ReadonlyArray<any>>;
}

来源：https://stackoverflow.com/questions/31743534/angular-grid-ag-grid-columndefs-dynamically-change

标签

angularjs

ag-grid