AG-Grid: 'Virtual list has not been created' Error on First Filter Render when using keyCreator

ONLINECAST

2 min read

·

04-10-2024

9

0

Share

AG-Grid: Tackling the "Virtual list has not been created" Error with keyCreator

Problem:

You're using AG-Grid's powerful keyCreator feature to efficiently handle large datasets. However, when you first apply a filter, a dreaded error pops up: "Virtual list has not been created." This frustrating issue prevents you from seeing any filtered data, and leaves you scratching your head.

Scenario:

Imagine you're building a data-heavy application using AG-Grid, where each row represents a unique item. You're using the keyCreator function to improve performance by associating a unique ID with each row. This ID is critical for maintaining the integrity of your data when filters or sorts are applied.

Here's a simplified example:

const gridOptions = {
    rowData: [], // Your data source
    columnDefs: [
        { field: 'name', keyCreator: (params) => params.data.id } // Using keyCreator
    ],
    // ... other grid configurations
};

Initially, your grid renders perfectly. But, when you apply a filter, the dreaded "Virtual list has not been created" error appears.

Analysis:

The root cause of this error lies in the asynchronous nature of AG-Grid's virtual rendering. When you initially load the grid, AG-Grid creates the virtual list to optimize rendering for large datasets. However, when filters are applied, the grid needs to re-evaluate and potentially re-create the virtual list. In certain cases, the keyCreator function can interfere with this process, causing the virtual list to be created after the filter is applied, leading to the error.

Solutions:

Here's how you can solve this issue:

1. Delaying the filter: You can delay the filter application until the virtual list is fully created. This ensures the grid has enough time to process your data before applying the filter.

   // Example using setTimeout:
   setTimeout(() => {
       // Apply your filter here
   }, 100); // Adjust the timeout value as needed
   
   // Alternatively, use the grid's ready event
   gridOptions.onGridReady = (params) => {
       // Apply your filter here
   };
   

2. Using api.refreshCells(): After applying your filter, you can explicitly refresh the grid cells to force a re-evaluation of the virtual list.

   gridOptions.onFilterChanged = (params) => {
       gridOptions.api.refreshCells();
   };
   

3. Updating the grid options: If you are using dynamic data, you can update the grid options directly to trigger a re-render. This approach is useful for complex scenarios where you need to manage data updates and filtering.

   // Example using updateGridOptions
   gridOptions.api.updateGridOptions({
       rowData: updatedData
   }); 
   

Best Practices:

• Analyze your data: Carefully examine your data structure and the logic of your keyCreator function. Ensure the keyCreator function always generates unique IDs, even when your data changes dynamically.
• Monitor performance: Monitor the performance of your application with and without the keyCreator function. Consider alternatives like the rowNodeId attribute or a more efficient approach to manage your data if performance becomes a concern.

References:

• AG-Grid API Documentation: keyCreator
• AG-Grid API Documentation: Virtual List
• AG-Grid: How to Refresh Data After Filtering

Conclusion:

The "Virtual list has not been created" error can be frustrating, but understanding the root cause and implementing the right solutions can effectively overcome this challenge. By carefully considering your data structure, using appropriate techniques for handling filters, and monitoring performance, you can ensure smooth and efficient data management with AG-Grid's powerful virtual rendering features.