Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught TypeError: Cannot read property 'Api' of undefined ?

See original GitHub issue

Hello, I’m trying to implement the angular-datables packages, but I got an error : "Uncaught TypeError: Cannot read property ‘Api’ of undefined " angular-datatables.js:4 (anonymous function)

I tried to use the zero configuration example. My design look like :

<table datatable="" class="row-border hover">...</table>

Do I miss something?

Thanks for your help.

Issue Analytics

State:
Created 9 years ago
Comments:10 (3 by maintainers)

Top GitHub Comments

3reactions

martypowellcommented, Feb 19, 2016

Hopefully this will help someone, but I had forgot to include a reference to the jQuery datatables jquery library. Adding prior to the angular library reference fixed it for me.

0reactions

nandhacsecommented, Jan 7, 2016

I’m trying to display two ag-grid on the same page. i got the following error; Uncaught TypeError: Cannot read property ‘api’ of undefined.

this is how i tried. html code: <script type="text/javascript" src="../javascript/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="../javascript/angular/angular.js"></script> <script type="text/javascript" src="../javascript/bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="../javascript/angular/angular-route.js"></script> <link rel="stylesheet" type="text/css" href="../ngTable/ag-grid.css">

 <body ng-app="AngApp" ng-controller="gridCtrl" style="margin-top:5%">
      <div class="container">
      <div class="firstGrid">
         Page Size:
        <select ng-model="pageSize" ng-change="onPageSizeChanged()">
            <option value="10">10</option>
            <option value="100">100</option>
            <option value="500">500</option>
           <option value="1000">1000</option>
         </select>
<!-- <input type="text" ng-model="gridFilter" placeholder="Filter..." style="margin-left:22%; padding-bottom:5px;margin-top:2%"> -->
            <div style="height: 40%; width:600px;margin-top:0.5%" ag-grid="gridOptions" class="ag-fresh">         </div>
        </div>


              <div class="secondGrid" style="width:600px;float: right;margin-top: -245px;margin-right:                 50px;height: 250px;
               ">
               Page Size:
                   <select ng-model="pageSize1" ng-change="onPageSizeChanged1()">
                   <option value="10">10</option>
                   <option value="100">100</option>
                   <option value="500">500</option>
                   <option value="1000">1000</option>
                   </select>
                <!-- <input type="text" ng-model="gridFilter" placeholder="Filter..." style="margin-left:22%;       padding-bottom:5px;margin-top:2%"> -->
                         <div ag-grid="gridOptions" class="ag-fresh"></div>
                     </div>
                     </div>
                      </body>

This is my Js script:

  function gridCtrl($scope,$http){
  var all_data;
  var all_data1;
 var columnDefs=[
  {
      headerName:"Name",field:"name",width:120
  } ,
  {
      headerName:'Allowance',field:'allowance',width:180 , filter:'number'
  },
  {
      headerName:'Paid',field:'paid',width:120
  },
{
    headerName: "Silver", field: "silver", width: 100
},
{
    headerName: "Bronze", field: "bronze", width: 100
},
{
    headerName: "Total", field: "total", width: 100
}
,
{
    headerName: "Average", field: "average", width: 100
}

];

 var columnDefs1=[
{
    headerName:"Name",field:"name",width:120
},
{
    headerName:'Allowance',field:'allowance',width:180 , filter:'number'
},
{
    headerName:'Paid',field:'paid',width:120
},
{
    headerName: "Silver", field: "silver", width: 100
},
{
    headerName: "Bronze", field: "bronze", width: 100
},
{
    headerName: "Total", field: "total", width: 100
}
,
{
    headerName: "Average", field: "average", width: 100
}

];

$scope.pageSize = 50;
$scope.pageSize1 =50;

$scope.gridOptions1 = {
    enableSorting : true,
    enableFilter : true,
    enableColResize : true,
    columnDefs : columnDefs1
}

$scope.onPageSizeChanged = function(){
    createNewDatasource();
}

$scope.onPageSizeChanged1 = function(){
    createNewDatasource1();
}

$(document).ready(function(){
    if($scope.pageSize ="10")
        createNewDatasource();
});

$(document).ready(function(){
    if($scope.pageSize ="10")
        createNewDatasource1();
});

   var all_data = [{"name": "Moroni", "allowance": 505050505050505050,  "paid": true},
  {"name": "Tiancum", "allowance": 53,  "paid": false},
  {"name": "Jacob"},
 {"name": "Nephi", "allowance": 29,  "paid": false},
 {"name": "Enos", "allowance": 34,  "paid": false},
 {"name": "Ether", "allowance": 42,  "paid": false},
 {"name": "Alma", "allowance": 43,  "paid": true},
 {"name": "Jared", "allowance": 21,  "paid": true},
 {"name": "Moroni", "allowance": 50,  "paid": true},
 {"name": "Tiancum", "allowance": 53,  "paid": false},
{"name": "Jacob"},
{"name": "Nephi", "allowance": 29,  "paid": false},
{"name": "Enos", "allowance": 34,  "paid": false},
 {"name": "Ether", "allowance": 42,  "paid": false},
 {"name": "Alma", "allowance": 43,  "paid": true},
{"name": "Jared", "allowance": 21,  "paid": true}, 
{"name": "Moroni", "allowance": 50,  "paid": true},
 {"name": "Tiancum", "allowance": 53,  "paid": false},
 {"name": "Jacob"},
{"name": "Nephi", "allowance": 29,  "paid": false},
{"name": "Enos", "allowance": 34,  "paid": false}, 
 {"name": "Ether", "allowance": 42,  "paid": false},
 {"name": "Alma", "allowance": 43,  "paid": true},
{"name": "Jared", "allowance": 21,  "paid": true},
{"name": "Moroni", "allowance": 50,  "paid": true},
{"name": "Tiancum", "allowance": 53,  "paid": false},
 {"name": "Jacob"},
 {"name": "Nephi", "allowance": 29,  "paid": false},
  {"name": "Enos", "allowance": 34,  "paid": false},
  {"name": "Ether", "allowance": 42,  "paid": false},
  {"name": "Alma", "allowance": 43,  "paid": true},
 {"name": "Jared", "allowance": 21,  "paid": true},
 {"name": "Moroni", "allowance": 50,  "paid": true},
  {"name": "Tiancum", "allowance": 53,  "paid": false}]; 

 var all_data1 = [{"name": "Moroni", "allowance": 505050505050505050,  "paid": true},
 {"name": "Tiancum", "allowance": 53,  "paid": false},
 {"name": "Jacob"},
 {"name": "Nephi", "allowance": 29,  "paid": false},
 {"name": "Enos", "allowance": 34,  "paid": false},
 {"name": "Ether", "allowance": 42,  "paid": false},
 {"name": "Alma", "allowance": 43,  "paid": true},
  {"name": "Jared", "allowance": 21,  "paid": true},
  {"name": "Moroni", "allowance": 50,  "paid": true},
 {"name": "Tiancum", "allowance": 53,  "paid": false},
  {"name": "Jacob"},
 {"name": "Nephi", "allowance": 29,  "paid": false},
 {"name": "Enos", "allowance": 34,  "paid": false},
{"name": "Ether", "allowance": 42,  "paid": false},
 {"name": "Alma", "allowance": 43,  "paid": true},
 {"name": "Jared", "allowance": 21,  "paid": true},
 {"name": "Moroni", "allowance": 50,  "paid": true},
 {"name": "Tiancum", "allowance": 53,  "paid": false},
 {"name": "Jacob"},
  {"name": "Nephi", "allowance": 29,  "paid": false},
   {"name": "Enos", "allowance": 34,  "paid": false},
  {"name": "Ether", "allowance": 42,  "paid": false},
  {"name": "Alma", "allowance": 43,  "paid": true},
   {"name": "Jared", "allowance": 21,  "paid": true},
  {"name": "Moroni", "allowance": 50,  "paid": true},
  {"name": "Tiancum", "allowance": 53,  "paid": false},
  {"name": "Jacob"},
  {"name": "Nephi", "allowance": 29,  "paid": false},
  {"name": "Enos", "allowance": 34,  "paid": false},
   {"name": "Ether", "allowance": 42,  "paid": false},
  {"name": "Alma", "allowance": 43,  "paid": true},
   {"name": "Jared", "allowance": 21,  "paid": true},
   {"name": "Moroni", "allowance": 50,  "paid": true},
    {"name": "Tiancum", "allowance": 53,  "paid": false}]; 


function createNewDatasource(){
    if(!all_data){
        return;
    }
    var datasource ={
        pageSize : parseInt($scope.pageSize),
        getRows : function(params){
            console.log('looking for '+params.startRow+' to '+params.endRow);
            setTimeout(function(){
                var rowThisPage = all_data.slice(params.startRow,params.endRow);
                var lastRow = -1;
                if(all_data.length <=params.endRow){
                    lastRow = all_data.length;
                }
                params.successCallback(rowThisPage,lastRow);
            },500);
        }
    }
    $scope.gridOptions.api.setDatasource(datasource);
}

 function createNewDatasource1(){
    if(!all_data1){
        return;
    }
    var datasource1 ={
        pageSize1 : parseInt($scope.pageSize1),
        getRows1 : function(params1){
            console.log('looking for '+params1.startRow+' to '+params1.endRow);
            setTimeout(function(){
                var rowThisPage1 = all_data1.slice(params1.startRow,params1.endRow);
                var lastRow1 = -1;
                if(all_data1.length <=params1.endRow){
                    lastRow1 = all_data1.length;
                }
                params1.successCallback(rowThisPage1,lastRow1);
            },500);
        }
    }
    $scope.gridOptions1.api.setDatasource(datasource1);
}

}