FlexGrid

FlexGrid allows you to visualize and edit tabular data. It provides a variety of options about how to present and perform operations over the data, including selection, sorting, filtering, grouping, paging, editing, formatting, etc.

Populate the FlexGrid by setting its itemsSource property to an array containing regular JavaScript objects. The grid will automatically generate columns to display the data items, and will allow users to select, sort, and edit the data.

Id
Country
Active
Downloads
Sales
Expenses
0
US
198,564
23,083.91
45,170.96
1
Germany
74,853
23,711.50
31,110.01
2
UK
84,241
85,456.17
38,770.02
3
Japan
118,763
65,662.71
15,975.42
4
Italy
11,546
986.10
1,084.29
5
Greece
175,237
70,984.95
10,118.03
6
US
112,633
63,724.71
49,368.85
7
Germany
22,221
25,301.69
10,664.30
8
UK
183,921
1,941.42
44,701.55
9
Japan
78,704
49,204.21
22,985.57
10
Italy
111,366
86,388.49
24,577.34
11
Greece
69,491
77,218.26
29,699.05
12
US
74,974
51,890.75
49,545.34
13
Germany
51,121
25,908.24
8,787.93
14
UK
57,738
42,319.54
2,675.02
15
Japan
26,756
51,726.56
38,578.45
16
Italy
159,946
73,223.97
26,276.42
17
Greece
82,267
85,906.04
40,217.92
18
US
59,578
5,077.79
47,089.13
19
Germany
92,325
39,044.27
18,045.77
20
UK
156,043
18,906.61
3,499.05
21
Japan
64,797
18,130.45
10,248.59
22
Italy
1,376
48,510.94
38,862.11
23
Greece
123,596
37,269.34
49,532.36
24
US
7,919
75,792.24
20,605.68
25
Germany
197,284
47,224.57
22,815.79
26
UK
4,957
33,982.15
39,421.38
27
Japan
161,915
80,723.62
4,686.87
28
Italy
65,365
2,112.58
6,079.40
29
Greece
20,797
35,542.90
33,692.98
30
US
117,062
4,206.31
33,493.28
31
Germany
136,968
8,451.36
49,290.43
32
UK
197,204
80,865.98
28,311.13
33
Japan
82,370
30,831.27
38,218.30
34
Italy
61,098
9,209.01
26,994.65
35
Greece
27,657
4,178.20
28,494.60
36
US
3,364
56,670.71
24,526.85
37
Germany
197,809
27,318.50
22,271.29
38
UK
157,844
88,730.26
46,638.21
39
Japan
15,665
68,738.82
5,367.12
40
Italy
98,637
84,990.62
49,793.39
41
Greece
182,655
87,043.50
19,505.82
42
US
108,275
5,464.78
34,610.99
43
Germany
168,445
6,934.36
23,230.96
44
UK
11,054
14,375.15
43,017.66
45
Japan
123,587
12,844.63
10,199.90
46
Italy
187,070
4,264.87
46,764.92
47
Greece
182,593
26,024.40
34,597.94
48
US
179,245
72,519.95
48,889.38
49
Germany
133,226
51,864.82
5,052.22
50
UK
5,589
88,248.46
21,888.87
51
Japan
143,423
48,610.71
25,001.71
52
Italy
35,383
91,791.42
18,102.73
53
Greece
154,403
91,255.28
15,592.32
54
US
40,764
54,697.18
46,402.33
55
Germany
193,806
69,523.23
38,501.34
56
UK
128,091
2,162.91
45,060.00
57
Japan
44,541
1,024.27
23,266.53
58
Italy
169,968
74,966.57
11,518.49
59
Greece
14,624
66,449.28
48,125.36
60
US
123,685
98,548.38
49,085.07
61
Germany
176,435
75,022.43
48,988.69
62
UK
26,746
96,751.88
30,433.69
63
Japan
149,737
21,851.98
29,002.00
64
Italy
150,949
91,749.61
42,883.45
65
Greece
72,439
47,327.82
12,023.76
66
US
65,767
29,351.49
43,193.06
67
Germany
48,112
5,248.84
23,827.29
68
UK
180,710
88,447.84
28,929.34
69
Japan
117,562
73,168.87
5,001.62
70
Italy
130,896
53,594.90
19,683.29
71
Greece
3,882
11,972.95
36,134.30
72
US
6,425
83,593.56
40,272.33
73
Germany
61,745
20,661.45
39,846.87
74
UK
89,507
33,721.41
1,877.00
75
Japan
18,594
20,477.18
28,082.76
76
Italy
190,315
79,296.36
40,658.40
77
Greece
130,823
43,831.80
25,187.93
78
US
1,676
30,024.38
7,723.71
79
Germany
69,092
48,860.38
6,918.73
80
UK
167,460
31,041.76
45,020.92
81
Japan
76,327
90,851.67
6,185.70
82
Italy
111,286
77,932.02
12,076.76
83
Greece
124,616
15,296.60
24,765.66
84
US
123,408
88,058.15
4,898.01
85
Germany
132,842
75,140.45
29,925.46
86
UK
92,367
67,753.20
33,255.60
87
Japan
177,784
53,123.19
46,931.31
88
Italy
194,739
93,611.24
42,928.47
89
Greece
45,885
22,454.68
19,609.39
90
US
88,657
74,356.39
44,396.75
91
Germany
113,357
80,510.85
6,111.84
92
UK
33,041
66,179.02
42,023.51
93
Japan
169,871
55,910.04
34,472.60
94
Italy
29,582
71,175.62
34,724.28
95
Greece
109,112
62,327.64
27,215.99
96
US
38,565
88,711.34
43,002.08
97
Germany
174,107
44,345.55
27,837.71
98
UK
151,700
48,040.80
23,189.32
99
Japan
104,206
27,203.99
15,636.62
100
Italy
194,286
22,871.78
25,113.69
101
Greece
20,542
87,960.39
9,137.74
102
US
110,435
87,374.48
11,290.15
103
Germany
49,169
75,567.71
8,724.75
104
UK
194,917
93,636.28
26,762.44
105
Japan
15,321
42,356.38
35,769.11
106
Italy
196,206
88,807.51
44,140.30
107
Greece
109,843
67,491.23
13,045.32
108
US
46,780
95,887.79
35,785.63
109
Germany
6,269
9,390.39
29,338.16
110
UK
179,684
61,151.78
36,414.79
111
Japan
27,037
87,590.52
410.11
112
Italy
152,852
92,967.89
26,075.96
113
Greece
193,977
96,046.84
33,980.06
114
US
155,930
6,313.72
27,232.37
115
Germany
26,996
1,792.24
29,632.11
116
UK
103,972
73,451.98
21,224.98
117
Japan
171,592
47,155.08
14,539.06
118
Italy
131,445
81,472.13
21,873.95
119
Greece
185,868
97,702.04
47,488.54
120
US
123,421
24,232.30
30,578.36
121
Germany
52,492
60,833.00
12,645.84
122
UK
82,511
73,828.60
48,994.63
123
Japan
193,845
29,841.43
13,734.29
124
Italy
158,484
31,803.86
2,250.42
125
Greece
99,211
61,953.83
24,878.98
126
US
163,167
16,413.60
28,494.63
127
Germany
197,417
96,081.55
19,821.90
128
UK
27,857
62,896.25
5,342.47
129
Japan
165,535
9,946.03
21,743.69
130
Italy
70,966
68,480.21
42,501.34
131
Greece
75,042
32,799.37
40,056.09
132
US
155,049
69,598.08
9,087.93
133
Germany
160,048
43,798.16
448.80
134
UK
118,623
782.88
25,156.12
135
Japan
89,578
59,149.97
5,343.74
136
Italy
81,646
65,133.20
36,185.15
137
Greece
184,617
23,697.60
303.90
138
US
59,443
67,393.68
21,669.24
139
Germany
17,739
61,507.56
6,317.38
140
UK
10,281
32,959.97
21,193.20
141
Japan
25,346
73,090.17
4,195.73
142
Italy
88,918
63,734.91
30,449.88
143
Greece
11,775
56,085.91
2,081.69
144
US
82,361
61,781.55
38,422.75
145
Germany
87,004
2,270.10
2,616.19
146
UK
41,237
72,982.38
34,873.77
147
Japan
19,278
86,213.08
28,130.52
148
Italy
98,846
74,286.09
36,613.87
149
Greece
109,997
90,969.10
22,326.34
150
US
176,190
76,445.87
49,546.91
151
Germany
134,729
58,212.72
48,184.36
152
UK
132,436
77,164.12
38,124.58
153
Japan
103,326
96,781.67
32,178.97
154
Italy
147,456
84,207.41
46,828.32
155
Greece
62,910
74,397.42
1,981.52
156
US
6,196
31,249.43
31,144.38
157
Germany
157,551
40,214.51
45,886.36
158
UK
167,060
30,372.98
8,411.14
159
Japan
65,411
35,911.85
49,633.82
160
Italy
139,200
93,233.84
35,586.54
161
Greece
196,154
15,780.31
23,081.00
162
US
66,487
25,481.42
21,463.45
163
Germany
66,350
24,751.15
12,077.42
164
UK
197,523
65,897.05
8,086.24
165
Japan
94,755
51,565.56
48,611.92
166
Italy
144,428
6,609.96
898.53
167
Greece
25,390
3,901.46
47,280.17
168
US
187,685
10,635.04
39,115.70
169
Germany
64,119
45,466.00
27,288.02
170
UK
138,755
98,662.14
2,839.49
171
Japan
5,808
66,315.63
33,603.30
172
Italy
56,030
6,786.68
42,189.45
173
Greece
153,774
82,304.73
27,339.04
174
US
132,821
57,616.39
38,901.99
175
Germany
136,544
14,755.04
4,909.49
176
UK
140,788
22,981.08
25,585.83
177
Japan
172,022
14,967.44
40,428.26
178
Italy
23,768
69,950.61
4,586.60
179
Greece
46,215
62,413.41
33,545.42
180
US
97,116
35,681.12
8,387.16
181
Germany
58,120
91,549.44
34,653.87
182
UK
12,985
11,674.37
19,306.25
183
Japan
19,323
32,777.96
44,325.84
184
Italy
97,505
59,863.48
1,802.54
185
Greece
43,941
36,792.45
4,798.18
186
US
42,549
49,066.52
43,600.15
187
Germany
57,049
60,832.27
49,571.63
188
UK
33,342
56,616.38
18,828.22
189
Japan
141,629
96,299.02
21,519.58
190
Italy
174,017
34,325.98
29,455.19
191
Greece
7,818
42,350.83
32,416.12
192
US
129,611
5,956.20
21,275.49
193
Germany
124,298
47,703.12
41,772.65
194
UK
52,245
81,976.80
13,248.56
195
Japan
7,292
84,780.75
26,824.11
196
Italy
184,291
85,752.31
45,095.20
197
Greece
90,139
47,636.91
8,490.65
198
US
57,702
8,666.95
43,690.98
199
Germany
189,770
58,847.52
19,868.08

You can customize the grid columns by setting the autoGenerateColumns property to false and populating the columns property in code.

Country
Downloads (k)
Sales (k)
Expenses (k)
US
198.6
23.1
$45.2
Germany
74.9
23.7
$31.1
UK
84.2
85.5
$38.8
Japan
118.8
65.7
$16.0
Italy
11.5
1.0
$1.1
Greece
175.2
71.0
$10.1
US
112.6
63.7
$49.4
Germany
22.2
25.3
$10.7
UK
183.9
1.9
$44.7
Japan
78.7
49.2
$23.0
Italy
111.4
86.4
$24.6
Greece
69.5
77.2
$29.7
US
75.0
51.9
$49.5
Germany
51.1
25.9
$8.8
UK
57.7
42.3
$2.7
Japan
26.8
51.7
$38.6
Italy
159.9
73.2
$26.3
Greece
82.3
85.9
$40.2
US
59.6
5.1
$47.1
Germany
92.3
39.0
$18.0
UK
156.0
18.9
$3.5
Japan
64.8
18.1
$10.2
Italy
1.4
48.5
$38.9
Greece
123.6
37.3
$49.5
US
7.9
75.8
$20.6
Germany
197.3
47.2
$22.8
UK
5.0
34.0
$39.4
Japan
161.9
80.7
$4.7
Italy
65.4
2.1
$6.1
Greece
20.8
35.5
$33.7
US
117.1
4.2
$33.5
Germany
137.0
8.5
$49.3
UK
197.2
80.9
$28.3
Japan
82.4
30.8
$38.2
Italy
61.1
9.2
$27.0
Greece
27.7
4.2
$28.5
US
3.4
56.7
$24.5
Germany
197.8
27.3
$22.3
UK
157.8
88.7
$46.6
Japan
15.7
68.7
$5.4
Italy
98.6
85.0
$49.8
Greece
182.7
87.0
$19.5
US
108.3
5.5
$34.6
Germany
168.4
6.9
$23.2
UK
11.1
14.4
$43.0
Japan
123.6
12.8
$10.2
Italy
187.1
4.3
$46.8
Greece
182.6
26.0
$34.6
US
179.2
72.5
$48.9
Germany
133.2
51.9
$5.1
UK
5.6
88.2
$21.9
Japan
143.4
48.6
$25.0
Italy
35.4
91.8
$18.1
Greece
154.4
91.3
$15.6
US
40.8
54.7
$46.4
Germany
193.8
69.5
$38.5
UK
128.1
2.2
$45.1
Japan
44.5
1.0
$23.3
Italy
170.0
75.0
$11.5
Greece
14.6
66.4
$48.1
US
123.7
98.5
$49.1
Germany
176.4
75.0
$49.0
UK
26.7
96.8
$30.4
Japan
149.7
21.9
$29.0
Italy
150.9
91.7
$42.9
Greece
72.4
47.3
$12.0
US
65.8
29.4
$43.2
Germany
48.1
5.2
$23.8
UK
180.7
88.4
$28.9
Japan
117.6
73.2
$5.0
Italy
130.9
53.6
$19.7
Greece
3.9
12.0
$36.1
US
6.4
83.6
$40.3
Germany
61.7
20.7
$39.8
UK
89.5
33.7
$1.9
Japan
18.6
20.5
$28.1
Italy
190.3
79.3
$40.7
Greece
130.8
43.8
$25.2
US
1.7
30.0
$7.7
Germany
69.1
48.9
$6.9
UK
167.5
31.0
$45.0
Japan
76.3
90.9
$6.2
Italy
111.3
77.9
$12.1
Greece
124.6
15.3
$24.8
US
123.4
88.1
$4.9
Germany
132.8
75.1
$29.9
UK
92.4
67.8
$33.3
Japan
177.8
53.1
$46.9
Italy
194.7
93.6
$42.9
Greece
45.9
22.5
$19.6
US
88.7
74.4
$44.4
Germany
113.4
80.5
$6.1
UK
33.0
66.2
$42.0
Japan
169.9
55.9
$34.5
Italy
29.6
71.2
$34.7
Greece
109.1
62.3
$27.2
US
38.6
88.7
$43.0
Germany
174.1
44.3
$27.8
UK
151.7
48.0
$23.2
Japan
104.2
27.2
$15.6
Italy
194.3
22.9
$25.1
Greece
20.5
88.0
$9.1
US
110.4
87.4
$11.3
Germany
49.2
75.6
$8.7
UK
194.9
93.6
$26.8
Japan
15.3
42.4
$35.8
Italy
196.2
88.8
$44.1
Greece
109.8
67.5
$13.0
US
46.8
95.9
$35.8
Germany
6.3
9.4
$29.3
UK
179.7
61.2
$36.4
Japan
27.0
87.6
$0.4
Italy
152.9
93.0
$26.1
Greece
194.0
96.0
$34.0
US
155.9
6.3
$27.2
Germany
27.0
1.8
$29.6
UK
104.0
73.5
$21.2
Japan
171.6
47.2
$14.5
Italy
131.4
81.5
$21.9
Greece
185.9
97.7
$47.5
US
123.4
24.2
$30.6
Germany
52.5
60.8
$12.6
UK
82.5
73.8
$49.0
Japan
193.8
29.8
$13.7
Italy
158.5
31.8
$2.3
Greece
99.2
62.0
$24.9
US
163.2
16.4
$28.5
Germany
197.4
96.1
$19.8
UK
27.9
62.9
$5.3
Japan
165.5
9.9
$21.7
Italy
71.0
68.5
$42.5
Greece
75.0
32.8
$40.1
US
155.0
69.6
$9.1
Germany
160.0
43.8
$0.4
UK
118.6
0.8
$25.2
Japan
89.6
59.1
$5.3
Italy
81.6
65.1
$36.2
Greece
184.6
23.7
$0.3
US
59.4
67.4
$21.7
Germany
17.7
61.5
$6.3
UK
10.3
33.0
$21.2
Japan
25.3
73.1
$4.2
Italy
88.9
63.7
$30.4
Greece
11.8
56.1
$2.1
US
82.4
61.8
$38.4
Germany
87.0
2.3
$2.6
UK
41.2
73.0
$34.9
Japan
19.3
86.2
$28.1
Italy
98.8
74.3
$36.6
Greece
110.0
91.0
$22.3
US
176.2
76.4
$49.5
Germany
134.7
58.2
$48.2
UK
132.4
77.2
$38.1
Japan
103.3
96.8
$32.2
Italy
147.5
84.2
$46.8
Greece
62.9
74.4
$2.0
US
6.2
31.2
$31.1
Germany
157.6
40.2
$45.9
UK
167.1
30.4
$8.4
Japan
65.4
35.9
$49.6
Italy
139.2
93.2
$35.6
Greece
196.2
15.8
$23.1
US
66.5
25.5
$21.5
Germany
66.3
24.8
$12.1
UK
197.5
65.9
$8.1
Japan
94.8
51.6
$48.6
Italy
144.4
6.6
$0.9
Greece
25.4
3.9
$47.3
US
187.7
10.6
$39.1
Germany
64.1
45.5
$27.3
UK
138.8
98.7
$2.8
Japan
5.8
66.3
$33.6
Italy
56.0
6.8
$42.2
Greece
153.8
82.3
$27.3
US
132.8
57.6
$38.9
Germany
136.5
14.8
$4.9
UK
140.8
23.0
$25.6
Japan
172.0
15.0
$40.4
Italy
23.8
70.0
$4.6
Greece
46.2
62.4
$33.5
US
97.1
35.7
$8.4
Germany
58.1
91.5
$34.7
UK
13.0
11.7
$19.3
Japan
19.3
32.8
$44.3
Italy
97.5
59.9
$1.8
Greece
43.9
36.8
$4.8
US
42.5
49.1
$43.6
Germany
57.0
60.8
$49.6
UK
33.3
56.6
$18.8
Japan
141.6
96.3
$21.5
Italy
174.0
34.3
$29.5
Greece
7.8
42.4
$32.4
US
129.6
6.0
$21.3
Germany
124.3
47.7
$41.8
UK
52.2
82.0
$13.2
Japan
7.3
84.8
$26.8
Italy
184.3
85.8
$45.1
Greece
90.1
47.6
$8.5
US
57.7
8.7
$43.7
Germany
189.8
58.8
$19.9

You can customize the default features of grid by setting the properties such as selectionMode, allowSorting, allowDragging, isReadOnly and headersVisibility.

Id
Country
Active
Downloads
Sales
Expenses
0
US
198,564
23,083.91
45,170.96
1
Germany
74,853
23,711.50
31,110.01
2
UK
84,241
85,456.17
38,770.02
3
Japan
118,763
65,662.71
15,975.42
4
Italy
11,546
986.10
1,084.29
5
Greece
175,237
70,984.95
10,118.03
6
US
112,633
63,724.71
49,368.85
7
Germany
22,221
25,301.69
10,664.30
8
UK
183,921
1,941.42
44,701.55
9
Japan
78,704
49,204.21
22,985.57
10
Italy
111,366
86,388.49
24,577.34
11
Greece
69,491
77,218.26
29,699.05
12
US
74,974
51,890.75
49,545.34
13
Germany
51,121
25,908.24
8,787.93
14
UK
57,738
42,319.54
2,675.02
15
Japan
26,756
51,726.56
38,578.45
16
Italy
159,946
73,223.97
26,276.42
17
Greece
82,267
85,906.04
40,217.92
18
US
59,578
5,077.79
47,089.13
19
Germany
92,325
39,044.27
18,045.77
20
UK
156,043
18,906.61
3,499.05
21
Japan
64,797
18,130.45
10,248.59
22
Italy
1,376
48,510.94
38,862.11
23
Greece
123,596
37,269.34
49,532.36
24
US
7,919
75,792.24
20,605.68
25
Germany
197,284
47,224.57
22,815.79
26
UK
4,957
33,982.15
39,421.38
27
Japan
161,915
80,723.62
4,686.87
28
Italy
65,365
2,112.58
6,079.40
29
Greece
20,797
35,542.90
33,692.98
30
US
117,062
4,206.31
33,493.28
31
Germany
136,968
8,451.36
49,290.43
32
UK
197,204
80,865.98
28,311.13
33
Japan
82,370
30,831.27
38,218.30
34
Italy
61,098
9,209.01
26,994.65
35
Greece
27,657
4,178.20
28,494.60
36
US
3,364
56,670.71
24,526.85
37
Germany
197,809
27,318.50
22,271.29
38
UK
157,844
88,730.26
46,638.21
39
Japan
15,665
68,738.82
5,367.12
40
Italy
98,637
84,990.62
49,793.39
41
Greece
182,655
87,043.50
19,505.82
42
US
108,275
5,464.78
34,610.99
43
Germany
168,445
6,934.36
23,230.96
44
UK
11,054
14,375.15
43,017.66
45
Japan
123,587
12,844.63
10,199.90
46
Italy
187,070
4,264.87
46,764.92
47
Greece
182,593
26,024.40
34,597.94
48
US
179,245
72,519.95
48,889.38
49
Germany
133,226
51,864.82
5,052.22
50
UK
5,589
88,248.46
21,888.87
51
Japan
143,423
48,610.71
25,001.71
52
Italy
35,383
91,791.42
18,102.73
53
Greece
154,403
91,255.28
15,592.32
54
US
40,764
54,697.18
46,402.33
55
Germany
193,806
69,523.23
38,501.34
56
UK
128,091
2,162.91
45,060.00
57
Japan
44,541
1,024.27
23,266.53
58
Italy
169,968
74,966.57
11,518.49
59
Greece
14,624
66,449.28
48,125.36
60
US
123,685
98,548.38
49,085.07
61
Germany
176,435
75,022.43
48,988.69
62
UK
26,746
96,751.88
30,433.69
63
Japan
149,737
21,851.98
29,002.00
64
Italy
150,949
91,749.61
42,883.45
65
Greece
72,439
47,327.82
12,023.76
66
US
65,767
29,351.49
43,193.06
67
Germany
48,112
5,248.84
23,827.29
68
UK
180,710
88,447.84
28,929.34
69
Japan
117,562
73,168.87
5,001.62
70
Italy
130,896
53,594.90
19,683.29
71
Greece
3,882
11,972.95
36,134.30
72
US
6,425
83,593.56
40,272.33
73
Germany
61,745
20,661.45
39,846.87
74
UK
89,507
33,721.41
1,877.00
75
Japan
18,594
20,477.18
28,082.76
76
Italy
190,315
79,296.36
40,658.40
77
Greece
130,823
43,831.80
25,187.93
78
US
1,676
30,024.38
7,723.71
79
Germany
69,092
48,860.38
6,918.73
80
UK
167,460
31,041.76
45,020.92
81
Japan
76,327
90,851.67
6,185.70
82
Italy
111,286
77,932.02
12,076.76
83
Greece
124,616
15,296.60
24,765.66
84
US
123,408
88,058.15
4,898.01
85
Germany
132,842
75,140.45
29,925.46
86
UK
92,367
67,753.20
33,255.60
87
Japan
177,784
53,123.19
46,931.31
88
Italy
194,739
93,611.24
42,928.47
89
Greece
45,885
22,454.68
19,609.39
90
US
88,657
74,356.39
44,396.75
91
Germany
113,357
80,510.85
6,111.84
92
UK
33,041
66,179.02
42,023.51
93
Japan
169,871
55,910.04
34,472.60
94
Italy
29,582
71,175.62
34,724.28
95
Greece
109,112
62,327.64
27,215.99
96
US
38,565
88,711.34
43,002.08
97
Germany
174,107
44,345.55
27,837.71
98
UK
151,700
48,040.80
23,189.32
99
Japan
104,206
27,203.99
15,636.62
100
Italy
194,286
22,871.78
25,113.69
101
Greece
20,542
87,960.39
9,137.74
102
US
110,435
87,374.48
11,290.15
103
Germany
49,169
75,567.71
8,724.75
104
UK
194,917
93,636.28
26,762.44
105
Japan
15,321
42,356.38
35,769.11
106
Italy
196,206
88,807.51
44,140.30
107
Greece
109,843
67,491.23
13,045.32
108
US
46,780
95,887.79
35,785.63
109
Germany
6,269
9,390.39
29,338.16
110
UK
179,684
61,151.78
36,414.79
111
Japan
27,037
87,590.52
410.11
112
Italy
152,852
92,967.89
26,075.96
113
Greece
193,977
96,046.84
33,980.06
114
US
155,930
6,313.72
27,232.37
115
Germany
26,996
1,792.24
29,632.11
116
UK
103,972
73,451.98
21,224.98
117
Japan
171,592
47,155.08
14,539.06
118
Italy
131,445
81,472.13
21,873.95
119
Greece
185,868
97,702.04
47,488.54
120
US
123,421
24,232.30
30,578.36
121
Germany
52,492
60,833.00
12,645.84
122
UK
82,511
73,828.60
48,994.63
123
Japan
193,845
29,841.43
13,734.29
124
Italy
158,484
31,803.86
2,250.42
125
Greece
99,211
61,953.83
24,878.98
126
US
163,167
16,413.60
28,494.63
127
Germany
197,417
96,081.55
19,821.90
128
UK
27,857
62,896.25
5,342.47
129
Japan
165,535
9,946.03
21,743.69
130
Italy
70,966
68,480.21
42,501.34
131
Greece
75,042
32,799.37
40,056.09
132
US
155,049
69,598.08
9,087.93
133
Germany
160,048
43,798.16
448.80
134
UK
118,623
782.88
25,156.12
135
Japan
89,578
59,149.97
5,343.74
136
Italy
81,646
65,133.20
36,185.15
137
Greece
184,617
23,697.60
303.90
138
US
59,443
67,393.68
21,669.24
139
Germany
17,739
61,507.56
6,317.38
140
UK
10,281
32,959.97
21,193.20
141
Japan
25,346
73,090.17
4,195.73
142
Italy
88,918
63,734.91
30,449.88
143
Greece
11,775
56,085.91
2,081.69
144
US
82,361
61,781.55
38,422.75
145
Germany
87,004
2,270.10
2,616.19
146
UK
41,237
72,982.38
34,873.77
147
Japan
19,278
86,213.08
28,130.52
148
Italy
98,846
74,286.09
36,613.87
149
Greece
109,997
90,969.10
22,326.34
150
US
176,190
76,445.87
49,546.91
151
Germany
134,729
58,212.72
48,184.36
152
UK
132,436
77,164.12
38,124.58
153
Japan
103,326
96,781.67
32,178.97
154
Italy
147,456
84,207.41
46,828.32
155
Greece
62,910
74,397.42
1,981.52
156
US
6,196
31,249.43
31,144.38
157
Germany
157,551
40,214.51
45,886.36
158
UK
167,060
30,372.98
8,411.14
159
Japan
65,411
35,911.85
49,633.82
160
Italy
139,200
93,233.84
35,586.54
161
Greece
196,154
15,780.31
23,081.00
162
US
66,487
25,481.42
21,463.45
163
Germany
66,350
24,751.15
12,077.42
164
UK
197,523
65,897.05
8,086.24
165
Japan
94,755
51,565.56
48,611.92
166
Italy
144,428
6,609.96
898.53
167
Greece
25,390
3,901.46
47,280.17
168
US
187,685
10,635.04
39,115.70
169
Germany
64,119
45,466.00
27,288.02
170
UK
138,755
98,662.14
2,839.49
171
Japan
5,808
66,315.63
33,603.30
172
Italy
56,030
6,786.68
42,189.45
173
Greece
153,774
82,304.73
27,339.04
174
US
132,821
57,616.39
38,901.99
175
Germany
136,544
14,755.04
4,909.49
176
UK
140,788
22,981.08
25,585.83
177
Japan
172,022
14,967.44
40,428.26
178
Italy
23,768
69,950.61
4,586.60
179
Greece
46,215
62,413.41
33,545.42
180
US
97,116
35,681.12
8,387.16
181
Germany
58,120
91,549.44
34,653.87
182
UK
12,985
11,674.37
19,306.25
183
Japan
19,323
32,777.96
44,325.84
184
Italy
97,505
59,863.48
1,802.54
185
Greece
43,941
36,792.45
4,798.18
186
US
42,549
49,066.52
43,600.15
187
Germany
57,049
60,832.27
49,571.63
188
UK
33,342
56,616.38
18,828.22
189
Japan
141,629
96,299.02
21,519.58
190
Italy
174,017
34,325.98
29,455.19
191
Greece
7,818
42,350.83
32,416.12
192
US
129,611
5,956.20
21,275.49
193
Germany
124,298
47,703.12
41,772.65
194
UK
52,245
81,976.80
13,248.56
195
Japan
7,292
84,780.75
26,824.11
196
Italy
184,291
85,752.31
45,095.20
197
Greece
90,139
47,636.91
8,490.65
198
US
57,702
8,666.95
43,690.98
199
Germany
189,770
58,847.52
19,868.08
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// This file locates: "Scripts/Lesson/C1FlexGrid/Index.js".
c1.documentReady(function () {
    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      data = [];
    for (var i = 0; i < 200; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            active: i % 5 != 0,
            downloads: Math.round(Math.random() * 200000),
            sales: Math.random() * 100000,
            expenses: Math.random() * 50000
        });
    }
 
    // default grid
    var gridDefault = wijmo.Control.getControl('#gridDefault');
    gridDefault.itemsSource = data;
 
    // customize columns
    var gridCols = wijmo.Control.getControl('#gridCols');
    gridCols.initialize({
        autoGenerateColumns: false,
        itemsSource: data,
        columns: [
            { header: 'Country', binding: 'country', width: '*' },
            { header: 'Downloads (k)', binding: 'downloads', format: 'n1,' },
            { header: 'Sales (k)', binding: 'sales', format: 'n1,' },
            { header: 'Expenses (k)', binding: 'expenses', format: 'c1,' },
        ]
    });
 
    // customize properties
    var gridProps = wijmo.Control.getControl('#gridProps');
    gridProps.itemsSource = data;
 
    var selectionMode = wijmo.Control.getControl('#selectionMode');
    selectionMode.selectedIndexChanged.addHandler(function () {
        gridProps.selectionMode = selectionMode.text
    });
    var allowSorting = wijmo.Control.getControl('#allowSorting');
    allowSorting.selectedIndexChanged.addHandler(function () {
        gridProps.allowSorting = allowSorting.text == 'True';
    });
    var allowDragging = wijmo.Control.getControl('#allowDragging');
    allowDragging.selectedIndexChanged.addHandler(function () {
        gridProps.allowDragging = allowDragging.text;
    });
    var isReadOnly = wijmo.Control.getControl('#isReadOnly');
    isReadOnly.selectedIndexChanged.addHandler(function () {
        gridProps.isReadOnly = isReadOnly.text == 'True';
    });
    var headersVisibility = wijmo.Control.getControl('#headersVisibility');
    headersVisibility.selectedIndexChanged.addHandler(function () {
        gridProps.headersVisibility = headersVisibility.text;
    });
});
1
2
3
4
5
6
7
8
9
10
11
// This file locates: "Content/css/Lesson/C1FlexGrid/Index.css".
.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}
.header {
  display: inline-block;
  width: 150px;
  text-align: right;
  font-weight: normal;
}
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: Index
        public ActionResult Index()
        {
            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
43
44
45
46
47
48
49
50
51
52
53
54
55
<h1>
    @Html.Raw(Resources.C1FlexGrid.Index_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Index_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Index_Text2)
</p>
@Html.C1().FlexGrid().Id("gridDefault")
 
<p>
    @Html.Raw(Resources.C1FlexGrid.Index_Text3)
</p>
@Html.C1().FlexGrid().Id("gridCols")
 
<p>
    @Html.Raw(Resources.C1FlexGrid.Index_Text4)
</p>
@Html.C1().FlexGrid().Id("gridProps")
<label>
    <div class="header">@Html.Raw(Resources.C1FlexGrid.Index_Text5)</div>
    @(Html.C1().ComboBox().Id("selectionMode")
        .Bind(new[] { "None", "Cell", "CellRange", "Row", "RowRange", "ListBox" })
        .Text("CellRange")
    )
</label>
<label>
    <div class="header">@Html.Raw(Resources.C1FlexGrid.Index_Text6)</div>
    @(Html.C1().ComboBox().Id("allowSorting")
        .Bind(new[] { "True", "False" })
        .Text("True")
    )
</label>
<label>
    <div class="header">@Html.Raw(Resources.C1FlexGrid.Index_Text7)</div>
    @(Html.C1().ComboBox().Id("allowDragging")
        .Bind(new[] { "None", "Columns", "Rows", "Both" })
        .Text("Solumns")
    )
</label>
<label>
    <div class="header">@Html.Raw(Resources.C1FlexGrid.Index_Text8)</div>
    @(Html.C1().ComboBox().Id("isReadOnly")
        .Bind(new[] { "True", "False" })
        .Text("False")
    )
</label>
<label>
    <div class="header">@Html.Raw(Resources.C1FlexGrid.Index_Text9)</div>
    @(Html.C1().ComboBox().Id("headersVisibility")
        .Bind(new[] { "None", "Column", "Row", "All" })
        .Text("All")
    )
</label>