Skip to main content Skip to footer

CollectionView for JavaScript

The Core Data Provider for Wijmo

The CollectionView class is the core data provider for all Wijmo components. It takes a sourceCollection array and provides data views with sorting, filtering, grouping, paging, notifications, changes tracking, currency management, and more.

Try the demo

DOWNLOAD SAMPLES WITH SOURCE CODE (v 5.20241.9)

Loading Data

Load data from either the client or the server with CollectionView. Loading data into the CollectionView on the client requires JSON objects.

Loading Data Demo

Data Views

The CollectionView class represents a view for grouping, sorting, filtering, and navigating data collections.

The object model used in the CollectionView class is similar to the one defined by. NET's ICollectionView and IPagedCollectionView interfaces.

Data Views Demo

Editing Views

The CollectionView provides support for editing items with methods similar to those found in. NET's IEditableCollectionView interface:

  • editItem: Save a copy of the item and put the collection in 'edit mode'. While in edit mode, the view is not refreshed, so items will not be sorted or filtered out of view during the editing process.
  • commitEdit: Exit edit mode so sorting and filtering become active again. If the item has changed, the collectionChanged event fires so bound components can show the changes
  • cancelEdit: Restore the original data and exits edit mode.

Edit View Demo

Performance

The CollectionView class is highly optimized. It sorts, filters, groups, and paginates large data sets efficiently in virtually every situation.

Improve performance even more by using the deferUpdate method to suspend refreshes while performing batch operations.This is especially important when adding items to collections that are sorted, grouped, or filtered. Without deferred updates, each addition causes a refresh.

Data Providers

The CollectionView class relies on a sourceCollection that contains an array of data items. This collection is typically populated with HTTP requests that retrieve data from a server.

In some cases, it may be advantageous to extend the CollectionView class in order to take advantage of functionality exposed by the server. See Data Extensions for more information.

Data Provider Demo