Why Ag-grid display '?' (question mark) in pagination while Using Server Side rendering?

Question

I am using React Ag grid Server Side Pagination. Data is loading corrrectly but sometime it display '?' marks in pagination.

However, it display correctly If I click next.

Here is the code :

gridApi?.setServerSideDatasource({
      getRows: (params: IServerSideGetRowsParams) => {
        const { startRow, endRow, sortModel, filterModel } = params.request;
          refetch({
            result: 'ProjectSummary',
            startRow,
            endRow,
            tab: state.tab,
            filtergroup: JSON.stringify(filterModel),
            sortModel: JSON.stringify(sortModel?.length ? sortModel[0] : {}),
          }).then((response) => {
            if (response?.data) {
              const { datarows, total } = JSON.parse(response?.data?.body);
              if (response?.data?.statusCode === '200') {
                params?.success({
                  rowData: datarows,
                  rowCount: total,
                });
              }
            } else {
              params?.fail();
            }
          });
      }

Answer 1

As of now, I did not found any direct way to fix this but have a small hack. Here is the solution.

Define this function:

const setLbLastRowOnPage = () => {
    if (!gridApi) {
      return;
    }
    const lbLastRowOnPageEl = document.querySelector(`[ref=\'lbLastRowOnPage\']`);
    const isLastPage = gridApi.paginationGetTotalPages() === gridApi.paginationGetCurrentPage() + 1;
    const endRow = isLastPage
      ? gridApi.paginationGetRowCount()
      : (gridApi.paginationGetCurrentPage() + 1) * gridApi.paginationGetPageSize();
    if (lbLastRowOnPageEl) {
      lbLastRowOnPageEl.innerHTML = endRow.toString();
    }
  };

Now, call this in useEffect

useEffect(() => {
    setLbLastRowOnPage();
  }, [loading, gridApi]);