title: Disable the pagination navigation buttons during an API request in AG Grid
body: <p>How could I disable the pagination navigation buttons during an API request in AG Grid? I am using Vue.js if it matters.</p>
  <p>E.g. <a href="https://plnkr.co/edit/nk8nZVetYeJi0M4H?open=main.js" rel="nofollow noreferrer">here</a> I would like to disable the controls while the API request is in progress. How could I do that?</p>
  <pre><code>var checkboxSelection = function (params) {
    // we put checkbox on the name if we are not doing grouping
    return params.columnApi.getRowGroupColumns().length === 0;
  };
  var headerCheckboxSelection = function (params) {
    // we put checkbox on the name if we are not doing grouping
    return params.columnApi.getRowGroupColumns().length === 0;
  };
  const columnDefs = [
    {
      field: 'athlete',
      minWidth: 170,
      checkboxSelection: checkboxSelection,
      headerCheckboxSelection: headerCheckboxSelection,
    },
    { field: 'age' },
    { field: 'country' },
    { field: 'year' },
    { field: 'date' },
    { field: 'sport' },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' },
    { field: 'total' },
  ];
  
  var autoGroupColumnDef = {
    headerName: 'Group',
    minWidth: 170,
    field: 'athlete',
    valueGetter: (params) =&gt; {
      if (params.node.group) {
        return params.node.key;
      } else {
        return params.data[params.colDef.field];
      }
    },
    headerCheckboxSelection: true,
    // headerCheckboxSelectionFilteredOnly: true,
    cellRenderer: 'agGroupCellRenderer',
    cellRendererParams: {
      checkbox: true,
    },
  };
  
  const gridOptions = {
    defaultColDef: {
      editable: true,
      enableRowGroup: true,
      enablePivot: true,
      enableValue: true,
      sortable: true,
      resizable: true,
      filter: true,
      flex: 1,
      minWidth: 100,
    },
    suppressRowClickSelection: true,
    groupSelectsChildren: true,
    // debug: true,
    rowSelection: 'multiple',
    rowGroupPanelShow: 'always',
    pivotPanelShow: 'always',
    enableRangeSelection: true,
    columnDefs: columnDefs,
    paginationAutoPageSize: true,
    pagination: true,
    autoGroupColumnDef: autoGroupColumnDef,
  };
  
  // setup the grid after the page has finished loading
  document.addEventListener('DOMContentLoaded', function () {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
  
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((response) =&gt; response.json())
      .then((data) =&gt; gridOptions.api.setRowData(data));
  });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/66aaa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/66aaa.png" alt="enter image description here" /></a></p>
  <p>I found the example above in <a href="https://www.ag-grid.com/javascript-data-grid/row-pagination/" rel="nofollow noreferrer">the documentation</a>.</p>