Available in the Full Version

Data Grid - Virtualization (Fixed)

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates the unique HTML virtualization capabilities of our jQuery Grid control. Virtualization is valuable when displaying large sets of records to end users. For example, a virtualized grid can support a data source of thousands of records, and still provide a responsive experience to the end-user during a rapid scroll of the grid. This responsiveness is present when virtual scrolling and paging are not enabled. The current sample has 501 JSON records loaded at a single time on the client, and the end user experience does not differ from that of a grid where all of the DOM elements are explicitly rendered in HTML. Virtualization is possible by supporting a virtual DOM section in the grid that is constantly refreshed for data. This means that HTML elements for the entire data set are not explicitly created, instead DOM elements are reused in the grid. Refreshing data in existing DOM elements boosts performance significantly for scenarios that require large sets of data without using paging or virtual scrolling to fetch more data from the server. The virtualization settings are configurable in the Virtualization property in the grid. You have the option of providing either boolean values or numeric values to configure virtualization settings. Providing numeric values instruct the grid that if the number of loaded rows in the data source exceeds this value, virtualization is automatically enabled. Further, you may configure vertical (row) and horizontal (column) virtualization separately. Vertical virtualization is enabled by setting RowVirtualization to true, while horizontal virtualization is enabled by setting ColumnVirtualization to true. In the case where you only want to have horizontal or vertical virtualization, Virtualization must be set to false. For vertical virtualization, it is important to note the average row height property – it’s default value is set to 25 pixels, but it might be necessary to manually adjust this property when working with a grid that has a small width, but the cell text is long so it spans multiple lines, and thus affects the rows’ heights.

Code View

Copy to Clipboard