ODataCollectionView with Server-based Grouping
Wijmo includes an ODataCollectionView class that extends ODataCollectionView to provide support for OData sources.
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.
OData is an OASIS standard that defines a set of best practices for building and consuming RESTful APIs. OData adds aggregation support from OData 7.0 onwards.
ODataCollectionView class allows to perform server-based grouping. For this, groupOnServer should be set to true. The class would verify if grouping is supported by the OData API.
The error would be thrown and execution would be stop if the provided OData API does not support server-based grouping.
Addition to server-based grouping, ODataCollectionView class provides group lazy-loading supports. This feature would load only top level groups at first. The rest data would be loaded on demand by expanding the targetted group by calling lazyLoadGroup. This method call handled internally for grid instances.
To enable group lazy-loading, groupLazyLoading property should be set to true.
Learn about FlexGrid | ODataCollectionView Documentation | FlexGrid API Reference
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import { DataType } from '@mescius/wijmo';
import { ODataCollectionView } from '@mescius/wijmo.odata';
import { FlexGrid } from '@mescius/wijmo.grid';
import { FlexGridFilter } from '@mescius/wijmo.grid.filter';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
let url = "https://demodata.mescius.io/adventureworks/odata/v1/";
let tableName = "SalesOrderHeaders";
let fields = "AccountNumber,PurchaseOrderNumber,SalesOrderNumber,SubTotal,TaxAmt,Freight,TotalDue,ModifiedDate".split(',');
let cvSettings = {
fields: fields,
sortOnServer: true,
filterOnServer: true,
groupOnServer: true,
groupLazyLoading: true,
groupDescriptions: ['AccountNumber']
};
// create the grid to show the data
let theGrid = new FlexGrid('#theGrid', {
isReadOnly: true,
autoGenerateColumns: false,
columns: [
{ binding: 'AccountNumber', header: 'Account Number', visible: false, dataType: DataType.String },
{ binding: 'PurchaseOrderNumber', header: 'Purchase Order Number', dataType: DataType.String, width: '*', minWidth: 200 },
{ binding: "SalesOrderNumber", header: "Sales Order Number", dataType: DataType.String, width: '*', minWidth: 200 },
{ binding: "SubTotal", header: "Sub Total", dataType: DataType.Number },
{ binding: "TaxAmt", header: "Tax Amount", dataType: DataType.Number },
{ binding: "Freight", header: "Freight", dataType: DataType.Number },
{ binding: "TotalDue", header: "Total Due", dataType: DataType.Number },
{ binding: "ModifiedDate", header: "Modified Date", dataType: DataType.Date }
],
//create ODataCollectionView instance
itemsSource: new ODataCollectionView(url, tableName, cvSettings)
});
// add the filter with Condition filter as default
new FlexGridFilter(theGrid, {
defaultFilterType: 'Condition'
});
document.getElementById("feature-options").addEventListener('click', (e) => {
let element = e.target;
// to avoid click for label
switch (element && element.id) {
case 'groupServer':
cvSettings.groupLazyLoading = false;
break;
case 'lazyload':
cvSettings.groupLazyLoading = true;
break;
}
if (element.tagName == "INPUT") {
theGrid.itemsSource = new ODataCollectionView(url, tableName, cvSettings);
}
});
}
Feedback
Submit and view feedback for