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
30,746
28,905.07
21,727.51
1
Germany
77,684
31,808.21
38,164.01
2
UK
32,063
94,852.48
13,259.75
3
Japan
93,151
55,503.59
37,710.75
4
Italy
182,679
34,523.98
3,858.18
5
Greece
83,350
2,844.22
36,316.73
6
China
154,913
96,002.43
7,668.48
7
Spain
76,347
68,233.39
8,512.41
8
Sweden
126,422
37,867.95
6,249.02
9
Norway
40,908
7,119.80
49,348.53
10
Denmark
58,458
80,982.31
16,766.37
11
Finland
70,503
18,679.17
2,711.30
Id
Country
Active
Downloads
Sales
Expenses
0
US
30,746
28,905.07
21,727.51
1
Germany
77,684
31,808.21
38,164.01
2
UK
32,063
94,852.48
13,259.75
3
Japan
93,151
55,503.59
37,710.75
4
Italy
182,679
34,523.98
3,858.18
5
Greece
83,350
2,844.22
36,316.73
6
China
154,913
96,002.43
7,668.48
7
Spain
76,347
68,233.39
8,512.41
8
Sweden
126,422
37,867.95
6,249.02
9
Norway
40,908
7,119.80
49,348.53
10
Denmark
58,458
80,982.31
16,766.37
11
Finland
70,503
18,679.17
2,711.30

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
30,746
28,905.07
21,727.51
1
Germany
77,684
31,808.21
38,164.01
2
UK
32,063
94,852.48
13,259.75
3
Japan
93,151
55,503.59
37,710.75
4
Italy
182,679
34,523.98
3,858.18
5
Greece
83,350
2,844.22
36,316.73
6
China
154,913
96,002.43
7,668.48
7
Spain
76,347
68,233.39
8,512.41
8
Sweden
126,422
37,867.95
6,249.02
9
Norway
40,908
7,119.80
49,348.53
10
Denmark
58,458
80,982.31
16,766.37
11
Finland
70,503
18,679.17
2,711.30
Id
Country
Active
Downloads
Sales
Expenses
0
US
30,746
28,905.07
21,727.51
1
Germany
77,684
31,808.21
38,164.01
2
UK
32,063
94,852.48
13,259.75
3
Japan
93,151
55,503.59
37,710.75
4
Italy
182,679
34,523.98
3,858.18
5
Greece
83,350
2,844.22
36,316.73
6
China
154,913
96,002.43
7,668.48
7
Spain
76,347
68,233.39
8,512.41
8
Sweden
126,422
37,867.95
6,249.02
9
Norway
40,908
7,119.80
49,348.53
10
Denmark
58,458
80,982.31
16,766.37
11
Finland
70,503
18,679.17
2,711.30

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