# Wijmo Data

Learn how to work with Data in Wijmo applications using CollectionView, ObservableArray and more in this tutorial

## Content


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
```javascript
import * as wijmo from '@mescius/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