Binding FlexGrid to Virtual OData

The ODataCollectionView class provides a simple way to connect controls to OData sources. When you create an ODataCollectionView, it starts loading the data in the source.

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

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;
            }
    },
    scrollPositionChanged: function () {
        var rng = theVirtualGrid.viewRange;
        virtualDetails.setWindow(rng.row, rng.row2);
    }
});