I'm new in using agGrid forgive me if you find something silly. So before this I was using Kendo Grid on angularjs but we thought to switch to some other grid so we are trying agGrid right now.

Below is the a sample of aggrid which is working fine and everything works. But, When i move my grid options inside a function which will be getting called on button click I'm getting WARNING - grid options for ag-Grid not found. Please ensure the attribute ag-grid points to a valid object on the scope.

I'm not able to understand what is the problem because inside this function kendo grid options are working fine and kendo grid is getting populated but I'm not sure what i'm doing wrong with the agGrid.

Kindly help me.

function abc($rootScope,$scope, $state, $stateParams, $timeout, Upload, baseURL, $cookieStore, $log, errorCheckFactory) {
    var columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];

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

    $scope.gridOptions2 = {
        columnDefs: columnDefs,
        rowData: rowData,
        enableFilter: true,
        enableColResize: true,
        enableSorting: true,
        groupHeaders: true,
        rowHeight: 22,
        //onModelUpdated: onModelUpdated,
        suppressRowClickSelection: true

    };

}

I'm new in using agGrid forgive me if you find something silly. So before this I was using Kendo Grid on angularjs but we thought to switch to some other grid so we are trying agGrid right now.

Below is the a sample of aggrid which is working fine and everything works. But, When i move my grid options inside a function which will be getting called on button click I'm getting WARNING - grid options for ag-Grid not found. Please ensure the attribute ag-grid points to a valid object on the scope.

I'm not able to understand what is the problem because inside this function kendo grid options are working fine and kendo grid is getting populated but I'm not sure what i'm doing wrong with the agGrid.

Kindly help me.

function abc($rootScope,$scope, $state, $stateParams, $timeout, Upload, baseURL, $cookieStore, $log, errorCheckFactory) {
    var columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];

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

    $scope.gridOptions2 = {
        columnDefs: columnDefs,
        rowData: rowData,
        enableFilter: true,
        enableColResize: true,
        enableSorting: true,
        groupHeaders: true,
        rowHeight: 22,
        //onModelUpdated: onModelUpdated,
        suppressRowClickSelection: true

    };

}

• javascript
• angularjs
• ag-grid

• Have you find its solution. I am also facing same issue. – ranjeet8082 Commented Mar 20, 2017 at 12:10
• @ranjeet8082 check your bindings as i said in my answer. – Walfrat Commented Mar 27, 2017 at 9:32
• hi, @ranjeet8082 u can Open the Grid At the time of Click a button , you can write "gridOptions" in side the function. So u can load Html Also At that Time using ng-if first you can hide the html click only u can load html and then in options also load at the click function so u dont get any error. u can check with this plunker. plnkr.co/edit/247nVYxwNmOXdHvutJNm?p=preview – Naveen Kumar Commented Mar 28, 2017 at 5:42

3 Answers 3

If the grid does not foud your gridOptions that surely means you have a typo in your html template

Check your hml template it must have

ag-grid="gridOptions2"

Note : if you use a controller with the controllerAs way, you have to bind variables on this and not on $scope.

If it's not this add, your html and your route/state/whatever definition of the navigation.

This is angular-grid binding issue. check your scope variable gridOptions.

grid options function:

var columnDefs = [
  {displayName: "Make", field: "make"},
  {displayName: "Model", field: "model"},
  {displayName: "Price", field: "price"},
  {displayName: "Price2 ", field: "price2"},
  {displayName: "Test 4", field: "test4"},
  {displayName: "Test 5", field: "test5"},
  {displayName: "Test 6", field: "test6"},
];

var rowData = [
  {make: "Toyota Toyota Toyota Toyota Toyota", model: "Celica", price: 35000, price2: 145, "Test 4": "Test 4", "Test 5": "Test 5", "Test 6": "Test 6"},
  {make: "Acura", model: "Celica", price: 35000, price2: 145, "Test 4": "Test 4", "Test 5": "Test 5", "Test 6": "Test 6"}
];

vm.gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData  
};

Working Plnkr: http://plnkr.co/edit/VRnwnXi6fzyaoJJ1YHOx?p=preview

Correct binding : <div angular-grid="main.gridOptions" class="ag-fresh" style="width: 100%"></div>

Error Plnkr : http://plnkr.co/edit/zb4Vc2lw5VzRzYwsfhL7?p=preview

In-Correct Binding : <div angular-grid="main.gridOptions2" class="ag-fresh" style="width: 100%"></div>

We changed binding from gridOptions to gridOptions2 and it's giving us warning : VM769 angular-grid.js:1 WARNING - grid options for Angular Grid not found. Please ensure the attribute angular-grid points to a valid object on the scope.

I think this should clear doubts.

@ranjeet8082 You can Open the Grid At the time of Click a button, you can write "gridOptions" in side the function. So you can load Html Also At that Time using ng-if first you can hide the html click only you can load html and then in options also load at the click function so you don't get any error. You can check with this plunker.

<div ng-if="vm.gridOptions"  angular-grid="vm.gridOptions" class="ag-fresh" style="width: 100%"></div>

link