Multi-Pane Grid

Although FlexGrid does not allow you to freeze columns on the right of the grid, or rows along the bottom. But this example shows how you can implement something similar using two grids bound to the same data source.

Id
Country
Downloads
Sales
Expenses
Amount1
Amount2
Amount3
Amount4
Amount5
Amount6
Amount7
0
US
17,934
2,784.13
4,723.24
4,759.39
3,373.01
90.78
3,831.06
4,624.93
3,667.20
4,534.48
1
Germany
1,094
8,971.92
2,409.67
4,300.98
3,320.28
2,946.51
3,217.78
2,459.27
1,361.91
3,534.61
2
UK
3,007
3,928.60
2,037.48
240.96
1,697.09
4,984.42
2,219.17
4,666.32
2,223.03
3,387.08
3
Japan
9,995
3,760.62
3,024.61
4,139.99
4,831.17
4,646.76
2,565.97
1,940.23
2,471.70
2,853.34
4
Italy
19,274
6,398.29
4,128.06
3,620.50
3,253.27
2,824.32
3,819.66
4,148.41
1,188.44
2,251.23
5
Greece
13,616
8,560.65
564.38
4,883.15
4,269.39
4,535.01
4,531.65
2,497.67
953.18
4,789.12
6
Austria
16,343
252.44
4,850.79
1,466.09
4,514.38
1,789.20
4,522.95
1,984.87
4,082.62
2,138.22
7
Belgium
19,221
7,493.10
1,700.13
2,832.72
1,947.68
4,391.56
2,551.03
36.95
2,646.07
3,836.19
8
China
18,733
4,632.63
4,435.01
3,686.02
85.83
2,601.34
2,619.65
4,498.41
2,225.80
1,807.49
9
Korea
9,746
4,638.35
2,734.43
4,057.63
4,950.52
4,373.66
2,274.87
1,323.59
498.32
1,895.75
10
US
18,364
9,130.24
793.54
1,080.66
3,788.92
4,373.37
4,334.91
4,129.41
922.90
607.68
11
Germany
12,271
3,473.26
292.18
1,411.16
1,566.40
2,149.87
3,625.06
2,106.12
3,041.87
4,427.50
12
UK
181
8,396.14
4,107.50
4,559.12
2,354.50
2,325.87
3,883.97
316.42
1,511.07
4,890.89
13
Japan
6,611
3,705.03
2,167.73
1,326.17
10.73
70.16
4,491.96
3,965.66
3,620.19
1,668.81
14
Italy
3,845
7,921.97
1,243.16
2,720.68
4,542.26
1,347.21
403.68
4,322.70
4,148.11
1,359.66
15
Greece
14,222
7,992.79
2,171.75
2,920.83
2,998.11
2,330.19
4,007.15
3,593.60
2,165.88
2,335.28
16
Austria
19,039
1,317.55
4,837.37
3,288.34
1,305.26
3,331.64
643.64
2,297.95
324.17
2,954.07
17
Belgium
6,834
2,145.25
2,286.97
4,696.01
2,103.33
323.61
3,209.06
3,927.47
822.71
394.73
18
China
5,204
1,382.18
2,015.62
4,798.60
4,113.34
2,799.06
3,635.45
2,043.10
3,326.75
1,566.74
19
Korea
17,592
539.06
2,573.38
2,864.18
879.31
1,205.52
2,928.11
2,027.30
3,866.44
1,307.89
20
US
7,097
8,224.18
4,294.17
3,407.61
3,339.48
1,984.88
3,119.18
2,471.60
573.44
4,813.27
21
Germany
9,666
7,892.71
4,130.99
1,115.65
963.35
1,101.71
3,006.95
2,324.34
2,059.99
759.00
22
UK
7,721
4,284.30
796.92
278.21
2,754.09
58.48
2,817.95
930.85
817.83
935.81
23
Japan
19,427
591.72
467.65
2,758.20
999.81
4,800.63
3,131.76
260.64
44.23
4,063.23
24
Italy
15,952
6,362.67
576.10
507.90
3,244.73
1,739.30
4,429.02
3,702.22
2,942.13
1,715.75
25
Greece
8,295
1,870.06
1,427.97
1,120.13
3,922.03
1,523.00
978.82
4,131.89
2,891.72
194.96
26
Austria
10,976
2,596.33
2,642.60
2,805.00
1,002.82
4,367.01
4,727.37
2,675.30
2,673.19
3,030.46
27
Belgium
12,356
5,907.82
4,705.88
1,273.17
3,697.39
3,343.89
878.87
4,109.26
3,858.34
3,571.88
28
China
17,010
9,470.75
3,091.42
3,824.77
4,185.94
4,025.48
4,484.37
1,998.18
977.39
2,856.71
29
Korea
1,351
6,142.37
946.40
4,836.06
966.07
4,437.36
3,581.94
4,837.81
4,944.46
148.15
30
US
9,775
8,968.33
2,856.45
174.88
931.11
3,735.87
1,750.30
1,858.72
2,247.82
1,652.49
31
Germany
12,984
5,238.16
2,529.32
4,465.14
256.78
1,357.95
3,001.77
1,760.00
2,674.36
123.91
32
UK
15,213
826.33
2,584.98
140.90
4,655.53
2,722.17
875.22
4,599.33
1,903.65
4,847.77
33
Japan
464
5,264.73
1,856.62
3,185.60
2,981.16
708.24
4,900.59
2,922.54
3,932.08
266.44
34
Italy
807
9,124.65
1,081.86
1,638.39
647.15
4,917.20
1,821.90
671.70
664.41
3,002.03
35
Greece
7,800
4,798.60
366.70
2,354.01
3,301.76
3,300.54
925.91
3,066.10
1,832.20
3,834.67
36
Austria
18,160
1,249.89
3,815.58
44.85
54.26
539.93
2,811.83
960.47
680.45
1,992.26
37
Belgium
6,758
6,625.43
2,891.68
3,689.66
4,256.90
151.93
167.44
2,952.88
1,571.52
1,965.47
38
China
6,283
4,850.89
3,781.36
3,474.11
1,191.59
2,151.41
2,058.95
1,196.64
366.92
2,395.06
39
Korea
3,756
7,945.29
4,290.00
1,305.77
1,375.92
1,893.07
2,917.77
3,728.55
2,544.47
2,571.41
40
US
15,257
6,567.20
729.33
4,759.22
18.46
1,712.07
1,567.95
562.79
2,766.95
4,169.89
41
Germany
890
767.74
1,030.34
3,632.44
1,426.78
530.48
4,392.57
4,279.16
2,074.05
1,364.27
42
UK
18,187
909.14
1,104.84
4,630.12
3,482.92
382.92
3,048.80
3,258.46
318.26
1,112.09
43
Japan
796
2,545.32
1,363.85
1,301.33
4,413.45
340.61
871.94
1,251.07
1,218.80
4,093.42
44
Italy
11,081
6,503.05
3,693.55
3,465.82
2,212.72
2,988.08
4,965.61
777.21
3,435.02
3,814.90
45
Greece
6,606
6,197.59
403.49
4,377.95
567.68
2,897.98
4,177.89
3,432.24
1,724.42
3,117.61
46
Austria
15,681
3,976.87
4,297.60
243.73
3,514.38
4,511.35
546.17
4,720.77
4,694.19
1,492.24
47
Belgium
14,566
7,059.50
961.54
1,105.36
2,228.52
2,897.49
3,159.04
2,645.01
3,940.22
2,302.01
48
China
11,030
6,783.62
3,150.77
2,968.25
494.23
3,453.87
2,873.85
4,839.52
1,353.08
3,380.37
49
Korea
4,610
5,617.64
3,111.22
609.47
3,405.71
3,512.53
1,979.89
3,368.19
934.25
2,738.36
50
US
629
2,732.89
3,359.87
3,987.38
1,661.64
1,591.94
1,716.94
264.29
3,566.53
1,778.55
51
Germany
11,953
5,178.49
4,922.79
344.91
2,083.38
1,293.01
1,569.80
1,285.10
1,134.16
4,282.17
52
UK
12,353
5,239.89
1,441.00
1,034.88
1,457.73
2,646.42
217.82
1,570.62
1,238.95
1,959.02
53
Japan
10,137
4,478.06
443.56
3,465.55
2,936.99
3,350.09
4,606.61
3,057.73
900.21
2,643.14
54
Italy
19,533
5,683.29
3,018.79
4,938.34
1,312.24
4,076.63
4,533.09
3,452.73
2,393.38
866.82
55
Greece
15,884
8,862.55
1,509.58
3,811.69
646.16
2,083.17
2,712.79
261.72
1,598.37
3,451.50
56
Austria
16,945
7,689.70
534.11
3,885.93
2,251.55
1,522.16
1,033.29
957.54
526.63
2,134.25
57
Belgium
9,336
4,259.81
4,040.94
2,407.84
4,127.91
1,912.32
867.69
597.83
967.46
266.62
58
China
9,513
6,868.08
3,610.07
981.49
3,559.61
2,654.18
3,647.03
711.81
1,073.75
1,182.56
59
Korea
6,372
2,935.51
3,671.70
3,160.57
2,240.96
2,933.04
1,439.18
3,272.69
4,143.19
228.73
60
US
8,475
9,667.45
748.04
3,804.37
4,258.33
4,127.05
4,926.80
1,812.43
4,965.78
120.78
61
Germany
8,753
4,052.25
657.37
4,656.76
3,363.49
2,879.39
114.35
1,918.31
2,388.36
3,739.28
62
UK
16,172
6,459.75
1,435.66
2,342.29
1,953.18
2,047.93
4,758.34
3,127.46
2,372.53
4,463.93
63
Japan
9,250
2,235.74
2,415.43
1,037.94
3,537.89
3,268.42
1,381.55
3,080.27
503.51
1,241.44
64
Italy
3,480
5,679.47
3,091.24
4,352.21
1,954.16
3,070.74
1,978.84
600.55
377.44
2,189.74
65
Greece
12,699
1,067.94
3,905.15
3,962.71
4,416.03
3,900.95
4,945.87
717.88
4,983.99
642.04
66
Austria
16,801
231.41
1,024.63
2,956.61
4,156.08
3,162.90
4,663.11
3,565.55
1,926.06
2,721.95
67
Belgium
6,352
5,056.00
4,346.86
265.43
4,905.42
2,032.57
3,209.40
4,128.85
4,654.59
3,098.56
68
China
8,167
4,383.26
2,047.64
4,227.32
3,419.81
731.69
1,531.00
1,819.19
538.88
3,893.97
69
Korea
14,233
2,900.23
3,944.68
3,071.91
2,146.27
861.44
641.05
2,208.08
3,845.19
2,262.38
70
US
19,351
1,831.43
1,376.33
4,008.11
2,333.45
4,354.79
1,111.11
3,413.21
3,957.63
4,112.05
71
Germany
7,751
7,090.97
3,946.23
4,596.11
2,608.00
2,952.82
4,844.61
2,623.25
2,121.20
2,786.17
72
UK
19,017
8,318.89
2,061.85
176.25
3,789.59
1,474.40
1,942.40
1,357.46
2,264.06
4,166.29
73
Japan
10,012
169.05
82.02
3,389.86
1,109.82
2,057.99
1,449.30
898.97
2,316.61
4,130.36
74
Italy
15,674
1,629.74
2,851.52
207.88
4,890.34
4,074.25
4,151.60
2,811.04
3,929.98
4,286.57
75
Greece
4,354
1,668.51
477.66
1,724.13
2,646.57
3,475.94
918.49
893.48
2,429.27
4,398.66
76
Austria
4,725
6,666.85
632.97
2,873.26
2,250.13
2,527.74
2,487.84
4,575.20
1,368.78
18.66
77
Belgium
4,261
8,107.57
454.57
3,780.57
4,179.86
4,689.76
467.23
3,007.60
1,361.49
181.86
78
China
16,593
2,075.86
632.53
1,644.76
1,622.07
1,911.93
2,332.43
950.89
3,131.83
1,124.02
79
Korea
18,003
5,595.88
4,798.91
2,253.81
2,503.65
4,200.91
3,925.26
3,835.62
3,893.60
129.44
80
US
2,770
6,678.64
2,430.57
3,938.60
42.10
1,130.23
2,035.79
2,709.71
2,671.37
3,232.79
81
Germany
2,666
3,140.85
490.04
3,611.89
1,751.28
1,722.71
3,278.51
663.19
3,019.40
478.89
82
UK
5,074
1,168.42
4,657.81
4,392.33
433.09
1,219.73
2,107.86
44.30
3,357.67
4,368.81
83
Japan
13,985
108.19
4,018.09
305.27
2,407.70
365.02
4,966.87
53.52
247.28
751.36
84
Italy
16,796
9,041.19
3,938.72
3,851.15
3,160.59
3,755.99
1,029.93
3,878.17
4,367.26
710.54
85
Greece
19,514
2,531.44
1,796.93
4,148.07
1,124.23
4,476.88
2,603.70
1,554.02
2,605.10
1,683.11
86
Austria
8,400
9,270.97
4,118.48
1,986.44
3,164.06
4,423.08
1,493.47
92.42
4,138.56
4,294.01
87
Belgium
5,207
8,878.56
892.47
3,655.72
2,823.51
3,796.71
899.03
4,228.37
1,031.53
469.49
88
China
7,323
4,394.67
681.31
3,314.31
3,694.94
1,793.50
1,738.43
1,145.88
4,813.25
2,376.02
89
Korea
2,650
3,799.00
1,053.49
2,577.95
1,866.03
865.95
1,467.65
1,649.70
2,807.87
2,399.51
90
US
18,663
8,673.74
419.44
1,779.18
2,086.49
4,102.07
3,238.48
1,085.86
4,642.40
4,164.63
91
Germany
800
1,767.23
1,273.29
4,822.56
1,113.38
4,353.80
913.30
1,347.48
1,837.41
4,385.20
92
UK
660
3,581.30
4,999.27
389.90
355.27
484.62
2,945.63
3,072.27
4,396.10
3,064.73
93
Japan
10,762
6,341.82
4,787.31
640.25
4,635.09
1,147.76
4,033.15
856.03
3,342.66
2,361.89
94
Italy
10,129
4,910.51
3,610.97
2,692.03
2,506.22
1,788.53
148.23
532.21
3,597.67
1,126.21
95
Greece
6,688
9,565.76
456.53
16.31
3,650.01
991.75
3,206.17
4,826.00
1,278.74
891.43
96
Austria
6,033
4,794.87
372.54
1,188.43
3,243.54
1,013.51
2,441.51
3,337.53
1,453.02
3,480.44
97
Belgium
6,704
4,013.27
4,946.58
2,311.21
2,986.72
4,247.44
238.98
297.08
2,482.85
2,665.90
98
China
12,690
1,486.75
339.60
73.77
1,223.10
1,029.95
4,232.53
4,149.35
481.94
2,418.35
99
Korea
11,794
744.18
1,157.35
565.92
4,248.66
2,139.90
4,922.01
1,043.28
2,665.88
358.76
100
US
11,672
8,793.62
2,850.81
3,381.50
2,693.55
389.68
4,500.03
3,067.26
3,867.37
4,384.00
101
Germany
10,891
9,340.12
1,361.86
4,766.45
4,650.53
1,047.12
1,663.40
3,469.19
253.45
2,731.18
102
UK
2,539
1,722.63
2,566.81
3,575.54
3,167.71
3,060.01
4,950.52
238.74
3,252.52
1,163.40
103
Japan
13,495
290.58
4,100.24
149.09
659.24
1,043.23
3,136.28
3,529.68
2,100.59
3,722.18
104
Italy
7,634
2,592.79
727.22
140.19
2,236.41
4,476.48
4,075.13
730.75
1,993.03
1,563.88
105
Greece
350
8,770.27
2,174.47
1,773.90
4,656.54
4,181.91
4,580.81
1,082.22
1,244.68
4,804.93
106
Austria
1,638
9,060.28
1,662.49
4,220.40
3,222.12
1,511.54
3,220.61
1,272.54
4,606.63
3,093.39
107
Belgium
19,360
7,190.96
551.20
3,024.76
2,365.79
2,746.13
2,947.91
2,217.21
4,562.08
11.62
108
China
15,277
2,047.86
4,650.80
2,202.11
1,865.49
2,804.71
1,127.71
2,415.39
4,603.93
3,171.43
109
Korea
8,324
127.14
4,720.41
1,872.86
3,576.64
899.43
2,998.36
1,794.85
3,554.20
4,449.59
110
US
3,544
5,235.32
1,107.74
1,095.06
975.93
654.03
4,529.36
759.92
4,986.82
1,096.65
111
Germany
12,382
6,299.41
214.24
3,749.77
4,769.62
4,614.24
3,522.69
3,107.65
572.71
3,990.46
112
UK
13,334
17.82
407.51
4,072.44
4,724.63
3,445.53
1,634.10
2,346.63
2,330.65
151.03
113
Japan
6,716
7,302.71
4,556.03
480.48
1,494.99
663.61
3,328.38
485.98
3,430.27
4,444.56
114
Italy
13,286
2,650.14
1,046.02
712.23
4,700.35
1,784.84
4,596.71
4,541.78
4,865.68
3,598.31
115
Greece
1,538
147.85
4,475.16
4,285.69
2,245.37
2,269.15
1,761.40
4,726.85
4,374.48
561.03
116
Austria
8,381
924.51
2,624.96
4,915.69
358.00
2,280.50
3,711.70
4,269.45
3,679.20
873.09
117
Belgium
19,499
8,168.33
2,239.14
3,597.64
4,128.52
2,657.11
3,681.84
3,508.97
3,406.37
3,093.50
118
China
12,593
6,498.82
227.28
4,227.44
1,903.30
3,086.69
2,645.05
564.77
181.10
4,047.51
119
Korea
2,543
2,917.11
1,566.40
1,203.02
1,843.20
4,836.41
1,078.12
3,143.84
1,999.88
4,478.24
120
US
17,927
6,251.01
4,588.52
3,010.04
841.77
717.94
2,809.65
3,082.45
858.74
1,581.04
121
Germany
2,296
1,297.02
1,984.44
4,529.11
4,534.04
3,534.86
1,879.70
4,706.32
2,931.09
1,355.56
122
UK
11,992
9,821.34
2,729.72
3,466.77
4,635.54
520.08
1,740.24
2,380.68
4,016.80
1,579.34
123
Japan
13,653
5,373.84
4,477.20
2,729.29
3,334.12
1,451.59
4,853.75
3,328.52
458.68
3,281.42
124
Italy
15,079
8,494.07
4,560.89
1,220.98
1,480.25
608.96
1,999.56
1,871.66
2,570.10
4,472.87
125
Greece
15,573
4,024.74
574.22
2,395.58
4,225.81
1,835.01
476.35
2,458.84
3,626.08
4,304.62
126
Austria
4,904
3,887.23
2,303.52
1,820.79
2,336.57
204.18
3,189.03
2,757.48
4,986.42
2,573.34
127
Belgium
11,398
5,661.91
4,925.18
3,632.50
466.93
3,860.93
2,961.24
1,472.14
4,891.30
4,128.08
128
China
14,347
7,492.04
3,149.59
3,395.90
4,561.37
3,609.17
1,634.28
4,112.68
3,773.80
1,775.18
129
Korea
17,896
30.72
974.02
3,741.40
895.33
4,311.92
3,753.92
3,613.34
1,140.47
448.76
130
US
16,965
433.20
3,920.94
1,976.91
2,120.03
3,500.73
263.20
554.46
836.79
4,073.30
131
Germany
17,546
5,931.15
1,185.27
2,389.12
2,696.66
151.00
1,792.66
3,003.83
1,264.31
4,615.87
132
UK
7,131
4,415.79
2,275.28
1,182.54
1,373.59
2,809.14
647.08
2,002.97
3,519.39
169.13
133
Japan
22
8,949.79
4,479.25
4,382.43
2,516.83
1,891.74
4,779.89
1,754.10
1,833.80
558.23
134
Italy
9,328
2,854.43
340.59
4.17
1,545.79
3,828.17
485.01
4,768.38
2,298.34
776.84
135
Greece
10,216
4,207.78
4,187.55
2,504.30
377.70
3,704.70
4,088.54
2,650.54
4,199.37
25.96
136
Austria
3,007
1,668.79
4,199.27
1,164.27
1,189.15
2,834.35
2,104.93
1,541.78
4,278.75
1,431.72
137
Belgium
9,913
2,726.28
3,338.31
2,020.08
3,412.72
4,297.58
1,947.30
1,013.16
1,227.39
4,418.55
138
China
14,719
5,371.84
58.84
2,601.71
703.87
1,599.90
386.39
84.11
2,838.98
1,766.94
139
Korea
13,467
6,485.54
86.65
3,271.73
2,443.99
614.94
4,593.14
2,118.39
2,273.56
4,270.46
140
US
6,111
6,962.06
4,597.90
1,314.79
2,369.80
2,896.09
13.56
3,198.78
2,794.67
1,112.35
141
Germany
16,052
5,175.89
2,288.93
2,429.59
1,417.61
3,251.55
2,559.78
346.99
2,776.24
1,976.70
142
UK
18,513
5,898.66
4,607.53
1,137.91
1,192.44
4,218.69
3,840.08
3,004.73
1,899.91
965.19
143
Japan
18,965
9,545.76
3,551.36
931.91
1,838.44
4,663.78
4,559.48
3,480.53
4,178.01
2,521.34
144
Italy
3,590
2,918.35
554.10
3,535.89
1,498.68
4,314.91
3,692.25
1,782.53
1,807.42
1,392.69
145
Greece
10,289
37.46
2,596.11
618.39
3,518.71
3,555.72
586.27
4,980.98
1,313.67
4,574.71
146
Austria
1,147
5,126.57
3,617.28
2,028.61
457.04
1,694.81
1,987.31
3,201.93
2,334.05
327.24
147
Belgium
1,834
7,020.31
1,385.28
3,438.61
4,396.92
788.20
3,053.00
1,817.23
3,164.07
4,176.42
148
China
6,175
6,573.08
4,177.73
379.35
2,796.74
706.44
2,270.72
2,434.31
1,732.00
1,898.60
149
Korea
14,805
7,833.86
1,530.59
2,016.68
884.54
3,302.03
4,645.02
3,746.23
3,598.36
2,189.59
150
US
15,805
1,078.23
3,530.25
2,039.96
2,511.52
2,783.64
4,198.62
2,267.31
3,160.55
3,580.10
151
Germany
6,098
1,689.46
2,023.58
3,752.66
2,583.56
111.16
1,450.70
4,597.80
3,636.59
1,162.98
152
UK
642
1,047.91
756.50
3,661.92
3,412.76
3,681.75
3,683.95
1,742.94
673.60
80.99
153
Japan
18,758
6,641.65
3,661.00
2,103.96
610.17
4,388.12
1,654.81
3,030.77
3,234.71
1,385.11
154
Italy
1,956
7,336.39
1,830.92
366.92
1,000.31
2,966.38
63.59
2,460.84
4,271.16
2,744.32
155
Greece
3,118
349.65
4,858.77
2,213.50
32.08
63.32
4,933.60
209.29
1,793.00
852.55
156
Austria
15,085
1,643.61
4,721.37
865.38
1,177.93
1,612.73
2,864.08
13.38
4,225.37
2,465.12
157
Belgium
17,279
8,926.31
336.18
2,925.25
848.91
3,106.87
1,380.26
3,000.43
4,652.22
3,376.07
158
China
11,209
6,999.49
4,231.88
2,183.10
4,959.00
3,107.47
4,883.58
3,011.08
1,544.04
2,319.09
159
Korea
18,225
2,413.54
239.84
4,131.59
2,332.15
2,431.19
2,648.03
2,377.03
2,193.55
4,509.42
160
US
7,773
5,330.73
3,248.48
943.44
2,118.21
3,874.12
3,000.62
4,403.80
3,650.76
2,626.07
161
Germany
4,297
1,029.32
1,018.06
3,649.46
3,849.46
2,975.47
1,670.87
1,012.37
3,322.96
3,951.32
162
UK
6,279
4,491.78
1,662.07
4,556.72
2,640.34
4,527.53
2,297.83
1,490.88
1,486.34
4,586.73
163
Japan
12,591
5,144.54
1,723.19
1,432.00
4,046.56
3,685.14
2,429.77
4,497.33
4,948.33
1,711.83
164
Italy
7,306
1,120.29
1,203.28
3,163.62
496.11
1,866.97
4,455.66
11.76
1,682.59
3,043.59
165
Greece
14,334
8,435.53
1,517.94
2,194.26
1,926.89
4,643.88
1,595.02
4,507.35
2,695.72
3,753.81
166
Austria
10,363
1,313.12
3,658.41
2,062.92
3,340.42
672.81
208.16
3,197.13
476.66
1,096.51
167
Belgium
12,058
6,511.88
2,672.40
3,366.02
2,206.60
1,824.43
2,219.84
4,035.38
323.45
302.39
168
China
1,679
5,637.46
4,501.66
1,346.08
4,847.04
1,582.49
3,634.97
830.50
53.51
3,821.25
169
Korea
19,852
2,480.17
1,318.58
308.49
4,175.28
2,273.13
4,253.00
1,579.44
3,595.12
2,428.28
170
US
5,747
1,883.87
438.71
2,047.17
6.83
4,463.41
3,860.96
1,312.53
500.78
4,938.54
171
Germany
16,560
2,477.32
4,572.07
269.29
1,488.84
707.98
1,668.41
1,177.17
2,707.95
1,291.63
172
UK
11,183
1,416.43
1,348.25
4,868.62
4,575.18
1,507.93
712.44
4,471.15
957.48
4,085.86
173
Japan
2,879
5,987.20
4,716.02
4,261.74
102.52
4,357.39
4,671.64
2,678.01
735.26
3,032.00
174
Italy
12,030
8,533.22
1,867.79
2,354.82
2,630.01
1,616.68
87.49
2,008.61
4,753.36
941.15
175
Greece
13,234
8,941.91
4,457.82
54.49
3,716.93
1,952.22
2,455.15
1,541.86
1,449.74
3,371.00
176
Austria
7,637
2,107.97
951.03
3,971.35
4,783.18
4,672.37
3,443.43
33.88
715.91
1,082.90
177
Belgium
14,764
5,886.63
1,732.01
1,290.78
4,833.46
3,833.38
948.69
1,525.22
2,497.43
4,842.51
178
China
19,842
6,339.19
3,167.71
4,945.28
1,811.56
3,220.26
3,295.32
1,215.17
3,412.80
4,008.98
179
Korea
3,852
9,436.38
4,610.35
4,719.03
3,555.78
3,771.81
4,407.04
3,875.43
4,843.07
4,361.64
180
US
18,305
2,929.47
4,608.56
390.18
3,666.52
491.98
3,724.79
1,337.01
624.93
4,414.57
181
Germany
17,392
6,237.10
4,546.05
746.40
4,053.27
1,524.65
1,015.32
3,558.02
761.43
2,318.07
182
UK
19,409
1,237.38
2,505.50
3,037.67
1,144.70
1,160.62
2,067.00
667.67
4,663.33
4,091.03
183
Japan
4,806
4,366.65
4,202.69
1,360.85
331.10
2,368.75
3,763.41
3,426.29
4,084.92
1,304.94
184
Italy
7,962
4,054.78
245.34
2,951.88
2,278.91
1,119.29
4,558.03
2,374.52
165.93
3,657.01
185
Greece
11,745
352.45
1,628.01
2,385.38
3,267.04
3,476.69
4,517.34
1,292.61
3,728.25
361.50
186
Austria
4,615
4,642.18
4,886.95
3,916.80
1,844.00
2,457.62
3,829.95
3,229.57
4,799.59
4,753.40
187
Belgium
16,636
6,897.40
3,971.04
479.14
191.51
4,945.49
4,185.60
2,354.67
978.31
1,107.17
188
China
6,119
9,252.46
3,580.84
1,429.54
3,306.31
1,324.60
4,422.94
4,911.67
607.65
1,530.87
189
Korea
9,484
1,368.16
844.37
3,956.10
2,597.08
333.73
2,787.14
279.41
1,654.85
961.46
190
US
15,643
5,229.27
4,886.57
4,239.31
4,053.08
4,246.66
4,303.65
602.98
307.85
3,676.37
191
Germany
16,771
5,890.94
458.18
3,542.43
4,954.13
1,334.47
1,440.66
143.72
4,468.26
495.78
192
UK
4,683
479.20
3,717.30
4,366.70
1,836.83
812.45
3,217.15
3,850.11
1,128.60
4,262.33
193
Japan
9,355
256.71
3,760.63
4,500.40
779.01
501.50
1,190.08
760.84
2,811.14
2,550.48
194
Italy
18,986
9,455.22
4,465.57
2,927.56
240.14
2,188.69
4,511.89
1,165.91
4,991.42
4,965.00
195
Greece
5,232
4,034.68
4,148.40
4,170.00
3,990.43
1,835.47
2,163.59
1,593.65
4,627.08
2,447.04
196
Austria
87
7,541.39
1,037.56
25.94
3,782.01
3,885.88
1,715.92
3,275.03
3,280.07
626.61
197
Belgium
9,245
9,443.99
4,348.92
3,618.65
1,743.84
803.04
3,925.49
1,220.24
872.96
2,199.61
198
China
16,025
3,938.08
4,452.38
2,596.12
3,968.91
942.71
2,690.35
3,874.66
971.90
900.16
199
Korea
12,156
3,791.95
2,504.75
4,667.47
3,232.12
3,666.33
1,729.69
567.78
202.41
4,467.02
Important
Amount8
3,153.65
4,841.57
921.03
506.59
4,659.93
2,576.60
3,761.58
1,608.37
259.06
3,496.50
2,133.75
2,002.84
4,761.33
4,028.32
827.17
395.04
605.28
2,076.40
3,705.22
901.07
2,932.89
1,367.77
1,761.93
1,843.46
458.39
2,624.67
1,419.36
982.71
1,461.26
3,216.77
2,172.83
1,048.65
282.08
1,304.08
4,148.63
221.40
629.06
1,057.09
3,568.00
3,550.95
3,192.90
2,036.79
2,023.52
901.50
1,371.33
402.94
100.29
3,820.21
1,196.58
4,682.18
3,803.28
1,378.57
1,114.29
2,152.33
1,857.40
1,267.54
3,779.43
1,367.27
1,615.91
4,810.62
55.26
2,756.80
2,625.09
2,544.63
4,756.57
3,578.56
414.85
1,037.47
2,776.08
772.61
2,809.32
3,932.49
3,215.17
138.18
3,031.71
4,910.72
2,995.53
2,844.03
2,172.47
928.97
4,825.72
2,729.00
1,859.91
2,152.90
3,673.82
1,398.43
2,727.85
4,393.00
4,405.31
3,554.04
418.25
4,624.59
4,557.78
4,843.06
3,469.69
4,168.55
138.43
2,328.83
2,671.53
3,796.54
3,742.55
3,231.06
789.72
2,898.85
2,084.40
4,239.60
1,173.20
51.44
3,623.25
2,472.97
736.16
595.39
1,822.42
2,639.20
1,609.81
3,425.58
2,759.18
854.00
4,364.03
4,941.89
1,633.44
1,788.83
4,513.17
89.89
1,966.50
3,425.00
3,652.19
4,025.16
1,523.64
3,991.96
1,074.24
2,304.28
1,227.26
4,758.89
1,480.25
4,234.19
3,731.25
1,922.47
4,207.68
2,639.69
2,745.85
1,584.55
4,451.70
2,772.40
3,467.45
4,703.71
2,156.04
4,976.21
977.65
590.59
3,881.25
3,837.63
4,857.10
4,987.97
4,876.84
1,993.07
1,046.48
2,872.92
453.35
4,644.73
3,374.47
4,787.45
3,120.39
1,929.33
2,697.98
1,948.04
1,447.84
4,833.65
4,384.20
2,687.54
1,254.16
3,150.80
3,188.80
1,561.23
2,759.79
4,890.25
4,066.23
4,654.78
3,317.72
206.05
3,295.15
1,886.53
3,516.58
3,946.93
1,487.08
216.40
1,376.28
3,790.11
2,826.85
138.99
2,153.07
4,679.79
654.28
1,694.06
2,566.24
3,434.24
1,838.83
1,397.84
4,491.84
4,206.92
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
59
60
61
62
63
64
65
// This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsMultiPaneGrids.js".
c1.documentReady(function () {
    var theGridLeft = wijmo.Control.getControl('#theGridLeft');
    theGridLeft.itemsSource = getData();
    theGridLeft.scrollPositionChanged.addHandler(function (s, e) {
        syncGrids(s, theGridRight)
    });
 
    var theGridRight = wijmo.Control.getControl('#theGridRight');
    theGridRight.itemsSource = theGridLeft.collectionView;
    theGridRight.scrollPositionChanged.addHandler(function (s, e) {
        syncGrids(s, theGridLeft)
    });
 
    // support wheel scrolling on both grids
    theGridLeft.hostElement.addEventListener('wheel', applyWheel);
    theGridRight.hostElement.addEventListener('wheel', applyWheel);
    function applyWheel(e) {
        var root = wijmo.closest(e.target, '[wj-part="root"]');
        if (root) {
            root.scrollTop += 32 * (e.deltaY < 0 ? -1 : +1);
            e.preventDefault();
        }
    }
 
    // synchronize the vertical scrolling position
    // NOTE: the selection is synchronized automatically since both
    // grids are bound to the same CollectionView
    function syncGrids(main, sub) {
        sub.scrollPosition = new wijmo.Point(sub.scrollPosition.x, main.scrollPosition.y);
    }
 
    // move the last two columns to the grid on the right
    theGridRight.columns.clear();
    for (var i = 0; i < 2; i++) {
        var lastCol = theGridLeft.columns[theGridLeft.columns.length - 1];
        theGridLeft.columns.remove(lastCol);
        theGridRight.columns.push(lastCol);
    }
 
    // get some random data
    function getData() {
        var countries = 'US,Germany,UK,Japan,Italy,Greece,Austria,Belgium,China,Korea'.split(','),
                data = [];
        for (var i = 0; i < 200; i++) {
            data.push({
                id: i,
                country: countries[i % countries.length],
                downloads: Math.round(Math.random() * 20000),
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000,
                amount1: Math.random() * 5000,
                amount2: Math.random() * 5000,
                amount3: Math.random() * 5000,
                amount4: Math.random() * 5000,
                amount5: Math.random() * 5000,
                amount6: Math.random() * 5000,
                amount7: Math.random() * 5000,
                amount8: Math.random() * 5000,
                important: i % 5 == 0
            });
        }
        return data;
    }
});
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
// This file locates: "Content/css/Lesson/C1FlexGrid/ColumnsMultiPaneGrids.css".
/* the container for the grids */
.freeze-right {
  background: rgba(0,0,0,.1);
  border: 1px solid grey;
  height: 350px;
  width: auto;
  display: inline-block;
}
 
/* the grids in the container */
.freeze-right > .wj-flexgrid {
  display: inline-block;
  height: 100%;
  width: auto;
  max-width: 400px;
  border: none;
  border-radius: 0;
}
 
/* remove the vertical scrollbar from the grids grid */
.freeze-right > .wj-flexgrid:first-child div[wj-part=root] {
  overflow-y: hidden !important;
}
 
/* don't show selection on grids that don't have the focus */
.freeze-right .wj-flexgrid:not(.wj-state-focused) .wj-cell.wj-state-selected {
  background-color: inherit;
  color: inherit;
}
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: ColumnsMultiPaneGrids
        public ActionResult ColumnsMultiPaneGrids()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
<h1>
    @Html.Raw(Resources.C1FlexGrid.ColumnsMultiPaneGrids_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsMultiPaneGrids_Text1)
</p>
 
<div class="freeze-right">
    @Html.C1().FlexGrid().Id("theGridLeft").ShowAlternatingRows(false)
    @Html.C1().FlexGrid().Id("theGridRight").ShowAlternatingRows(false).HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
</div>