Binding FlexGrid to OData

Wijmo includes an ODataCollectionView class that extends CollectionView to provide support for OData sources.

OData is an OASIS standard that defines a set of best practices for building and consuming RESTful APIs. OData helps you focus on your business logic while building RESTful APIs without having to worry about the various approaches to define request and response headers, status codes, HTTP methods, URL conventions, media types, payload formats, query options, etc.

To use the ODataCollectionView class, create a new instance passing the URL of the data service, the name of the table you want to access, any optional parameters such as the fields you want to retrieve and whether you want filtering, sorting, and paging to be performed on the server or on the client.

If your data source supports writing, make sure to include the key fields as well.

This example shows a list of Northwind customers loaded from a public (read-only) OData source.

The record counter above the grid shows how the data is loaded in batches. This is done by the OData server.

In this example, filtering and sorting are done on the server:

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

// get customer list from Northwind OData service
  var url = 'https://services.odata.org/Northwind/Northwind.svc';
  var customers = new wjOdata.ODataCollectionView(url, 'Customers', {
  	sortOnServer: true,
    filterOnServer: true
  });
  
  // show the data on a grid
	var itemCountElement = document.getElementById('itemCount');
  var theGrid = new wjGrid.FlexGrid('#theGrid', {
  	itemsSource: customers, // ODataCollectionView
  	isReadOnly: true, // this service is read-only
    loadedRows: function() {
    	itemCountElement.innerHTML = theGrid.rows.length + ' items'
    }
  });
  
  // add a filter to the grid
  var f = new wjGrid.filter.FlexGridFilter(theGrid);