i have a ag-grid working in project. but now when i ported the same to another page i got some error .. i tried to avoid the http call in between and directly tried to set the ROW Data through
$scope.gridOptions.api.setRowData(RowDatas);
but error is "TypeError: Cannot read property 'setRowData' of undefined"
So n debug i realised api is Undefined . here is my complete code . please check what i missed ..
<head>
<script src="js/angular_1_3_8.js"></script>
<script src="js/angular-filter.js"></script>
<script src="workbench/agGrid/dist/ag-grid.js?ignore=notused34"></script>
<script>
agGrid.initialiseAgGridWithAngular1(angular);
var app = angular.module("workbenchApp", ['angular.filter',"agGrid"]);
app.controller("workBenchCtrl", function ($scope, $http, $filter) {
var columnDefs = [
{headerName: "Name", field: "Name"},
{headerName: "Cr", field: "dc"},
{headerName: "Ac", field: "da"},
{headerName: "Mo", field: "dm"},
];
var RowDatas=[{"Name": "SUHDLOG.DAT", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "2002-12-27 09:51:22"},
{ "Name": "BOOTLOG.PRV", "dc": "1970-01-01 05:30:00", "da": "2005-04-01 00:00:00", "dm": "2005-04-01 15:13:30"},
{ "Name": "FRUNLOG.TXT", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "2002-12-27 09:52:56"},
{ "Name": "COMMAND.COM", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "1999-04-23 22:22:00"},
{ "Name": "BOOTLOG.TXT", "dc": "1970-01-01 05:30:00", "da": "2005-04-02 00:00:00", "dm": "2005-04-02 14:38:00"},
{ "Name": "DETLOG.TXT", "dc": "1970-01-01 05:30:00", "da": "2002-12-28 00:00:00", "dm": "2002-12-28 09:56:02"},
{ "Name": "CONFIG.SYS", "dc": "1970-01-01 05:30:00", "da": "2005-06-16 00:00:00", "dm": "2003-07-03 18:39:50"},
{ "Name": "DBLSPACE.BIN", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "1999-04-23 22:22:00"},
{ "Name": "MSDOS.SYS", "dc": "1970-01-01 05:30:00", "da": "2003-07-03 00:00:00", "dm": "2002-12-27 10:01:58"},
{ "Name": "DRVSPACE.BIN", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "1999-04-23 22:22:00"},
{ "Name": "MSDOS.---", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "2002-12-27 09:46:28"},
{ "Name": "SETUPLOG.TXT", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "2002-12-27 10:04:12"},
{ "Name": "WSOCK32.DLL", "dc": "1970-01-01 05:30:00", "da": "2005-06-16 00:00:00", "dm": "2002-12-27 09:47:10"},
{ "Name": "CFGWIZ.DLL", "dc": "1970-01-01 05:30:00", "da": "2005-02-26 00:00:00", "dm": "2002-12-27 09:47:12"},
];
$scope.gridOptions = {
angularCompileHeaders: true,
columnDefs: columnDefs,
rowData:[{"Name": "SUHDLOG.DAT", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "2002-12-27 09:51:22"}]
};
/*
$http.get('FileList.json').success(function (response) {
$scope.TData = response;
DateArray=$scope.TData.Files;
$scope.gridOptions.api.setRowData(DateArray);
});
*/
$scope.gridOptions.api.setRowData(RowDatas);
});
</script>
</head>
<body>
<div ng-app="workbenchApp">
<div ng-controller="workBenchCtrl">
<div ag-grid="gridOptions" class="ag-blue" style="height: 500px;"></div>
</div>
</div>
</body>
Had the same problem that seemed to be caused by the method being called twice. The first time before the api was defined, making the inner code would crash. On the second pass, the api was defined.
OnGridReady did not work for me, neither did using vue's nextTick or timeout.
finally resolved it by using an if:
if (this.gridOptions.api) {
this.gridOptions.api.setFilterModel(null);
}
This allowed it to pass over it the first time and not crash, then catch it the second time and do the work.
(Hope this helps someone. Caused me a good deal of frustration.)
The grid api will only be ready once the grid has initialized. You can use the gridReady event for this:
$scope.gridOptions = {
onGridReady: function() {
$scope.gridOptions.api.setRowData(...your data);
}
try this :
onGridReady: function(params) {
params.api.setRowData(...your data);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With