JavaScript Data GridViewport Row Model

javascript logo

A Viewport is a row model that allows showing a 'window' of data in your client. Typically all the data will reside on the server and the server will know what data is displayed in the client. This is again useful for the server to push changes out to the client as it knows what data is currently displayed.

Don't use Viewport Row Model unless you understand what advantages it offers and whether or not you need them.

We find many of our users are using Viewport Row Model when they don't need to and end up with unnecessarily complicated applications as a result. We'd recommend taking a look at our most powerful row model, the Server-Side Row Model, as an alternative.

The differences between row models can be found in our row models summary page

To enable the Viewport Row Model, set the grid property rowModelType='viewport'.

The term 'viewport' is a common term in GUIs used to describe the visible area when scrolls are used to display content that is larger than the visible area. In AG Grid, the viewport is referred to as the vertical scroll position, thus it defines the rows that are currently rendered by the grid.

AG Grid uses 'DOM row virtualisation' which means it only renders the rows you currently see, so AG Grid already uses the concept of a viewport for rendering the rows. The grid extends this concept and maps the viewport information to the Viewport Row Model.

Use a viewport to manage large live sets of data in the grid, where you only want to load a subset of the data into the grid and the data is updating at the source (typically a server), with the source sending updates to the grid when displayed data is changed.

The diagram below shows how the viewport maps to a connection to your dataset. The dataset connection knows what the viewport is displaying and sends data accordingly. When the user scrolls, the viewport will 'get' data from the source. If / when the data changes, the source will 'push' the data to the viewport if it knows the viewport is displaying that data.

It is the responsibility of the grid to display the data. It is the responsibility of the application (i.e. your code) to fetch the data, so if you are using WebSockets or otherwise, all of that coding belongs in the client code.

Interface IViewportDatasource

To use the viewportRowModel you provide the grid with an implementation of IViewportDatasource to the property viewportDatasource: