How to make 2nd HTTP call to fetch data for detail grid - getDetailRowData()

Question

I have an ag-Grid master/detail grid setup. So when the master grid row is expanded it then loads the detail grid.

See simple example: https://www.ag-grid.com/javascript-grid-master-detail/#example-simple-master-detail

This works on the basis that the data for the detail grid has already been fetched in the original json data used on the master grid.

I want to take the id of the master grid selected row and make a 2nd HTTP service call to get the json data for the detail grid.

The simple example just sends the json data to the successCallback as follows:

      getDetailRowData: function(params) {
        params.successCallback(params.data.callRecords);
      }

I have tried changing this method to:

      getDetailRowData: function(params) {
        this.http
          .get(
            "https://gist.githubusercontent.com/adrianwright109/37a5e37ba2382b26f42b9d12a8593878/raw/60d2ffed511262a6a2e7e54e01bffd28c3701c5e/ClientProfiles.json"
          )
          .subscribe(data => {
            params.successCallback(data);
          });

        // params.successCallback(params.data.callRecords);
      }

With this code I get the following error(s):

ERROR TypeError: Cannot read property 'http' of undefined

ERROR Error: ag-Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace.

      getDetailRowData: function(params) {
        setTimeout(function() {
          this.http
            .get(
              "https://gist.githubusercontent.com/adrianwright109/37a5e37ba2382b26f42b9d12a8593878/raw/60d2ffed511262a6a2e7e54e01bffd28c3701c5e/ClientProfiles.json"
            )
            .subscribe(data => {
              params.successCallback(data);
            });
        }, 500);

        // params.successCallback(params.data.callRecords);
      }

With this code I get the following error:

ERROR TypeError: Cannot read property 'get' of undefined

I have a Plunker:

https://next.plnkr.co/plunk/IS5a3jKyDJJSSdh0

Has anyone achieved lazy loading the detail grid data from a web API service call?

Slipcase

Answer 1

You need to use Arrow function like below

  getDetailRowData: (params) => {
    this.http
      .get('.....')
      .subscribe(data => {
        params.successCallback(data);
      });

Have a look at the updated plunk: https://next.plnkr.co/edit/t84UtB4kALFfAxO1

If you are using setTimeout, then it should be like

  getDetailRowData: (params) => {
    setTimeout(() => {
      this.http
        .get('...')
        .subscribe(data => {
          params.successCallback(data);
        });
    }, 500);

    // params.successCallback(params.data.callRecords);
  }

Similar post: ag-grid server side infinite scrolling accessing props

Abscission

Answer 2

We can directly call the api inside getDetailRowData method and assign the values to params.successCallback() method so that we will get the data in detail view

getDetailRowData: function(params) {
    const payload = {searchParams: { id: Id }}
    fetch('http://localhost:3000/get-Students', {
        body: JSON.stringify(payload),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        method: 'POST',
    })
        .then(resp => resp.json())
        .then(data => {
            params.successCallback(data.rowData.map(rec => ({ ...rec, id: Id })))
        })
        .catch(e => {
            console.log(e, 'error')
        })
}

Wetzell

Answer 3

Well, in my case I kind of figured out that the "this" or the instance here is "undefined" inside the detailCellRendererParams, which is declared inside my ngOninit() function. Therefore, I declared a local variable inside the ngOninit with a name(say) temp and initiated it with the "this" at the beginning of the ngOninit() function like the following:

ngOninit() {
    let temp_this: any = this;

    //declaration of detailCellRenderer and stuff...

    getDetailRowData: function(params) {
        temp_this.http.get('..').subscribe(data=>{  // don't forget that this will 
                                               // work only if you have the HTTP dependency injection
                                              // in your constructor else call a service using DI and subscribe it
            params.successCallback(data);
        } 
    }
}

It is recommended to call your service methods, consisting of HTTP requests by adding your service's dependency injection in your component, unlike the above code. Anyhow, hope this helps you in understanding why we are getting this error.

Oud