Loading Data

Loading data into a CollectionView is straightforward.

Loading on the Client

If you already have the data in an array, you can use that array as a constructor parameter, or set the sourceCollection property to that array:

Austria sales: 448.95 (id: 5)
Germany sales: 3,638.67 (id: 1)
Italy sales: 6,512.70 (id: 4)
Japan sales: 8,205.44 (id: 3)
UK sales: 9,009.89 (id: 2)
US sales: 9,186.87 (id: 0)

Loading from the Server

If the data is on a server, you can retrieve it by using the httpRequest method. When you get a response from the server, set the sourceCollection array to the response value or append new data to the sourceCollection array:

Construct in Server

The server side CollectionViewService control constructs a client side CollectionView instance. You can get the instance by c1.getService method.

US sales: 81,732.54 (id: 0)
Germany sales: 20,603.32 (id: 1)
UK sales: 44,217.79 (id: 2)
Japan sales: 29,190.63 (id: 3)
Italy sales: 46,951.19 (id: 4)
Greece sales: 86,237.02 (id: 5)

If your data service API supports commands such as filtering, sorting, and paging, you can add parameters to your httpRequest calls to support these features. You can even encapsulate the server API into a custom class that extends CollectionView.

// This file locates: "Scripts/Lesson/C1Mvc/CVLoadingData.js".
c1.documentReady(function () {
    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Austria'.split(',');
    var data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            id: i,
            country: countries[i],
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
 
    // create a CollectionView based on the array
    var view = new wijmo.collections.CollectionView(data, {
        sortDescriptions: ['country'] // sort by country
    });
 
    // same thing, a little more verbose:
    //var view = new wijmo.collections.CollectionView();
    //view.sourceCollection = data;
    //view.sortDescriptions.push(new wijmo.collections.SortDescription('country', true));
 
    // show the CollectionView
    var firstList = document.getElementById('firstList');
    view.items.forEach(function (item) {
        var html = wijmo.format('<li><b>{country}</b> sales: {sales:n2} (id: {id})</li>', item);
        firstList.appendChild(wijmo.createElement(html));
    });
 
    // create a second, empty CollectionView
    var secondView = new wijmo.collections.CollectionView();
    secondView.collectionChanged.addHandler(function () {
 
        // show the second view's data
        var secondList = document.getElementById('secondList');
        secondList.innerHTML = '';
        secondView.items.forEach(function (item) {
            var html = wijmo.format('<li>{CategoryID} <b>{CategoryName}</b> {Description}</li>', item);
            secondList.appendChild(wijmo.createElement(html));
        });
    });
 
    // populate it with data from a server
    var url = 'https://services.odata.org/Northwind/Northwind.svc/Categories';
    var params = {
        $format: 'json',
        $select: 'CategoryID,CategoryName,Description'
    };
    wijmo.httpRequest(url, {
        data: params,
        success: function (xhr) {
 
            // got the data, assign it to the CollectionView
            var response = JSON.parse(xhr.response);
            var data = response.d ? response.d.results : response.value;
 
            // use the result as the sourceCollection
            secondView.sourceCollection = data;
 
            // append results to the sourceCollection
            // in case you want to load data in parts
            //secondView.deferUpdate(function () {
            //  data.forEach(function(item) {
            //      secondView.sourceCollection.push(item);
            //  });
            //});
        }
    });
 
    // get and show the CollectionViewService
    var service = c1.getService("collectionView");
    var thirdList = document.getElementById('thirdList');
    service.items.forEach(function (item) {
        var html = wijmo.format('<li><b>{Country}</b> sales: {Sales:n2} (id: {Id})</li>', item);
        thirdList.appendChild(wijmo.createElement(html));
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: CVLoadingData
        public ActionResult CVLoadingData()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Mvc.CVLoadingData_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Mvc.CVLoadingData_Text1)
</p>
 
<h3>
    @Html.Raw(Resources.C1Mvc.CVLoadingData_Title1)
</h3>
<p>
    @Html.Raw(Resources.C1Mvc.CVLoadingData_Text2)
</p>
<ul id="firstList"></ul>
 
<h3>
    @Html.Raw(Resources.C1Mvc.CVLoadingData_Title2)
</h3>
<p>
    @Html.Raw(Resources.C1Mvc.CVLoadingData_Text3)
</p>
<ul id="secondList"></ul>
 
<h3>@Html.Raw(Resources.C1Mvc.CVLoadingData_Title3)</h3>
<p>
    @Html.Raw(Resources.C1Mvc.CVLoadingData_Text4)
</p>
@Html.C1().CollectionViewService().Id("collectionView").Bind(Model)
<ul id="thirdList"></ul>
 
<p>
    @Html.Raw(Resources.C1Mvc.CVLoadingData_Text5)
</p>