CODEWITHSUNDEEP
javascriptangularjsag-grid
bhuvanesh G
bhuvanesh G

Reputation: 61

ag-grid - undefined of setRowData in angular 1.x

I am not able to update the ag-gird girdOptions columnDefs by accessing the $scope.girdOptions.api.setColumnDefs.

Plunkr code is here

What I am trying to achieve is group by the table with a different value.

    var masterColumnDefs = [
    {headerName: 'Name', field: 'name',
        // left column is going to act as group column, with the expand / contract controls
        cellRenderer: 'group',
        // we don't want the child count - it would be one each time anyway as each parent
        // not has exactly one child node
        cellRendererParams: { suppressCount: true }
    },
    {headerName: 'Account', field: 'account'},
    {headerName: 'Calls', field: 'totalCalls'},
    {headerName: 'Minutes', field: 'totalMinutes', cellFormatter: minuteCellFormatter}
];

The cellRenderer: 'group' code is something they have inbuilt for handling the grouping so this example contains rendering a grid inside the row when expanded.

Though they have feasibility for doing the group by dynamically with the pivot menu options, I have a requirement for rendering a grid inside the row so the JSON I am getting in the response is similar to the rowData in the Plunkr.

Hence, I can not have the pivot option for grouping dynamically.

The issue that I am trying to solve here is to update the above masterColumnDefs by modifying it 

` masterColumnDefs = [
    {headerName: 'Name', field: 'name'
    },
    {headerName: 'Account', field: 'account',
        // left column is going to act as group column, with the expand / contract controls
        cellRenderer: 'group',
        // we don't want the child count - it would be one each time anyway as each parent
        // not has exactly one child node
        cellRendererParams: { suppressCount: true }},
    {headerName: 'Calls', field: 'totalCalls'},
    {headerName: 'Minutes', field: 'totalMinutes', cellFormatter: minuteCellFormatter}
];`

and update the gridOptions with

$scope.gridOptions.api.setColumnDefs(masterColumnDefs);

Nothing helps me out.

May be some other solution could also do that functionality but I am not getting it.

Points to note:

  1. I have a response similar to mock JSON in plunkr like and array inside JSON and modified by function later.
  2. I need to render a grid when I extend the group.
  3. I need to group by another value either by pivot enterprise facility or a button to update the columnDefs by accessing the api like the way in plunkr.

Any ideas would be a great help.

Upvotes: 1

Views: 850

Answers (1)

bhuvanesh G
bhuvanesh G

Reputation: 61

This was quite tricky when you are using a javascript lib for you angular app.

I was able to get it done by calling the api inside a timeout function.

$timeout(function(){
    $scope.gridOptions.api.setColumnDefs(masterColumnDefs);
}, 0);

Where as if you print the $scope.gridOptions above the $scope.gridOptions.api.setColumnDefs(masterColumnDefs); without the timeout function note that the object does not have api or columnApi keys.

But when you wrap the

$scope.gridOptions.api.setColumnDefs(masterColumnDefs);

with a timeout function then in the console, you can see the object with api and columnApi so now it will update the gridOptions with the values that you have.

This has not been explained or documented anywhere in the ag-grid website as far as I have analyzed it.

Hope this helps!

Upvotes: 2

Related Questions