ag-grid server side infinite scrolling accessing props

Question

I'm attempting to implement ag-grid server side row model as described in their documentation here. What I'm attempting to do is pass the api call along with it's parameters as props to the grid component. The problem is that when trying to access the props via this.props or state via this.state they are both undefined. My code looks like this:

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.gridApi.showLoadingOverlay();
      var dataSource = {
        rowCount: null,
        getRows: function(params) {
          setTimeout(function() {
            let serviceParams = this.props.dataServiceParams ?  this.props.dataServiceParams.slice() : {};
            serviceParams.pageSize = this.state.paginationPageSize; // this will be the rows returned per service call
            serviceParams.index =  // if there is more than 1 page for the pagesize this is the index/page to return.
            serviceParams.sortAndFilters = gridUtility.combineSortAndFilters(params.sortModel, params.filterModel);

            this.props.dataService(serviceParams)
                .then(out => {
                  var rowsThisPage = out;
                  var lastRow = -1;
                  params.successCallback(rowsThisPage, lastRow);
                });

            params.context.componentParent.gridApi.hideOverlay();
          }, 500);
        }
      };

      params.api.setDatasource(dataSource);
  };

dataService prop contains my service/api call while dataServiceParams has any params that are needed for the service. I'm adding additional parameters for dealing with sorting, filtering and returning the data page/index needed. What am I missing here?

Answer 1

You need to use Arrow function to access the properties of the parent scope. Check the code below for getRows and setTimeout.

  var dataSource = {
    rowCount: null,
    getRows: (params) => {
      setTimeout(() => {
        let serviceParams = this.props.dataServiceParams ?  this.props.dataServiceParams.slice() : {};
        serviceParams.pageSize = this.state.paginationPageSize; // this will be the rows returned per service call
        serviceParams.index =  // if there is more than 1 page for the pagesize this is the index/page to return.
        serviceParams.sortAndFilters = gridUtility.combineSortAndFilters(params.sortModel, params.filterModel);

        this.props.dataService(serviceParams)
            .then(out => {
              var rowsThisPage = out;
              var lastRow = -1;
              params.successCallback(rowsThisPage, lastRow);
            });

        params.context.componentParent.gridApi.hideOverlay();
      }, 500);
    }
  };