Loading data on demand improves application's performance by requesting less data at a given time. This gives the application an advantage when dealing with large data sets, because it prevents the application from loading data until it is required.

OData service supports loading data on demand. Wijmo includes the ODataCollectionView class to connect controls, such as FlexGrid, to OData services and load the data in the source.

ODataVirtualCollectionView

The ODataVirtualCollectionView class extends ODataCollectionView class to provide on-demand loading of data. It does not load all data, at once, from the server automatically. Instead, it relies on the setWindow() method to load data fragments (windows) on demand.

type=note

Note: Although invoking the setWindow() method won't cause issues with the existing ODataCollectionView code, we recommend removing it from your existing code.

Code Example:

import * as wjCore from '@mescius/wijmo';
import * as wjOdata from '@mescius/wijmo.odata';
import * as wjGrid from '@mescius/wijmo.grid';

// get order details into an ODataCollectionView
var url = 'https://services.odata.org/Northwind/Northwind.svc';
var table = 'Order_Details_Extendeds';

// get order details into a ODataVirtualCollectionView
var virtualDetails = new wjOdata.ODataVirtualCollectionView(url, table, {
    loaded: function(sender, e) {
        var el = document.getElementById('totalItemCount');
        el.innerHTML = wjCore.format('{totalItemCount:n0} items', sender);
    }
});
  
// show the data on a grid
var theVirtualGrid = new wjGrid.FlexGrid('#theVirtualGrid', {
    itemsSource: virtualDetails, // ODataVirtualCollectionView
    isReadOnly: true, // this service is read-only
    formatItem: function(s, e) { // show row indices in row headers
            if (e.panel.cellType == wjGrid.CellType.RowHeader) {
                e.cell.textContent = e.row + 1;
            }
    },
});

Server-based Grouping

Wijmo supports virtualized server-based groups by setting the groupOnServer property to true. This also allows data aggregation at the server and displays aggregated data for groups. To apply aggregation, you need to set the aggregate property.

Code Example:

new wjcOData.ODataVirtualCollectionView("https://demodata.mescius.io/adventureworks/odata/v1/", "SalesOrderHeaders", {
        groupOnServer: true,
        aggregates:'Quantity with countdistinct as CQuantity,UnitPrice with average as AggPrice'
        groupDescriptions: ['AccountNumber']
    })

type=note

Note: ODataVirtualCollectionView class currently does not support the group keyBinding feature. When using grouping, ODataVirtualCollectionView can only be used with FlexGrid and its instances (except PivotGrid) as a data source.