ag-grid: valueGetter data can be undefined in infinite scrolling

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/ceolter/ag-grid/blob/master/CONTRIBUTING.md#question

Current behavior

When using a valueGetter on a colDef with the infinite scrolling model, the valueGetter sometimes receive a params.data value that is undefined.

Expected behavior

valueGetter should only be called with params.data set to the row data.

Minimal reproduction of the problem with instructions

Here’s a plunker reproducing the problem, taken straight from the docs to which I only added:

    // field: "athlete",
    valueGetter: (params) => {
      console.log('valueGetter', params.data);
      return params.data.athlete;
    },

You can see that the grid fails to load the rows:

valueGetter undefined
errors.js:55 ERROR TypeError: Cannot read property 'athlete' of undefined at valueGetter

What is the motivation / use case for changing the behavior?

Right now it seems that an eager rendering of the rows is done before the data comes. The only workaround is to manually check the value of params.data in each valueGetter.

Please tell us about your environment:

ag-Grid version: 14.2.0

I have 14.2.0 locally but the plunker has the most recent version

Browser:

Language: [all | TypeScript X.X | ES6/7 | ES5]

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 14
Comments: 17 (3 by maintainers)

Most upvoted comments

I’ve just hit the same issue, we use valueGetter and cellRenderer using some complex data expressions as we combine several fields into a single column. We have 20 columns on the grid, so I have to check if (params.data === undefined) on each of the 20 cellRenderer functions. This seems unnecessary, the grid should allow me to handle it better.

davederrick on Jul 20, 2020

Any update on this @makinggoodsoftware ? I’m also having this problem.

dcragusa on Nov 5, 2018

Why was this issue closed? It seems to still be the case that you get back undefined for data in an infinite scroll setup.

cssagogo on Nov 12, 2021

Hi,

Your ticket has been flagged as in_zendesk, it means that we recognize this as an issue worth investigating so we have moved it to our official support channel for customers (zendesk)

We will carry on there with the investigation and we will update you as soon as possible.

Thanks

makinggoodsoftware on Oct 11, 2018

Hi,

I will add some more information since I can see this issue is getting some more traction, note that the valueGetter gets invoked always for a column no matter what is been shown on the screen

What this means is that even if the data is still not there, and the grid is printing Loading on screen, is going to call you into the valueGetter

Note that we do this on purpose so you have further control over the content of the cell even when there is no data present

What this does mean though, is that if you have a valueGetter and you don’t care about the use case when there is no data present, you need to add an if statement for that

For instance

// We know here that there is yet no data, and we don’t care if (params.data == null) return ‘’

Hope this helps

makinggoodsoftware on Apr 20, 2022

Hi guys,

From our knowledge base (so far only accesible to customers)

The infinite wor model scroll will show rows that haven’t loaded yet. Value handler routines attached to these rows will be presented with null values while the rows load.

Our documentation shows how to supply the user with a spinner whilst rows are being loaded:

Loading Spinner The examples on this page use a loading spinner to show if the row is waiting for its data to be loaded. The grid does not provide this, rather it is a simple rendering technique used in the examples. If the data is loading, then the rowNode will have no id. So if you use the id as the value, the cell will get refreshed when the id is set.

loadingSpinnerColumn = {

// use a value getter to have the node id as this columns value
valueGetter: 'node.id',

// then a custom cellRenderer
cellRenderer: function(params) {
    if (params.value === undefined) {
        // when no node id, display the spinner image
        return '<img src="loading.gif">'
    } else {
        // otherwise just display node id (or whatever you wish for this column)
        return params.value;
    }
}

} https://www.ag-grid.com/javascript-grid-infinite-scrolling/#loading-spinner

makinggoodsoftware on Feb 6, 2019

This works for me

    valueGetter: (params) => {
      if(!params.data) return 'not loaded yet';
      return params.data.athlete;
    },

feyzullahyildiz on Jan 16, 2019