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
176,008
83,447.13
44,029.80
1
Germany
65,050
40,874.25
45,415.32
2
UK
167,937
2,995.80
38,384.56
3
Japan
56,587
35,629.72
17,385.03
4
Italy
27,267
17,072.84
7,394.80
5
Greece
199,303
48,027.96
41,580.15
6
China
105,022
77,698.51
12,615.89
7
Spain
170,404
27,792.24
14,422.87
8
Sweden
155,337
23,829.79
11,955.02
9
Norway
3,796
8,216.78
6,103.36
10
Denmark
133,188
65,609.67
3,847.38
11
Finland
26,639
50,501.09
24,234.92
Id
Country
Active
Downloads
Sales
Expenses
0
US
176,008
83,447.13
44,029.80
1
Germany
65,050
40,874.25
45,415.32
2
UK
167,937
2,995.80
38,384.56
3
Japan
56,587
35,629.72
17,385.03
4
Italy
27,267
17,072.84
7,394.80
5
Greece
199,303
48,027.96
41,580.15
6
China
105,022
77,698.51
12,615.89
7
Spain
170,404
27,792.24
14,422.87
8
Sweden
155,337
23,829.79
11,955.02
9
Norway
3,796
8,216.78
6,103.36
10
Denmark
133,188
65,609.67
3,847.38
11
Finland
26,639
50,501.09
24,234.92

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
176,008
83,447.13
44,029.80
1
Germany
65,050
40,874.25
45,415.32
2
UK
167,937
2,995.80
38,384.56
3
Japan
56,587
35,629.72
17,385.03
4
Italy
27,267
17,072.84
7,394.80
5
Greece
199,303
48,027.96
41,580.15
6
China
105,022
77,698.51
12,615.89
7
Spain
170,404
27,792.24
14,422.87
8
Sweden
155,337
23,829.79
11,955.02
9
Norway
3,796
8,216.78
6,103.36
10
Denmark
133,188
65,609.67
3,847.38
11
Finland
26,639
50,501.09
24,234.92
Id
Country
Active
Downloads
Sales
Expenses
0
US
176,008
83,447.13
44,029.80
1
Germany
65,050
40,874.25
45,415.32
2
UK
167,937
2,995.80
38,384.56
3
Japan
56,587
35,629.72
17,385.03
4
Italy
27,267
17,072.84
7,394.80
5
Greece
199,303
48,027.96
41,580.15
6
China
105,022
77,698.51
12,615.89
7
Spain
170,404
27,792.24
14,422.87
8
Sweden
155,337
23,829.79
11,955.02
9
Norway
3,796
8,216.78
6,103.36
10
Denmark
133,188
65,609.67
3,847.38
11
Finland
26,639
50,501.09
24,234.92

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