AngularJs - ag-grid rowData using "controller as" syntax

Question

[Update] This Plunker does what I want, but :

it uses ui-grid, rather than ag-grid.
it injects the grid into the module, rather than just the single controller which uses it.

I presume that these changes would be straightforward & will try to work them into my code when I get home in about 14 hours time.

If anyone wants to fork that Plunk and make those changes, I will award a bounty, as this is a good basic start point demo for others wanting to do the same, so that a Plunker would be of general help.

I am tantalizingly close, but

Cannot read property 'setRowData' of undefined (caused by "<ui-view class="ng-scope ng-binding">")"TypeError: Cannot read property 'setRowData' of undefined

I am using "controller as" syntax, hence the Self; (Self = this;). That is working fine, my problem is when I try to set the rowData for an ag-grid in the templateURL of a ui-router state.

It's much to big to post, but here's the relevant stuff:

<div id="currentCandidatesGridDiv"
     ag-grid="Search_result_controller.currentCandidatesGrid" 
     class="ag-theme-balham red_border"
     style="height: 30%; width:90%">
</div>

// lookup the container we want the Grid to use
const currentCandidatesGridDiv = document.querySelector('#currentCandidatesGridDiv');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(currentCandidatesGridDiv, Self.currentCandidatesGrid);

Self.currentCandidatesGrid =
{
    columnDefs: [
       { headerName: "Candidate", field: "candidate_name", sortable: true },
       { headerName: "Skills", field: "skills", sortable: true },
       { headerName: "Start date", field: "start_date", sortable: true }
    ],
    rowData: [],  
    pagination: true,
    paginationAutoPageSize: true,
};

Was I correct to rowData: [], or ought I to have rowData: <someVariable>?

Then I calculate the row data into an array, Self.currentCandidatesGridRowData.

When I try to Self.currentCandidatesGrid.api.setRowData(Self.currentCandidatesGridRowData); I get error showing above.

I searched, but cannot find a working Plunker using the controller as syntax.

[Dupers] 1) the "dupe" question does not have an answer, so is of no use to me
2) my question is specifically about using Self.xxxGrid.api.setRowData(Self.xxxGridRowData); with the `controller as syntax. Pleas ere-open. Thnaks

As I see you are using gridOptions object, not directly api right? If so - you need to bind api inside gridReady function and then you would be able to use any method. — un.spike
– un.spike, Commented Mar 8, 2020 at 15:36
I dont need full code but only related to grid initialization and html which is in use (you can also make screenshot) — un.spike
– un.spike, Commented Mar 10, 2020 at 12:00
I recommend you use gridReady event (ag-grid.com/javascript-grid-events). This is really the only reliable replace to know that the api object has been setup. Within your callback you can safely access the ag-grid api. For example: onGridReady: function () {gridOptions.api.sizeColumnsToFit();} — Scott Walter
– Scott Walter, Commented Mar 10, 2020 at 19:44

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

+50

DEMO of ag-Grid with AngularJS using "controller As" syntax

When the ag-Grid script loads, it does not register with AngularJS 1.x. This is because AngularJS 1.x is an optional part of ag-Grid and you need to tell ag-Grid you want to use it:

agGrid.initialiseAgGridWithAngular1(angular);

angular.module("example", ["agGrid"])

For more information, see

Ag-Grid Documentation - Basic AngularJS 1.x Example

The DEMO on PLNKR

agGrid.initialiseAgGridWithAngular1(angular);

angular.module("example", ["agGrid"])
.controller("exampleCtrl", function() {

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

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

})

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
html {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    overflow: auto;
}
body {
    padding: 1rem;
    overflow: auto;
}

<script src="//unpkg.com/angular/angular.js"></script>
<script src='//unpkg.com/@ag-grid-community/all-modules/dist/ag-grid-community.min.js'>
</script>

<body ng-app="example" ng-controller="exampleCtrl as $ctrl"
      style="height: 100%">

    <div ag-grid="$ctrl.gridOptions" class="ag-theme-balham"
         style="height: 100%;">
    </div>

</body>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 11, 2020 at 6:19

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mawg Over a year ago

That works (obviously). Now to translate it into my app ;-) Thanks

georgeawg Over a year ago

It is the same demo as part 3 of my answer in the question AngualrJs: ag-grid in a ui-router view templateUrl. I just changed the template and controller to use "controller as" syntax.

Mawg Over a year ago

You obviously know your stuff! I am self-taught, but trying to do things "properly", refactoring my existing SPA to use routing. I would consider switching to Angular, but know enough AngularJs to get by, and will switch to Dart/Flutter soon. Thanks again ! :-)

un.spike · Accepted Answer · 2020-03-11 20:18:52Z

Was I correct to rowData: [], or ought I to have rowData: <someVariable>?

You can even ignore this property in gridOptions, but the difference is that: if you will define rowData as an empty array - grid will render handle it as 'No rows to show', but if you will not define it, grid will show 'Loading...' - which is more correct, with a delayed request case.

Besides, you can handle overlay logic by yourself for more details check here.

Now, as I said in comments

Cannot read property 'setRowData' of undefined

this issue could be caused by using the wrong reference.

First, take a look and check this answer with ag-grid developer comment also.

Secondly, about an issue itself:

.controller('yourController', [function() {
  var Self = this;  // here's your controller reference

  // then you will have columns and rowData (probably) 
  // but the most important part is here
  Self.currentCandidatesGrid = {
      ... // anything that you need
     onGridReady: gridReady // major point for future api reference
  }

  function gridReady(params){
     Self.gridApi = params.api;
     Self.columnsApi = params.columnsApi;
  }

}]);

And after gridReady you would be able to use grid API methods via Self.gridApi

Demo

Collectives™ on Stack Overflow

AngularJs - ag-grid rowData using "controller as" syntax

2 Answers 2

DEMO of ag-Grid with AngularJS using "controller As" syntax

The DEMO on PLNKR

3 Comments

Now, as I said in comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

DEMO of ag-Grid with AngularJS using "controller As" syntax

3 Comments

Now, as I said in comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related