FlexGrid Architecture

FlexGrid displays data in a tabular form and allows users to edit it or modify the views by sorting, filtering, and grouping it.

Like all other CMVC controls, the grid delegates all data-related tasks to the CollectionView class.

When you set the itemsSource property of grid to an array, or ObservableArray, the grid automatically creates a CollectionView instance to wrap the original array. This CollectionView can be accessed through the collectionView property.

For example, the grids below are bound to the same data array. Each one has its own internal CollectionView, so they can be sorted, filtered, and grouped independently. The current item (associated with the grid selection) is also independent:

Id
Country
Active
Downloads
Sales
Expenses
0
US
31,208
74,018.63
27,688.30
1
Germany
151,398
29,808.12
29,271.64
2
UK
119,225
45,783.76
22,793.07
3
Japan
197,580
28,430.54
18,688.17
4
Italy
124,747
95,014.12
45,502.81
5
Greece
165,799
8,888.01
28,552.18
6
China
159,968
49,867.87
5,282.88
7
Spain
97,698
56,659.20
43,883.50
8
Sweden
129,004
58,234.58
9,834.40
9
Norway
80,660
44,587.40
46,900.49
10
Denmark
194,127
75,241.22
23,680.37
11
Finland
47,093
26,555.26
38,042.29
Id
Country
Active
Downloads
Sales
Expenses
0
US
31,208
74,018.63
27,688.30
1
Germany
151,398
29,808.12
29,271.64
2
UK
119,225
45,783.76
22,793.07
3
Japan
197,580
28,430.54
18,688.17
4
Italy
124,747
95,014.12
45,502.81
5
Greece
165,799
8,888.01
28,552.18
6
China
159,968
49,867.87
5,282.88
7
Spain
97,698
56,659.20
43,883.50
8
Sweden
129,004
58,234.58
9,834.40
9
Norway
80,660
44,587.40
46,900.49
10
Denmark
194,127
75,241.22
23,680.37
11
Finland
47,093
26,555.26
38,042.29

By contrast, the two grids below are bound to the same CollectionView. Because of this, they show the same view. Sorting, filtering, or selecting on one grid affects the other.

Id
Country
Active
Downloads
Sales
Expenses
0
US
31,208
74,018.63
27,688.30
1
Germany
151,398
29,808.12
29,271.64
2
UK
119,225
45,783.76
22,793.07
3
Japan
197,580
28,430.54
18,688.17
4
Italy
124,747
95,014.12
45,502.81
5
Greece
165,799
8,888.01
28,552.18
6
China
159,968
49,867.87
5,282.88
7
Spain
97,698
56,659.20
43,883.50
8
Sweden
129,004
58,234.58
9,834.40
9
Norway
80,660
44,587.40
46,900.49
10
Denmark
194,127
75,241.22
23,680.37
11
Finland
47,093
26,555.26
38,042.29
Id
Country
Active
Downloads
Sales
Expenses
0
US
31,208
74,018.63
27,688.30
1
Germany
151,398
29,808.12
29,271.64
2
UK
119,225
45,783.76
22,793.07
3
Japan
197,580
28,430.54
18,688.17
4
Italy
124,747
95,014.12
45,502.81
5
Greece
165,799
8,888.01
28,552.18
6
China
159,968
49,867.87
5,282.88
7
Spain
97,698
56,659.20
43,883.50
8
Sweden
129,004
58,234.58
9,834.40
9
Norway
80,660
44,587.40
46,900.49
10
Denmark
194,127
75,241.22
23,680.37
11
Finland
47,093
26,555.26
38,042.29

Observe how sorting, filtering, and selection applied to the common view is also reflected on other controls such as ListBox:

US
Germany
UK
Japan
Italy
Greece
China
Spain
Sweden
Norway
Denmark
Finland
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// This file locates: "Scripts/Lesson/C1FlexGrid/Architecture.js".
c1.documentReady(function () {
    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece,China,Spain,Sweden,Norway,Denmark,Finland'.split(','),
      data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            id: i,
            country: countries[i],
            active: i % 5 != 0,
            downloads: Math.round(Math.random() * 200000),
            sales: Math.random() * 100000,
            expenses: Math.random() * 50000
        });
    }
 
    // bind two grids to the same array
    // each shows an independent view of the same data
    var gridArray1 = wijmo.Control.getControl('#gridArray1');
    var gridArray2 = wijmo.Control.getControl('#gridArray2');
    gridArray1.itemsSource = data;
    gridArray2.itemsSource = data;
 
    // bind two grids to the same CollectionView
    // both share the same view (sorting, filtering, selection, etc)
    var view = new wijmo.collections.CollectionView(data);
    var gridCv1 = wijmo.Control.getControl('#gridCv1');
    var gridCv2 = wijmo.Control.getControl('#gridCv2');
    gridCv1.itemsSource = view;
    gridCv2.itemsSource = view;
 
    // bind a ListBox to the same view
    var listBox = wijmo.Control.getControl('#listBox');
    listBox.itemsSource = view;
    listBox.displayMemberPath='country';
 
    // add filters to all grids on the page
    var grids = document.querySelectorAll('.wj-flexgrid');
    for (var i = 0; i < grids.length; i++) {
        var grid = wijmo.Control.getControl(grids[i]);
        var filter = new wijmo.grid.filter.FlexGridFilter(grid);
    }
});
1
2
3
4
5
// This file locates: "Content/css/Lesson/C1FlexGrid/Architecture.css".
.wj-flexgrid, .wj-listbox {
  max-height: 200px;
  margin-bottom: 12px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: Architecture
        public ActionResult Architecture()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Architecture_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Architecture_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Architecture_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Architecture_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Architecture_Text4)
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        @Html.C1().FlexGrid().Id("gridArray1")
    </div>
    <div class="col-xs-6">
        @Html.C1().FlexGrid().Id("gridArray2")
    </div>
</div>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.Architecture_Text5)
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        @Html.C1().FlexGrid().Id("gridCv1")
    </div>
    <div class="col-xs-6">
        @Html.C1().FlexGrid().Id("gridCv2")
    </div>
</div>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.Architecture_Text6)
</p>
@Html.C1().ListBox().Id("listBox")