title: ag-grid server side infinite scrolling accessing props
body: <p>I'm attempting to implement ag-grid server side row model as described in their documentation <a href="https://www.ag-grid.com/javascript-grid-server-side-model-infinite/" rel="nofollow noreferrer">here</a>. 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:</p>
  
  <pre><code>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 =&gt; {
                    var rowsThisPage = out;
                    var lastRow = -1;
                    params.successCallback(rowsThisPage, lastRow);
                  });
  
              params.context.componentParent.gridApi.hideOverlay();
            }, 500);
          }
        };
  
        params.api.setDatasource(dataSource);
    };
  </code></pre>
  
  <p>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?</p>