Wijmo Data

Wijmo has a solid infrastructure based on a powerful and familiar data layer. The main data binding interface is ICollectionView, but Wijmo also includes the IEditableCollectionView and IPagedCollectionView interfaces. which support editing and paging.

ICollectionView

Wijmo's ICollectionView interface is a JavaScript version of the ICollectionView interface used in Microsoft's XAML platform. It is virtually identical to the one in .NET. It provides a consistent, powerful, and MVVM-friendly way to bind data to UI elements. It also provides currency, filtering, grouping and sorting services.

The IEditableCollectionView and IPagedCollectionView interfaces support editing and paging.

Wijmo includes several classes that implement ICollectionView. The most basic is CollectionView, which uses regular JavaScript arrays as data sources. We also have implementations that use BreezeJS and OData as data sources.

CollectionView Class

The CollectionvView class is derived from ICollectionView interface. It has a set of functionalities that make managing data very easy in any of the UI controls Wijmo provides. When bound to a control, changes made to the CollectionView are reflected in the controls automatically. Skip to the next topic, to see how to use the CollectionView.

Observable Array

The ObservableArray class is also a popular data management class available in Wijmo. Using the ObservableArray is very similar to using a regular javascript array. It has similar functions like insert, remove, sort, and splice.

collectionChanged event

The ObservableArray class raises the collectionChanged event when items are changed in the collection. The event is triggered when the following methods are used:

• push
• pop
• splice
• insert
• remove

To use the event, add a handler and provide a function to the handler as an argument to define the behavior when the event is raised. The example below demonstrates how to add handler to the event.

Example

import * as wijmo from '@grapecity/wijmo';

let observableArray = new wijmo.ObservableArray();

observableArray.collectionChanged.addHandler( (host, event) => {
    console.log('collectionChanged');
});

Changes made by assigning values directly to array members or to the length of the array do not raise the collectionChanged event