AG-Grid displays blank page after reaching the last page

48 views Asked by At

I'm using AG-Grid with Stimulus controllers in my Rails 7 app. All works well until the user reaches the last page, then returns to the first page using the << arrows, at which point it renders a blank page instead of displaying data. No errors are found in server logs or browser console. Is that a common issue? Below is my code:

order_items_controller.js

import { Controller } from 'stimulus';
import Rails from '@rails/ujs';
import * as AgGrid from 'ag-grid-community';
import {
  DEFAULT_GRID_OPTIONS,
  buildColumnDefs,
  GridDatasource,
  updateColumnPositionsInCookies,
} from 'core/utils/grid';

const columnOptions = {
  columnDefs: {
    order_reference: { cellClass: 'font-mono', cellRenderer: 'flexCellRenderer', sortable: false },
    order_date: { cellClass: 'font-mono', maxWidth: 300, sortable: false },
    description: { cellClass: 'font-mono', maxWidth: 300, sortable: false },
    quantity: { cellClass: 'font-mono', maxWidth: 100, sortable: false },
    amount: {
      cellClass: 'ag-right-aligned-cell font-mono', maxWidth: 200, sortable: false,
      headerClass: 'ag-header-cell ag-header-cell-sortable text-xs font-medium text-gray-500 uppercase bg-gray-100'
                   + ' ag-focus-managed ag-right-aligned-header' },
    currency_code: { cellClass: 'font-mono', maxWidth: 150, sortable: false },
    invoice_id: { cellClass: 'font-mono', sortable: false },
    vat: { cellClass: 'font-mono', maxWidth: 100, sortable: false },
    actions: { cellClass: 'ag-right-aligned-cell font-mono', maxWidth: 120, sortable: false, withoutHeader: true }
  },
  cookiesName: 'order_items_columns_positions',
  defaultSorting: [
    'order_reference',
    'order_date',
    'amount',
    'quantity',
    'currency_code',
    'invoice_id',
    'vat',
    'description',
    'actions'
  ],
};

function buildGrid(gridElement) {
  const {indexUrl, paginationPageSize, i18nJson} = gridElement.dataset
  const options = {
    ...DEFAULT_GRID_OPTIONS,
    cacheBlockSize: paginationPageSize,
    maxConcurrentDatasourceRequests: 2,
    columnDefs: buildColumnDefs(columnOptions, i18nJson),
    datasource: new GridDatasource({ indexUrl }),
    onColumnMoved(params) { updateColumnPositionsInCookies(columnOptions, params) }
  }
  return new AgGrid.Grid(gridElement, options);
}

export default class extends Controller {
  connect() {
    const gridElement = this.element.querySelector('#orderItemsGrid');

    if (gridElement) {
      this.gridObject = buildGrid(gridElement)
    }
  }


  disconnect() {
    if (this.gridObject) {
      this.gridObject.destroy();
    }
  }
}

order_items_controller.rb

  class OrderItemsController < ApplicationController
    def index # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
      respond_to do |format|
        format.json do
          render json: order_items
            .serialize(::DtfsOrders::OrderItemSerializer, scope: view_context, payment_ids:, pundit_user:)
            .as_json
        end
        format.html do
          @order_item_list = fetch_order_items(@order_items_params.merge(limit: 1).to_h)
        end
      end
    rescue ::DtfsOrders::Error => e
      redirect_to main_app.root_path, alert: api_error_message(e)
    end
0

There are 0 answers