CODEWITHSUNDEEP
ag-grid
DrVishnu
DrVishnu

Reputation: 133

ag-grid Cannot read property 'setRowData' because gridOptions.api undefined

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>

Upvotes: 7

Views: 49141

Answers (5)

Austin Born
Austin Born

Reputation: 1691

What worked for me was using this if youre in Angular 16 and using the GridApi. api.setGridOption('rowData', newData)

Here is the reference I used https://www.ag-grid.com/angular-data-grid/data-update/

Upvotes: 0

Sreelakshmi K
Sreelakshmi K

Reputation: 51

If the type of the ag grid row model being used is not client-side then remove the rowData property on the grid. This way you will not get an error and params.api will not be undefined on onGridReady.

setRowData is defined only on client side row model.

getRows function will handle setting the server side data within the table.

Reference for server side row model (example)-

https://www.ag-grid.com/javascript-data-grid/server-side-operations-nodejs/

Upvotes: 2

Jhade SaGrave
Jhade SaGrave

Reputation: 101

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.)

Upvotes: 10

Israel Neves
Israel Neves

Reputation: 43

try this : 

 onGridReady: function(params) {
            params.api.setRowData(...your data);
        }

Upvotes: 1

Sean Landsman
Sean Landsman

Reputation: 7197

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);
    }

Upvotes: 6

Related Questions