Arrays and CollectionViews

When you set the grid's itemsSource property to a regular JavaScript array, it automatically creates an internal CollectionView and uses that as a data source so that it can provide sorting and editing features without forcing you to create a CollectionView yourself.

This internal view is exposed by the grid's collectionView property, and you can use it in case you need the extra functionality yourself.

For example, the grid below is bound to a regular array, and the grid's collectionView property is used to show the currently selected item:

Country: US, Sales: $1,480 Expenses: $2,621

Country

Sales

Expenses

Germany

6,518.40

1,070.18

Greece

1,466.03

620.33

Italy

9,953.37

248.53

Japan

9,847.72

694.78

9,041.68

2,478.32

1,480.20

2,620.62

// This file locates: "Scripts/Lesson/C1FlexGrid/CollectionView.js".
c1.documentReady(function () {
    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.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
        });
    }
 
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.itemsSource = data;
 
    // show the current item
    var selItemElement = document.getElementById('selectedItem');
    function updateCurrentInfo() {
        selItemElement.innerHTML = wijmo.format(
            'Country: <b>{country}</b>, Sales: <b>{sales:c0}</b> Expenses: <b>{expenses:c0}</b>',
          theGrid.collectionView.currentItem);
    }
 
    // update current item now and when the grid selection changes
    updateCurrentInfo();
    theGrid.collectionView.currentChanged.addHandler(updateCurrentInfo);
 
    // sort the data by country
    var sd = new wijmo.collections.SortDescription('country', true);
    theGrid.collectionView.sortDescriptions.push(sd);
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: CollectionView
        public ActionResult CollectionView()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1FlexGrid.CollectionView_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.CollectionView_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CollectionView_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CollectionView_Text3)
</p>
<div id="selectedItem"></div>
@(Html.C1().FlexGrid().Id("theGrid")
    .AllowSorting(false)
    .ShowSort(false)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("country").Header("Country");
        cs.Add().Binding("sales").Header("Sales").Format("n2");
        cs.Add().Binding("expenses").Header("Expenses").Format("n2");
    })
)