Resolving “Cannot call setRowData unless using normal row model” Error in ag-Grid

Introduction:

If you are working with an ag-Grid and encountered the error message “cannot call setRowData unless using normal row model,” don’t worry, you’re not alone. This error can occur when you have a form with an ag-Grid and are trying to manipulate the grid data using the setRowData() method. In this blog post, we will explore the cause of this error and provide a solution to resolve it, allowing you to work with the grid smoothly and efficiently. Let’s dive in and fix this issue together!

Understanding the Error

The “cannot call setRowData unless using normal row model” error typically occurs when you are using the pagination row model in ag-Grid. In this row model, you cannot directly use the setRowData() method to update the grid data. The error is a result of attempting to modify the grid data using an unsupported method.

Using a Local Data Source

To resolve this error, you can create a local data source and use it as the data source for your grid. This approach allows you to update the data without triggering the error. Here’s an example of how you can implement this solution:

code








clear() {
   let self = this;
   let dataSource = {
      getRows(params: any) {
         params.successCallback([], 0);
      }
   };
   this.gridOptions.api.setDatasource(dataSource);
}

By using the setDatasource() method with an empty data source, you can clear the grid data without encountering the error.

Refreshing the Grid

If you need to refresh the grid with the previous data, you can modify the gridOptions by changing the rowModelType to 'normal'. This modification allows you to update the grid with the previous data. Here’s an example:

code




this.gridOptions = {
   context: {},
   rowModelType: 'normal',
   paginationPageSize: 10,
};

By setting the rowModelType to 'normal', you can refresh the grid with the previous data by calling the appropriate data retrieval methods.

Customizing Grid Appearance

ag-Grid provides a wide range of customization options to tailor the grid’s appearance according to your application’s needs. You can modify the grid’s styling, including the header, row, and cell styles, to match your application’s design. Additionally, you can configure the column widths, sorting, filtering, and grouping functionalities to provide a user-friendly and intuitive grid experience.

Implementing Data Pagination

If you’re working with a large dataset, implementing data pagination can significantly improve the performance and responsiveness of your grid. ag-Grid offers built-in pagination functionality that allows you to divide the data into manageable chunks and load them dynamically as the user navigates through the grid. This approach minimizes the initial data load time and provides a smooth scrolling experience for the users.

Utilizing Row Selection and Actions

ag-Grid provides powerful features for row selection and performing actions on selected rows. You can enable row selection in the grid, allowing users to interact with individual rows or select multiple rows for bulk actions. Furthermore, you can add custom actions, such as editing, deleting, or performing specific operations on selected rows, to enhance the grid’s functionality and improve user productivity.

Enhancing Performance with Row Virtualization

For handling extremely large datasets, ag-Grid offers row virtualization, which optimizes the rendering and performance of the grid. Row virtualization efficiently renders only the visible rows while dynamically loading and unloading rows as the user scrolls through the grid. This approach ensures smooth scrolling and faster grid rendering, even with millions of rows.

Expanding with ag-Grid Community and Enterprise Features

ag-Grid provides both community and enterprise versions, each offering a unique set of features and functionalities. The community version is free to use and provides an extensive range of features suitable for most applications. However, if you require advanced features like server-side row models, Excel-like filtering, or pivot tables, you can consider upgrading to the enterprise version for additional capabilities and support.

Conclusion:

By resolving the “cannot call setRowData unless using normal row model” error and exploring the additional features and functionalities of ag-Grid, you can unlock the full potential of this powerful grid framework. Whether it’s customizing the appearance, implementing data pagination, or leveraging advanced features, ag-Grid empowers you to build robust and user-friendly data grids for your web applications.

Remember to stay updated with the latest version of ag-Grid, explore their comprehensive documentation, and take advantage of the vibrant community to gain insights and share knowledge.