Reputation: 40185
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
Upvotes: 0
Views: 1300
Reputation: 40185
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 :-)
Upvotes: 0
Reputation: 1176
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);
}
};
Upvotes: 1