AngularJs : using ag-grid's $scope.grid.api.setRowData() does not work

Question

So, I forked this simple ag-grid demo Plunker and the forked version is here.

The only change is that the old code statically assigned the row data for the ag-grid while my fork tries to assign i dynamically, using the API. i old:

var rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

// let the grid know which columns and what data to use
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit();
    }
};

new:

  var rowData = [
    {
      make: "Toyota",
      model: "Celica",
      price: 35000
    },
    {
      make: "Ford",
      model: "Mondeo",
      price: 32000
    },
    {
      make: "Porsche",
      model: "Boxter",
      price: 72000
    }
  ];

  $scope.grid = {
    columnDefs: columnDefs,
    rowData: [],
    rowSelection: 'single'
  };

$scope.grid.api.setRowData(rowData);

Both in my Plunker, and trying this on localhost, the ag-grid does not appear.

What am I doing wrongly?

[Update] I want to get the data from a server every time the user clicks a button, not just when the grid is ready, and assign the grid's rowData using it's api.

[Upperdate] I just noticed on localhost that although $scope.gridOptions is defined, $scope.gridOptions.api is undefined

vishnu sandhireddy · Accepted Answer · 2020-04-07 17:30:39Z

1

The $scope won't have grid.api data instantly after setting. You have to set the data in onGridReady function of the $scope.grid as shown below. https://plnkr.co/edit/qgPae2iGIl1A9i8O?preview

$scope.grid = {
  columnDefs: columnDefs,
  rowData: [],
  rowSelection: 'single',
  onGridReady: function() {
    $scope.grid.api.setRowData(rowData);
  }
};

answered Apr 7, 2020 at 17:30

vishnu sandhireddy

1,1761 gold badge7 silver badges15 bronze badges

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

1 Comment

Mawg Over a year ago

Surely that's what that grid's API setRowData() function is for (and much more flexible)? The Plunker is uper simplified, BUT, I want to get the data from a server every time the user clicks a button, not just when the grid is ready. Can you help with that? Thanks

Mawg · Accepted Answer · 2020-04-07 23:10:39Z

0

ok, I solved it. It is the difference between static & dynamic grid. See this Plunker.

Change the HTML to <div id="myGrid" class="ag-fresh" style="height: 100px;"></div> (removing the ag-grid="grid"), and then, in the controller:

var currentCandidatesGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(currentCandidatesGridDiv, $scope.grid);

$scope.grid.api.setRowData(rowData);

I was asking this to help with a previous question, and have helped myself a little - just hope that I helped someone else too :-)

answered Apr 7, 2020 at 23:10

Mawg

40.5k110 gold badges334 silver badges582 bronze badges

Collectives™ on Stack Overflow

AngularJs : using ag-grid's $scope.grid.api.setRowData() does not work

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