Binding FlexGrid to OData

OData or Open Data Protocol is a service that can be used to create and consume REST APIs, helping applications to focus on business logic. It provides a standard data model and protocol that makes it easier to consume data from various sources.

FlexGrid can be used to display the data returned from the ODataServer to make it readable.

Wijmo includes the ODataCollectionView class that extends the CollectionView class to provide support for OData sources. To use the ODataCollectionView class, specify the following:

• The URL of the data service

• The name of the table to access

• Optional parameters (fields to retrieve, server/client filtering, sorting, and paging preferences)

type=note

Note: For writable data sources, ensure to include the key fields.

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

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);

Server Based Grouping

Server-based grouping groups the data on Server and calculates the aggregates for specified properties on it.

Starting with OData 7.0, OData includes aggregation support in addition to server-side filtering, sorting, and paging capabilities.

Wijmo supports OData server- based group and aggregation. To enable server-based grouping, set groupOnServer property to true.

new ODataCollectionView("https://demodata.mescius.io/adventureworks/odata/v1/", "SalesOrderHeaders", {
    groupOnServer: true,
    groupDescriptions: ['AccountNumber']
});

type=note

Note:

There are some prerequisites required in Wijmo to use the server-based grouping with ODataCollectionView class as mentioned below:

• OData package must be version 7.0 or later

• Server API must support aggregation

Also, if the provided OData API does not support server-based grouping, an error will be thrown, and execution will stop.

Group Lazy-Loading

Group lazy-loading loads the hierarchical data in chunks, reducing the initial data load and enhancing efficiency.

The ODataCollectionView class supports lazy loading for grouped data. It allows the top-level groups to be loaded first, and then the remainder of the data is loaded on request by expanding the specified group. The ODataCollectionView class provides the groupLazyLoading property which when set to true enables the group lazy-loading feature.

new ODataCollectionView("https://demodata.mescius.io/adventureworks/odata/v1/", "SalesOrderHeaders", {
    groupOnServer: true,
    groupLazyLoading: true,
    groupDescriptions: ['AccountNumber']
});

Limitation

• Ctrl+Click for group expand/collapse is not supported for FlexGrid and MultiRow when groupLazyLoading is enabled.