How can I change the number of rows to display in ag-grid?

Question

I am using ag-grid to generate data tables. At the beginning I created a file.js which was static, in this file I had a code which worked for me to choose if I wanted to show only 15 rows, 25 rows or 100 rows.

The above worked well, but I changed the method to generate my table and data dynamically. I used fetch to generate the table by obtaining the data through a json path. So far it works and shows me the data correctly. The problem is that now I can't choose whether I want to select 15 rows to display, or 25 rows or 100 rows.

// Fetch the data, then setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
  // Querying the data using fetch and promises
  fetch('/data.evento')
    // Deserializing the data we received
    .then(response => response.json())
    // We have our data now, we initialize our table
    .then(data => {
      const gridDiv = document.querySelector('#myGrid');
      new agGrid.Grid(gridDiv, {
        columnDefs: columnDefs,
        defaultColDef: {
          flex: 1,
          minWidth: 150,
          resizable: true,
          enableValue: true,
          enableRowGroup: true,
          enablePivot: true,
          sortable: true,
          filter: true,
          filter: 'agTextColumnFilter',
          menuTabs: ['filterMenuTab', 'generalMenuTab', 'columnsMenuTab'],
        },
        suppressRowClickSelection: true,
        rowSelection: 'multiple',
        enableRangeSelection: true,
        autoGroupColumnDef: {
          minWidth: 200,
        },
        sideBar: ['columns', 'filters'],
        animateRows: true,
        pagination: true,
        paginationPageSize: 15,
        domLayout: 'autoHeight',
        enableSorting: true,
        enableFilter: true,
        rowData: data
      });
});

Through the previous code I generate my table with the data, and the following code served me to select the number of rows to display in my table.

var changePageSizeFunction;

changePageSizeFunction = function () {
  const pageSizeSelect = document.getElementById('pageSizeSelect');
  const selectedPageSize = parseInt(pageSizeSelect.value, 10);

  if (selectedPageSize === -1) {
    // Si se selecciona "Todos", establecer un tamaño de página alto para mostrar todos los elementos.
    gridOptions.api.paginationSetPageSize(Number.MAX_VALUE);
  } else {
    gridOptions.api.paginationSetPageSize(selectedPageSize);
  }
};

The problem is that before all the code of options of the table was saved in the gridOptions variable and now with the change, all the gridOptions variables I have declared without the gridOptions variable. Then I don't know how to call this configuration variable:

gridOptions.api.paginationSetPageSize(selectedpageSize);

On my front-end side I have this:

<label for="pageSizeSelect">Mostrar:</label>
<select id="pageSizeSelect" onchange="changePageSizeFunction()">
<option value="15">15</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="-1">Todos</option>
</select>

I would like to know how I can make my code work or if there is any other way to select the number of rows to display within my table, it would be great.

Answer 1

Why don't you define a variable outside of your DOMContentLoaded event and assign your grid options into it?

let gridOptions;
// Fetch the data, then setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
  // Querying the data using fetch and promises
  fetch('/data.evento')
    // Deserializing the data we received
    .then(response => response.json())
    // We have our data now, we initialize our table
    .then(data => {
      const gridDiv = document.querySelector('#myGrid');

      // assignment here
      gridOptions =         
        columnDefs: columnDefs,
        defaultColDef: {
          flex: 1,
          minWidth: 150,
          resizable: true,
          enableValue: true,
          enableRowGroup: true,
          enablePivot: true,
          sortable: true,
          filter: true,
          filter: 'agTextColumnFilter',
          menuTabs: ['filterMenuTab', 'generalMenuTab', 'columnsMenuTab'],
        },
        suppressRowClickSelection: true,
        rowSelection: 'multiple',
        enableRangeSelection: true,
        autoGroupColumnDef: {
          minWidth: 200,
        },
        sideBar: ['columns', 'filters'],
        animateRows: true,
        pagination: true,
        paginationPageSize: 15,
        domLayout: 'autoHeight',
        enableSorting: true,
        enableFilter: true,
        rowData: data
      };

      new agGrid.Grid(gridDiv, gridOptions);
});

You can check this plunker: https://plnkr.co/edit/PDQhsuJ7jTAVc5Dd?preview