Vue Data GridRow Models

vue logo

The grid can be configured with different strategies for loading row data into the grid, which are encapsulated into different Row Models. Changing which Row Model the grid is using means changing the strategy the grid is using for loading rows.

The grid comes with four row models:

  1. Client-Side
  2. Server-Side
  3. Infinite
  4. Viewport

The Client-Side Row Model deals with client-side data. The Server-Side, Infinite and Viewport Row Models deal with server-side data. The following is a summary of each:

  • Client-Side

    This is the default. The grid will load all of the data into the grid in one go. The grid can then perform filtering, sorting, grouping, pivoting and aggregation all in memory.

  • Infinite

    This will present the data to the user and load more data as the user scrolls down. Use this if you want to display a large, flat (not grouped) list of data.

    Go to Infinite Row Model

  • Server-Side (e)

    The Server-Side Row Model builds on the Infinite Row Model. In addition to lazy-loading the data as the user scrolls down, it also allows lazy-loading of grouped data with server-side grouping and aggregation. Advanced users will use Server-Side Row Model to do ad-hoc slice and dice of data with server-side aggregations.

    Go to Server-Side Row Model

  • Viewport (e)

    The grid will inform the server exactly what data it is displaying (first and last row) and the server will provide data for exactly those rows only. Use this if you want the server to know exactly what the user is viewing, useful for updates in very large live datastreams where the server only sends updates to clients viewing the impacted rows.

    Go to Viewport Row Model

Which row model you use is set by the grid property rowModelType.