Virtual Scroll: With the release of Ultimate 2.5, we present for the first time in the history of Flex, (and most other UI technologies) Virtual Scroll with Hierarchical data. The mandate when we came up with this feature was that we would need to be able to support scrolling through potentially millions of rows of hierarchical data. Implementing Virtual Scroll for Flat Data is quite straightforward. But when you start thinking about extending the same for hierarchical data, it starts to get complicated even to think about it. Add in ability to support multi headers, footers, selection, and you have a real challenge at hand. Well, the adventurers we are, we took it on. Before you read through the how-to, jump over to the demo, scroll all the way down, and run the Virtual Scroll example to see it in action.

Below are the guidelines to implementing Virtual Scroll for your applications:

1) Define your levels, columns, etc.

2) When you set the dataProvider, ensure you set grid.totalRecords. This is the same process you would follow with filterPageSortMode=server.

3) Set enableVirtualScroll=true

4) Set itemLoadMode and filterPageSortMode=server. This is important, because virtual scroll assumes that you are scrolling through a large set of related data, and the only navigational gesture for record identification of the current viewport is the scroll position of the vertical scroll bar.

5) Set the selectedKeyField. This is also important, not from a virtual scroll perspective, but specifically where filterPageSortMode is set to server. Ultimate (and classic) expose this field, because it attempts to resolve a fundamental issue that is left unaddressed by the Flex SDK DataGrids, which is maintenance of selection and state across data refreshes. We’ve talked about this in previous blog posts, but the selectedKeyField is primarily a pointer to a property on the model objects in the dataprovider that uniquely identifies this record in the database. For example, if you are showing a list of employees, the selectedKeyField should be employeeId. This is what the grid is going to use to “remember” which records were “selected” or “open”

6) Set up the numChildrenField. This is required if you have hierarchical data. When you enable virtual scroll, the grid needs to know upfront if the item being drawn has children. This information is then used to draw the disclosure Icon. It is also used to calculate the differential in height that opening or closing a specific item will cause.

7) Wire up the virtualScroll event. This is an event of type FlexDataGridVirtualScrollEvent. This event has a property called “recordsToLoad”. This is an array that contains VirtualScrollLoadInfo records. This array basically tells you which records to load, and at what levels. For flat grids, this will be a list record indexes at the top level. But for hierarchical grids, it will depend on what items are open, how many children each item has, and where you have scrolled to. When this event is dispatched, it is dispatched with VirtualScrollLoadInfo records where the “item” property will be null. It is in this event that you will issue a server call, to fetch the corresponding “item” records on basis of the record Index (and parent for child level records). Once you fetch the records from the database, you can then populate the recordsToLoad array with the data retrieved from the server, and call the grid.setVirtualScrollData, passing in the same array that was given to you in the event.

Virtual Scroll is quite similar to paging from a backend server implementation perspective. In our regular paging examples, we provide a mechanism to show you how to implement backend that consumes a page index, page size, and filter information. You would do the same thing here, with the exception that instead of page index and page size, you will get exact record indexes. The array of Virtual Scroll Data will also optionally contain header and footer rows. From a backend implementation perspective, you’ll ignore these.

8) A few other flags that might be of interest:

a. enableDrawAsYouScroll : When you set this to true, the grid continuously dispatches the “virtualScroll” event. You should set this to true only when you have a need for this, because for the most part, you only want to dispatch the scroll when the user pauses scrolling.

b. virtualScrollDelay : The amount of time to wait before dispatching the virtualScrollEvent