Built to support modern Web 2.0 applications, WebGrid introduces breakthrough virtual loading paging mode. Instead of having users to navigate pages, VirtualLoad seamlessly loads more data as the Grid is scrolled downward, makes data browsing more intuitive than ever.

With VirtualLoad paging you can stay one step ahead of your users. As users move through pages, this feature looks ahead to request not only the currently required page, but also the pages likely to be needed next. Previously displayed data is retained, allowing pages of data to be presented with fewer trips to the server. VirtualLoad is now enhanced to work seamlessly with grouped rows in Client Binding mode.

This topic contains the following section:

How VirtualLoad Paging Mode Works?
Enable VirtualLoad Paging
Customize VirtualLoad Paging Size
Customize Load Mechanism
Implement Custom Virtual Load
Enable Virtual Group Row Paging

How VirtualLoad Paging Mode Works?

The VirtualLoad™ paging concept, is a unique feature that enables more data to be retrieved from server transparently and virtually as users scroll the data forward. As of other key features, the VirtualLoad paging feature also works in conjunction with all other key's features such as automatic data caching and processing.

The VirtualLoad paging mode works in following ways:

When no group columns exist in top level Table, more rows can be retrieved by clicking on "Load More Data" icon or by scrolling the vertical scrollbars to the bottom edge of the Grid.
When group columns exist in top level Table, all parent group rows will be rendered to clients but only a number of defined rows are rendered counted from the first parent group row. Therefore, it is able to keep server's bandwidth usage as minimal as possible, while displaying all necessary information. When users click on + to expand group row, the control will transparently and virtually load the child rows of that group row.

Enable VirtualLoad Paging

To enable VirtualLoad, simply open the WebGrid Designer and set the PagingMode to VirtualLoad. The default value of VirtualPageSize is 50 which you can customize to fit your application’s need.

Code	Copy Code
<ISWebGrid:WebGrid ID="WebGrid1" runat="server" ...> <RootTable ...> ... </RootTable> <LayoutSettings PagingMode="VirtualLoad"> </LayoutSettings> </ISWebGrid:WebGrid>

Customize VirtualLoad Paging Size

WebGrid allows you to customize paging size in VirtualLoad mode. To customize the VirtualLoad paging size, set the VirtualPageSize property to a number which specifies the number of rows to retrieve. (e.g. 20).

Customize Load Mechanism

WebGrid has VirtualLoadMode property which is appropriate for the enterprise-class application scenarios where the size of database is relatively large and getting larger as the business grows. There are three modes of VirtualLoadMode: Default, LargeData, and Custom.

On the default mode, WebGrid will retrieve and render a number of rows specified in VirtualPageSize. While on the LargeData mode, all rows in VirtualPageSize will be rendered by the the grid. This mode is appropriate for large-size data.

On the custom mode, developers need to specify the data fetching logic. Sorting, editing and all-other data aware functionalities can work in this mode, except Grouping since that Grouping requires all rows to be loaded.

Using LargeData option in the VirtualLoadMode property restricts the users to export ALL the data. Only a certain batch of data which has been retrieved by users, will be exported to the medium. Therefore, in order to export ALL data, the VirtualLoadMode property needs to be configured to Default option temporarily and invokes the RebindDataSource() method.

Implement Custom Virtual Load

Custom VirtualLoad is one of VirtualLoad features which allow developer to setup a grid with their own implementation and logic for fetching the data. Note that sorting, editing and all other data-aware functionalities can work in this mode, except Grouping since that Grouping requires all rows to be loaded.

For more detail information, please check the How-to: Implement custom Virtual Load.

Enable Virtual Group Row Paging

WebGrid now supports group row paging when used together with VirtualLoad™ mode. The group row paging significantly improves overall performance by loading only a small number of records (specified in GroupRowPageSize property) when user expands the group header.

To enable group row paging feature, simply set the EnableGroupRowPaging property to true. You can also customize the group row page size by setting the GroupRowPageSize property. These properties can be found in ClientBindingSettings.

To learn more, please check How-to: Enable Virtual Group Row Paging.