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
173,014
86,864.50
30,425.30
1
Germany
127,747
96,402.17
13,685.11
2
UK
156,228
83,150.94
30,903.77
3
Japan
75,967
10,011.35
26,617.99
4
Italy
130,886
55,532.20
43,055.93
5
Greece
99,237
78,124.73
27,619.83
6
China
39,130
79,697.94
46,022.96
7
Spain
2,637
92,012.57
47,050.84
8
Sweden
118,841
29,786.30
43,882.79
9
Norway
147,356
71,861.58
1,950.76
10
Denmark
17,583
30,407.87
15,545.83
11
Finland
184,990
90,630.08
5,088.32
Id
Country
Active
Downloads
Sales
Expenses
0
US
173,014
86,864.50
30,425.30
1
Germany
127,747
96,402.17
13,685.11
2
UK
156,228
83,150.94
30,903.77
3
Japan
75,967
10,011.35
26,617.99
4
Italy
130,886
55,532.20
43,055.93
5
Greece
99,237
78,124.73
27,619.83
6
China
39,130
79,697.94
46,022.96
7
Spain
2,637
92,012.57
47,050.84
8
Sweden
118,841
29,786.30
43,882.79
9
Norway
147,356
71,861.58
1,950.76
10
Denmark
17,583
30,407.87
15,545.83
11
Finland
184,990
90,630.08
5,088.32

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
173,014
86,864.50
30,425.30
1
Germany
127,747
96,402.17
13,685.11
2
UK
156,228
83,150.94
30,903.77
3
Japan
75,967
10,011.35
26,617.99
4
Italy
130,886
55,532.20
43,055.93
5
Greece
99,237
78,124.73
27,619.83
6
China
39,130
79,697.94
46,022.96
7
Spain
2,637
92,012.57
47,050.84
8
Sweden
118,841
29,786.30
43,882.79
9
Norway
147,356
71,861.58
1,950.76
10
Denmark
17,583
30,407.87
15,545.83
11
Finland
184,990
90,630.08
5,088.32
Id
Country
Active
Downloads
Sales
Expenses
0
US
173,014
86,864.50
30,425.30
1
Germany
127,747
96,402.17
13,685.11
2
UK
156,228
83,150.94
30,903.77
3
Japan
75,967
10,011.35
26,617.99
4
Italy
130,886
55,532.20
43,055.93
5
Greece
99,237
78,124.73
27,619.83
6
China
39,130
79,697.94
46,022.96
7
Spain
2,637
92,012.57
47,050.84
8
Sweden
118,841
29,786.30
43,882.79
9
Norway
147,356
71,861.58
1,950.76
10
Denmark
17,583
30,407.87
15,545.83
11
Finland
184,990
90,630.08
5,088.32

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")