Dynamic Updates
FlexGrid updates all cells automatically when there are changes in its data source.
If you have a data source where only a few items change frequently, it is more efficient to update only the cells bound to items that have actually changed.
The grid below uses the formatItem event to keep track of the cell elements for each data item. When the data changes, it updates only the affected cells rather than the whole grid.
Name
Bid
Ask
Last Sale
Bid Size
Ask Size
Last Size
Volume
Quote Time
Quote Time
Royal Dutch Shell
455.73
0.0%
456.54
0.0%
455.73
0.0%
25
94
282
10,081
12:18:42
12:18:42
Unilever
382.86
0.0%
383.23
0.0%
382.86
0.0%
358
485
150
12,548
12:18:42
12:18:42
HSBC
480.82
0.0%
480.95
0.0%
480.82
0.0%
326
419
179
11,554
12:18:42
12:18:42
British American Tobacco
895.32
0.0%
895.57
0.0%
895.32
0.0%
141
238
413
17,038
12:18:42
12:18:42
GlaxoSmithKline
231.44
0.0%
231.52
0.0%
231.44
0.0%
269
49
67
11,120
12:18:42
12:18:42
SABMiller
609.31
0.0%
610.10
0.0%
609.31
0.0%
305
263
305
16,307
12:18:42
12:18:42
BP
883.26
0.0%
883.85
0.0%
883.26
0.0%
87
230
27
15,458
12:18:42
12:18:42
Vodafone Group
847.99
0.0%
848.31
0.0%
847.99
0.0%
413
459
156
19,712
12:18:42
12:18:42
AstraZeneca
730.77
0.0%
730.83
0.0%
730.77
0.0%
289
448
349
18,962
12:18:42
12:18:42
Reckitt Benckiser
315.82
-0.1%
314.38
-0.5%
315.10
-0.3%
252
389
320
11,604
12:18:42
12:18:42
Diageo
971.31
0.0%
971.68
0.0%
971.31
0.0%
148
477
44
19,869
12:18:42
12:18:42
BT Group
710.51
0.0%
710.74
0.0%
710.51
0.0%
139
27
156
16,812
12:18:42
12:18:42
Lloyds Banking Group
530.78
0.0%
531.65
0.0%
530.78
0.0%
17
57
36
10,334
12:18:42
12:18:42
BHP Billiton
670.68
0.0%
671.04
0.0%
670.68
0.0%
265
151
151
17,872
12:18:42
12:18:42
National Grid plc
669.53
0.0%
669.99
0.0%
669.53
0.0%
289
254
425
15,879
12:18:42
12:18:42
Imperial Brands
746.52
0.0%
747.44
0.0%
746.52
0.0%
75
126
213
16,929
12:18:42
12:18:42
Rio Tinto Group
127.83
0.0%
128.38
0.0%
127.83
0.0%
406
446
285
17,419
12:18:42
12:18:42
Prudential plc
81.43
0.0%
82.35
0.0%
81.43
0.0%
493
33
490
12,007
12:18:42
12:18:42
Royal Bank of Scotland Group
756.87
0.0%
757.28
0.0%
756.87
0.0%
304
153
18
18,300
12:18:42
12:18:42
Barclays
941.70
0.0%
942.39
0.0%
941.70
0.0%
96
306
42
16,610
12:18:42
12:18:42
Associated British Foods
358.92
0.0%
359.32
0.0%
358.92
0.0%
146
155
233
11,443
12:18:42
12:18:42
RELX Group
842.06
0.0%
842.55
0.0%
842.06
0.0%
353
218
129
11,032
12:18:42
12:18:42
Rexam
199.30
0.0%
200.22
0.0%
199.30
0.0%
339
52
429
10,673
12:18:42
12:18:42
Carnival Corporation & plc
531.80
0.0%
532.19
0.0%
531.80
0.0%
75
173
185
16,131
12:18:42
12:18:42
Shire plc
653.10
0.0%
653.30
0.0%
653.10
0.0%
96
490
275
13,573
12:18:42
12:18:42
Compass Group
56.43
0.0%
57.43
0.0%
56.43
0.0%
410
446
118
10,469
12:18:42
12:18:42
WPP plc
251.78
0.0%
251.84
0.0%
251.78
0.0%
289
139
320
14,648
12:18:42
12:18:42
Aviva
565.05
0.0%
565.72
0.0%
565.05
0.0%
143
288
343
10,660
12:18:42
12:18:42
Sky plc
302.65
0.0%
302.85
0.0%
302.65
0.0%
175
400
244
19,083
12:18:42
12:18:42
Glencore
881.41
0.0%
881.51
0.0%
881.41
0.0%
345
247
359
18,413
12:18:42
12:18:42
BAE Systems
549.77
-2.5%
543.21
-3.6%
546.49
-3.0%
49
722
385
17,655
12:18:42
12:18:42
Tesco
692.34
0.0%
693.15
0.0%
692.34
0.0%
130
312
275
12,275
12:18:42
12:18:42
SSE plc
231.03
0.0%
231.08
0.0%
231.03
0.0%
321
38
243
17,866
12:18:42
12:18:42
Standard Chartered
63.83
0.0%
64.71
0.0%
63.83
0.0%
339
203
255
11,024
12:18:42
12:18:42
Legal & General
335.10
0.0%
335.47
0.0%
335.10
0.0%
179
374
307
15,437
12:18:42
12:18:42
ARM Holdings
838.48
0.0%
838.96
0.0%
838.48
0.0%
442
182
222
12,677
12:18:42
12:18:42
Rolls-Royce Holdings
660.07
0.0%
660.85
0.0%
660.07
0.0%
241
462
79
11,869
12:18:42
12:18:42
Experian
551.87
0.0%
552.70
0.0%
551.87
0.0%
308
250
331
15,063
12:18:42
12:18:42
International Consolidated Airlines Group SA
27.77
0.0%
28.24
0.0%
27.77
0.0%
320
155
407
14,405
12:18:42
12:18:42
CRH plc
540.32
0.0%
540.62
0.0%
540.32
0.0%
190
468
214
15,443
12:18:42
12:18:42
Centrica
926.75
0.0%
927.29
0.0%
926.75
0.0%
71
17
64
18,050
12:18:42
12:18:42
Smith & Nephew
72.02
0.0%
72.16
0.0%
72.02
0.0%
180
12
118
19,150
12:18:42
12:18:42
ITV plc
520.40
0.0%
521.04
0.0%
520.40
0.0%
181
287
12
19,168
12:18:42
12:18:42
Wolseley plc
304.69
0.0%
305.06
0.0%
304.69
0.0%
408
346
299
15,045
12:18:42
12:18:42
Old Mutual
783.31
0.0%
784.25
0.0%
783.31
0.0%
33
445
500
19,197
12:18:42
12:18:42
Land Securities
77.07
0.0%
77.78
0.0%
77.07
0.0%
298
406
119
19,642
12:18:42
12:18:42
London Stock Exchange Group
564.54
0.0%
565.50
0.0%
564.54
0.0%
210
449
376
15,954
12:18:42
12:18:42
Kingfisher plc
702.09
0.0%
702.24
0.0%
702.09
0.0%
239
237
258
10,432
12:18:42
12:18:42
Capita
722.51
0.0%
722.82
0.0%
722.51
0.0%
434
109
401
13,949
12:18:42
12:18:42
British Land
416.16
0.0%
416.17
0.0%
416.16
0.0%
417
149
400
11,873
12:18:42
12:18:42
Whitbread
211.36
0.0%
211.76
0.0%
211.36
0.0%
138
121
154
13,890
12:18:42
12:18:42
Marks & Spencer
579.95
0.0%
580.90
0.0%
579.95
0.0%
316
496
481
19,866
12:18:42
12:18:42
Fresnillo plc
865.38
0.0%
866.25
0.0%
865.38
0.0%
112
303
23
16,642
12:18:42
12:18:42
Next plc
538.08
0.0%
538.93
0.0%
538.08
0.0%
415
166
492
15,747
12:18:42
12:18:42
Schroders
843.37
0.0%
843.98
0.0%
843.37
0.0%
425
365
320
10,623
12:18:42
12:18:42
Standard Life
223.42
0.0%
223.94
0.0%
223.42
0.0%
163
43
269
19,247
12:18:42
12:18:42
Pearson PLC
64.49
0.0%
65.16
0.0%
64.49
0.0%
12
111
195
10,431
12:18:42
12:18:42
Bunzl
818.54
0.0%
818.63
0.0%
818.54
0.0%
46
145
232
10,285
12:18:42
12:18:42
Mondi
952.35
0.0%
953.08
0.0%
952.35
0.0%
186
255
290
10,008
12:18:42
12:18:42
United Utilities
827.29
0.0%
828.13
0.0%
827.29
0.0%
420
80
394
19,216
12:18:42
12:18:42
Persimmon plc
954.04
0.0%
954.20
0.0%
954.04
0.0%
243
401
395
14,419
12:18:42
12:18:42
Sage Group
614.42
3.3%
622.59
4.6%
618.50
4.0%
802
933
867
15,469
12:18:42
12:18:42
EasyJet
280.98
0.0%
281.48
0.0%
280.98
0.0%
271
11
314
15,867
12:18:42
12:18:42
Anglo American plc
928.28
5.2%
887.73
0.6%
908.01
3.0%
165
539
352
11,777
12:18:42
12:18:42
Taylor Wimpey
850.68
0.0%
851.47
0.0%
850.68
0.0%
447
480
127
12,302
12:18:42
12:18:42
TUI Group
504.94
0.0%
505.21
0.0%
504.94
0.0%
409
171
379
11,296
12:18:42
12:18:42
Worldpay
666.57
0.0%
667.41
0.0%
666.57
0.0%
27
490
253
14,399
12:18:42
12:18:42
Randgold Resources
880.63
0.0%
881.35
0.0%
880.63
0.0%
71
477
51
17,291
12:18:42
12:18:42
Hargreaves Lansdown
387.72
0.0%
388.52
0.0%
387.72
0.0%
276
403
318
14,739
12:18:42
12:18:42
Barratt Developments
471.03
0.0%
471.77
0.0%
471.03
0.0%
231
200
50
12,216
12:18:42
12:18:42
InterContinental Hotels Group
393.99
0.0%
394.98
0.0%
393.99
0.0%
15
63
306
15,224
12:18:42
12:18:42
Burberry
273.77
0.0%
274.63
0.0%
273.77
0.0%
123
60
113
19,643
12:18:42
12:18:42
Dixons Carphone
386.09
0.0%
387.04
0.0%
386.09
0.0%
161
67
258
16,604
12:18:42
12:18:42
Direct Line Group
649.44
0.0%
649.78
0.0%
649.44
0.0%
222
463
210
19,249
12:18:42
12:18:42
Coca-Cola HBC AG
674.98
0.0%
675.51
0.0%
674.98
0.0%
63
248
336
13,149
12:18:42
12:18:42
Severn Trent
475.16
0.0%
475.62
0.0%
475.16
0.0%
91
191
101
12,474
12:18:42
12:18:42
DCC plc
775.13
0.0%
775.38
0.0%
775.13
0.0%
316
414
326
14,091
12:18:42
12:18:42
Sainsbury's
756.66
0.0%
757.60
0.0%
756.66
0.0%
264
489
271
11,465
12:18:42
12:18:42
Admiral Group
737.74
0.0%
738.49
0.0%
737.74
0.0%
66
85
430
19,982
12:18:42
12:18:42
GKN
291.60
0.0%
292.12
0.0%
291.60
0.0%
216
70
176
12,800
12:18:42
12:18:42
Johnson Matthey
382.17
0.0%
382.63
0.0%
382.17
0.0%
414
334
329
16,673
12:18:42
12:18:42
Provident Financial
222.22
0.0%
222.51
0.0%
222.22
0.0%
243
175
52
15,001
12:18:42
12:18:42
Antofagasta
336.02
0.0%
336.10
0.0%
336.02
0.0%
77
433
325
18,006
12:18:42
12:18:42
St. James's Place plc
17.17
0.0%
17.25
0.0%
17.17
0.0%
16
15
315
16,230
12:18:42
12:18:42
Intertek
26.63
0.0%
26.90
0.0%
26.63
0.0%
162
110
375
12,388
12:18:42
12:18:42
Babcock International
936.57
0.0%
937.08
0.0%
936.57
0.0%
193
148
383
10,584
12:18:42
12:18:42
Berkeley Group Holdings
733.27
0.0%
733.82
0.0%
733.27
0.0%
52
90
18
15,955
12:18:42
12:18:42
Inmarsat
662.08
0.0%
662.42
0.0%
662.08
0.0%
385
230
477
19,333
12:18:42
12:18:42
Travis Perkins
399.22
0.0%
400.04
0.0%
399.22
0.0%
129
277
483
14,052
12:18:42
12:18:42
Hammerson
725.04
0.0%
725.61
0.0%
725.04
0.0%
443
359
89
18,979
12:18:42
12:18:42
Merlin Entertainments
569.20
5.6%
549.29
1.8%
559.25
3.8%
860
161
510
19,160
12:18:42
12:18:42
Royal Mail
273.76
0.0%
274.50
0.0%
273.76
0.0%
25
249
327
11,828
12:18:42
12:18:42
Ashtead Group
737.68
0.0%
738.35
0.0%
737.68
0.0%
200
293
266
19,518
12:18:42
12:18:42
RSA Insurance Group
343.69
0.0%
344.16
0.0%
343.69
0.0%
132
364
258
14,650
12:18:42
12:18:42
3i
940.50
0.0%
941.44
0.0%
940.50
0.0%
25
481
189
12,878
12:18:42
12:18:42
Intu Properties
605.85
0.0%
606.05
0.0%
605.85
0.0%
452
154
448
14,802
12:18:42
12:18:42
Smiths Group
977.04
0.0%
977.69
0.0%
977.04
0.0%
132
67
307
12,856
12:18:42
12:18:42
Hikma Pharmaceuticals
33.45
0.0%
34.23
0.0%
33.45
0.0%
90
367
370
10,826
12:18:42
12:18:42
Aberdeen Asset Management
232.57
0.0%
232.90
0.0%
232.57
0.0%
423
218
385
19,690
12:18:42
12:18:42
Sports Direct
328.60
0.0%
328.93
0.0%
328.60
0.0%
220
463
373
10,999
12:18:42
12:18:42
RDSA
ULVR
HSBA
BATS
GSK
SAB
BP
VOD
AZN
RB
DGE
BT.A
LLOY
BLT
NG
IMB
RIO
PRU
RBS
BARC
ABF
REL
REX
CCL
SHP
CPG
WPP
AV.
SKY
GLEN
BA.
TSCO
SSE
STAN
LGEN
ARM
RR.
EXPN
IAG
CRH
CNA
SN.
ITV
WOS
OML
LAND
LSE
KGF
CPI
BLND
WTB
MKS
FRES
NXT
SDR
SL
PSON
BNZL
MNDI
UU
PSN
SGE
EZJ
AAL
TW.
TUI
WPG
RRS
HL
BDEV
IHG
BRBY
DC.
DLG
CCH
SVT
DCC
SBRY
ADM
GKN
JMAT
PFG
ANTO
STJ
ITRK
BAB
BKG
ISAT
TPK
HMSO
MERL
RMG
AHT
RSA
III
INTU
SMIN
HIK
ADN
SPD
Name
Bid
Ask
Last Sale
Bid Size
Ask Size
Last Size
Volume
Quote Time
Quote Time
0
- C1FlexGrid/DynamicUpdates.js
- C1FlexGrid/DynamicUpdates.css
- DynamicUpdatesController.cs
- DynamicUpdates.cshtml
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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 | // This file locates: "Scripts/Lesson/C1FlexGrid/DynamicUpdates.js".c1.documentReady(function () { var theGrid = wijmo.Control.getControl('#theGrid'); theGrid.itemsSource = data; // control panel var customCells = true; var autoUpdate = true; var interval = 100; // update interval in ms: 1000, 500, 100, 10, 1 var batchSize = 5; // items to update: 100, 50, 10, 5, 1 document.getElementById('customCells').addEventListener('click', function (e) { customCells = e.target.checked; theGrid.invalidate(); }); document.getElementById('autoUpdate').addEventListener('click', function (e) { autoUpdate = e.target.checked; theGrid.invalidate(); }); var cmbInterval = wijmo.Control.getControl('#updateInterval'); cmbInterval.selectedIndexChanged.addHandler(function (s, e) { interval = cmbInterval.selectedValue; }); var cmbBatchSize = wijmo.Control.getControl('#batchSize'); cmbBatchSize.selectedIndexChanged.addHandler(function (s, e) { batchSize = cmbBatchSize.selectedValue; }); theGrid.rowHeaders.columns[0].width = 80; // cellElements object keeps track of grid's cell elements var clearCells = false; var cellElements = {}; theGrid.updatingView.addHandler(function (s, e) { clearCells = true; // clear cell elements on next formatItem }); // formatItem hander displays cells and keeps track of cell elements theGrid.formatItem.addHandler(function (s, e) { // show symbols in row headers if (e.panel == s.rowHeaders && e.col == 0) { e.cell.textContent = item = s.rows[e.row].dataItem.symbol; } // regular cells if (e.panel == s.cells) { var col = s.columns[e.col], item = s.rows[e.row].dataItem; // clear cell elements if (clearCells) { clearCells = false; cellElements = {}; } // store cell element if (!cellElements[item.symbol]) { cellElements[item.symbol] = { item: item }; } cellElements[item.symbol][col.binding] = e.cell; // custom painting formatCell(e.cell, item, col, false); } }); // custom cell painting function formatCell(cell, item, col, flare) { if (customCells) { switch (col.binding) { case 'bid': formatDynamicCell(cell, item, col, 'bidHistory', flare); break; case 'ask': formatDynamicCell(cell, item, col, 'askHistory', flare); break; case 'lastSale': formatDynamicCell(cell, item, col, 'saleHistory', flare); break; default: cell.textContent = wijmo.Globalize.format(item[col.binding], col.format); break; } } else { cell.textContent = wijmo.Globalize.format(item[col.binding], col.format); } } function formatDynamicCell(cell, item, col, history, flare) { // cell template var html = '<div class="ticker chg-{dir} flare-{fdir}"> ' + '<div class="value">{value}</div >' + '<div class="chg">{chg}</div>' + '<div class="glyph"><span class="wj-glyph-{glyph}"></span></div>' + '<div class="spark">{spark}</div>' + '</div>'; // value html = html.replace('{value}', wijmo.Globalize.format(item[col.binding], col.format)); // % change var hist = item[history]; var chg = hist.length > 1 ? hist[hist.length - 1] / hist[hist.length - 2] - 1 : 0; html = html.replace('{chg}', wijmo.Globalize.format(chg * 100, 'n1') + '%'); // up/down glyph var glyph = chg > +0.001 ? 'up' : chg < -0.001 ? 'down' : 'circle'; html = html.replace('{glyph}', glyph); // sparklines html = html.replace('{spark}', getSparklines(item[history])); // change direction var dir = glyph == 'circle' ? 'none' : glyph; html = html.replace('{dir}', dir); // flare direction var flareDir = flare ? dir : 'none'; html = html.replace('{fdir}', flareDir); // done cell.innerHTML = html; } // update grid cells when items change function updateGrid(changedItems) { for (var symbol in changedItems) { var itemCells = cellElements[symbol]; if (itemCells) { var item = itemCells.item; theGrid.columns.forEach(function (col) { var cell = itemCells[col.binding]; if (cell) { formatCell(cell, item, col, true); } }) } } } // simulate updates/notifications updateTrades(); function updateTrades() { var now = new Date(); var changedItems = {}; for (var i = 0; i < batchSize; i++) { // select an item var item = data[randBetween(0, data.length - 1)]; // update current data item.bid = item.bid * (1 + (Math.random() * .11 - .05)); item.ask = item.ask * (1 + (Math.random() * .11 - .05)); item.bidSize = randBetween(10, 1000); item.askSize = randBetween(10, 1000); var sale = (item.ask + item.bid) / 2; item.lastSale = sale; item.lastSize = Math.floor((item.askSize + item.bidSize) / 2); item.quoteTime = now; item.tradeTime = new Date(Date.now() + randBetween(0, 60000)); // update history data addHistory(item.askHistory, item.ask); addHistory(item.bidHistory, item.bid); addHistory(item.saleHistory, item.lastSale); // keep track of changed items changedItems[item.symbol] = true; } // update the grid if (autoUpdate) { updateGrid(changedItems); } // and schedule the next batch setTimeout(updateTrades, interval); }});// add a value to a history arrayfunction addHistory(array, data) { array.push(data); if (array.length > 10) { // limit history length array.splice(0, 1); }}// Companies in the Financial Times Stock Exchange 100 Index// mcap: market capitalization (in billion pounds)// emp: employees (thousands)var companies = [ { symbol: 'RDSA', name: 'Royal Dutch Shell', sector: 'Oil and gas', mcap: 160.12, emp: 90 }, { symbol: 'ULVR', name: 'Unilever', sector: 'Consumer goods', mcap: 90.42, emp: 171 }, { symbol: 'HSBA', name: 'HSBC', sector: 'Banking', mcap: 88.11, emp: 267 }, { symbol: 'BATS', name: 'British American Tobacco', sector: 'Tobacco', mcap: 71.4, emp: 87 }, { symbol: 'GSK', name: 'GlaxoSmithKline', sector: 'Pharmaceuticals', mcap: 67.38, emp: 97 }, { symbol: 'SAB', name: 'SABMiller', sector: 'Beverages', mcap: 67.32, emp: 70 }, { symbol: 'BP', name: 'BP', sector: 'Oil and gas', mcap: 63.13, emp: 97 }, { symbol: 'VOD', name: 'Vodafone Group', sector: 'Telecomms', mcap: 56.55, emp: 86 }, { symbol: 'AZN', name: 'AstraZeneca', sector: 'Pharmaceuticals', mcap: 51.23, emp: 57 }, { symbol: 'RB', name: 'Reckitt Benckiser', sector: 'Consumer goods', mcap: 46.32, emp: 32 }, { symbol: 'DGE', name: 'Diageo', sector: 'Beverages', mcap: 46.01, emp: 25 }, { symbol: 'BT.A', name: 'BT Group', sector: 'Telecomms', mcap: 45.61, emp: 89 }, { symbol: 'LLOY', name: 'Lloyds Banking Group', sector: 'Banking', mcap: 44.11, emp: 120 }, { symbol: 'BLT', name: 'BHP Billiton', sector: 'Mining', mcap: 41.88, emp: 46 }, { symbol: 'NG', name: 'National Grid plc', sector: 'Energy', mcap: 36.14, emp: 27 }, { symbol: 'IMB', name: 'Imperial Brands', sector: 'Tobacco', mcap: 35.78, emp: 38 }, { symbol: 'RIO', name: 'Rio Tinto Group', sector: 'Mining', mcap: 34.84, emp: 67 }, { symbol: 'PRU', name: 'Prudential plc', sector: 'Finance', mcap: 31.63, emp: 25 }, { symbol: 'RBS', name: 'Royal Bank of Scotland Group', sector: 'Banking', mcap: 28.6, emp: 150 }, { symbol: 'BARC', name: 'Barclays', sector: 'Banking', mcap: 27.18, emp: 150 }, { symbol: 'ABF', name: 'Associated British Foods', sector: 'Food', mcap: 25.77, emp: 102 }, { symbol: 'REL', name: 'RELX Group', sector: 'Publishing', mcap: 25.54, emp: 28 }, { symbol: 'REX', name: 'Rexam', sector: 'Packaging', mcap: 25.54, emp: 19 }, { symbol: 'CCL', name: 'Carnival Corporation & plc', sector: 'Leisure', mcap: 24.85, emp: 86 }, { symbol: 'SHP', name: 'Shire plc', sector: 'Pharmaceuticals', mcap: 22.52, emp: 4 }, { symbol: 'CPG', name: 'Compass Group', sector: 'Food', mcap: 20.21, emp: 471 }, { symbol: 'WPP', name: 'WPP plc', sector: 'Media', mcap: 19.01, emp: 162 }, { symbol: 'AV.', name: 'Aviva', sector: 'Insurance', mcap: 17.69, emp: 40 }, { symbol: 'SKY', name: 'Sky plc', sector: 'Media', mcap: 17.5, emp: 22 }, { symbol: 'GLEN', name: 'Glencore', sector: 'Mining', mcap: 16.96, emp: 57 }, { symbol: 'BA.', name: 'BAE Systems', sector: 'Military', mcap: 16.01, emp: 107 }, { symbol: 'TSCO', name: 'Tesco', sector: 'Supermarket', mcap: 14.92, emp: 519 }, { symbol: 'SSE', name: 'SSE plc', sector: 'Energy', mcap: 14.03, emp: 19 }, { symbol: 'STAN', name: 'Standard Chartered', sector: 'Banking', mcap: 13.52, emp: 86 }, { symbol: 'LGEN', name: 'Legal & General', sector: 'Insurance', mcap: 13.21, emp: 9 }, { symbol: 'ARM', name: 'ARM Holdings', sector: 'Engineering', mcap: 13.2, emp: 2 }, { symbol: 'RR.', name: 'Rolls-Royce Holdings', sector: 'Manufacturing', mcap: 11.8, emp: 55 }, { symbol: 'EXPN', name: 'Experian', sector: 'Information', mcap: 11.1, emp: 17 }, { symbol: 'IAG', name: 'International Consolidated Airlines Group SA', sector: 'Travel', mcap: 11.01, emp: 58 }, { symbol: 'CRH', name: 'CRH plc', sector: 'Building materials', mcap: 10.9, emp: 76 }, { symbol: 'CNA', name: 'Centrica', sector: 'Energy', mcap: 10.72, emp: 40 }, { symbol: 'SN.', name: 'Smith & Nephew', sector: 'Medical', mcap: 10.27, emp: 11 }, { symbol: 'ITV', name: 'ITV plc', sector: 'Media', mcap: 10.15, emp: 4 }, { symbol: 'WOS', name: 'Wolseley plc', sector: 'Building materials', mcap: 9.2, emp: 44 }, { symbol: 'OML', name: 'Old Mutual', sector: 'Insurance', mcap: 8.45, emp: 54 }, { symbol: 'LAND', name: 'Land Securities', sector: 'Property', mcap: 8.19, emp: 0 }, { symbol: 'LSE', name: 'London Stock Exchange Group', sector: 'Finance', mcap: 8.06, emp: 4 }, { symbol: 'KGF', name: 'Kingfisher plc', sector: 'Retail homeware', mcap: 7.8, emp: 80 }, { symbol: 'CPI', name: 'Capita', sector: 'Support Services', mcap: 7.38, emp: 46 }, { symbol: 'BLND', name: 'British Land', sector: 'Property', mcap: 7.13, emp: 0 }, { symbol: 'WTB', name: 'Whitbread', sector: 'Retail hospitality', mcap: 7.09, emp: 86 }, { symbol: 'MKS', name: 'Marks & Spencer', sector: 'Retailer', mcap: 7.01, emp: 81 }, { symbol: 'FRES', name: 'Fresnillo plc', sector: 'Mining', mcap: 6.99, emp: 2 }, { symbol: 'NXT', name: 'Next plc', sector: 'Retail clothing', mcap: 6.9, emp: 58 }, { symbol: 'SDR', name: 'Schroders', sector: 'Fund management', mcap: 6.63, emp: 3 }, { symbol: 'SL', name: 'Standard Life', sector: 'Fund management', mcap: 6.63, emp: 10 }, { symbol: 'PSON', name: 'Pearson PLC', sector: 'Education', mcap: 6.52, emp: 37 }, { symbol: 'BNZL', name: 'Bunzl', sector: 'Industrial products', mcap: 6.38, emp: 12 }, { symbol: 'MNDI', name: 'Mondi', sector: 'Manufacturing', mcap: 6.37, emp: 26 }, { symbol: 'UU', name: 'United Utilities', sector: 'Water', mcap: 6.36, emp: 5 }, { symbol: 'PSN', name: 'Persimmon plc', sector: 'Building', mcap: 6.34, emp: 2 }, { symbol: 'SGE', name: 'Sage Group', sector: 'IT', mcap: 6.26, emp: 12 }, { symbol: 'EZJ', name: 'EasyJet', sector: 'Travel', mcap: 6.17, emp: 11 }, { symbol: 'AAL', name: 'Anglo American plc', sector: 'Mining', mcap: 6.09, emp: 100 }, { symbol: 'TW.', name: 'Taylor Wimpey', sector: 'Building', mcap: 5.99, emp: 3 }, { symbol: 'TUI', name: 'TUI Group', sector: 'Leisure', mcap: 5.99, emp: 76 }, { symbol: 'WPG', name: 'Worldpay', sector: 'Payment services', mcap: 5.9, emp: 4 }, { symbol: 'RRS', name: 'Randgold Resources', sector: 'Mining', mcap: 5.89, emp: 6 }, { symbol: 'HL', name: 'Hargreaves Lansdown', sector: 'Finance', mcap: 5.87, emp: 0 }, { symbol: 'BDEV', name: 'Barratt Developments', sector: 'Building', mcap: 5.86, emp: 5 }, { symbol: 'IHG', name: 'InterContinental Hotels Group', sector: 'Hotels', mcap: 5.75, emp: 345 }, { symbol: 'BRBY', name: 'Burberry', sector: 'Fashion', mcap: 5.65, emp: 10 }, { symbol: 'DC.', name: 'Dixons Carphone', sector: 'Retail', mcap: 5.16, emp: 40 }, { symbol: 'DLG', name: 'Direct Line Group', sector: 'Insurance', mcap: 5.15, emp: 13 }, { symbol: 'CCH', name: 'Coca-Cola HBC AG', sector: 'Consumer', mcap: 5.1, emp: 38 }, { symbol: 'SVT', name: 'Severn Trent', sector: 'Water', mcap: 5.04, emp: 8 }, { symbol: 'DCC', name: 'DCC plc', sector: 'Investments', mcap: 5.03, emp: 9 }, { symbol: 'SBRY', name: 'Sainsbury\'s', sector: 'Supermarket', mcap: 5.02, emp: 150 }, { symbol: 'ADM', name: 'Admiral Group', sector: 'Insurance', mcap: 4.91, emp: 2 }, { symbol: 'GKN', name: 'GKN', sector: 'Manufacturing', mcap: 4.79, emp: 50 }, { symbol: 'JMAT', name: 'Johnson Matthey', sector: 'Chemicals', mcap: 4.79, emp: 9 }, { symbol: 'PFG', name: 'Provident Financial', sector: 'Finance', mcap: 4.74, emp: 3 }, { symbol: 'ANTO', name: 'Antofagasta', sector: 'Mining', mcap: 4.71, emp: 4 }, { symbol: 'STJ', name: 'St. James\'s Place plc', sector: 'Finance', mcap: 4.68, emp: 1 }, { symbol: 'ITRK', name: 'Intertek', sector: 'Product testing', mcap: 4.67, emp: 33 }, { symbol: 'BAB', name: 'Babcock International', sector: 'Engineering', mcap: 4.65, emp: 34 }, { symbol: 'BKG', name: 'Berkeley Group Holdings', sector: 'Building', mcap: 4.6, emp: 2 }, { symbol: 'ISAT', name: 'Inmarsat', sector: 'Telecomms', mcap: 4.47, emp: 1 }, { symbol: 'TPK', name: 'Travis Perkins', sector: 'Retailer', mcap: 4.46, emp: 24 }, { symbol: 'HMSO', name: 'Hammerson', sector: 'Property', mcap: 4.42, emp: 0 }, { symbol: 'MERL', name: 'Merlin Entertainments', sector: 'Leisure', mcap: 4.42, emp: 28 }, { symbol: 'RMG', name: 'Royal Mail', sector: 'Delivery', mcap: 4.41, emp: 150 }, { symbol: 'AHT', name: 'Ashtead Group', sector: 'Equipment rental', mcap: 4.26, emp: 12 }, { symbol: 'RSA', name: 'RSA Insurance Group', sector: 'Insurance', mcap: 4.16, emp: 21 }, { symbol: 'III', name: '3i', sector: 'Private equity', mcap: 4.06, emp: 0 }, { symbol: 'INTU', name: 'Intu Properties', sector: 'Property', mcap: 3.89, emp: 2 }, { symbol: 'SMIN', name: 'Smiths Group', sector: 'Engineering', mcap: 3.84, emp: 23 }, { symbol: 'HIK', name: 'Hikma Pharmaceuticals', sector: 'Manufacturing', mcap: 3.71, emp: 6 }, { symbol: 'ADN', name: 'Aberdeen Asset Management', sector: 'Fund management', mcap: 3.14, emp: 1 }, { symbol: 'SPD', name: 'Sports Direct', sector: 'Retail', mcap: 2.4, emp: 17 }];// Trading Market Datavar data = [], now = new Date();companies.forEach(function (company) { var bid = randBetween(1, 100000) / 100, ask = bid + randBetween(0, 100) / 100; data.push({ symbol: company.symbol, name: company.name, bid: bid, ask: ask, lastSale: bid, bidSize: randBetween(10, 500), askSize: randBetween(10, 500), lastSize: randBetween(10, 500), volume: randBetween(10000, 20000), quoteTime: now, tradeTime: now, askHistory: [ask, ask], bidHistory: [bid, bid], saleHistory: [bid, bid] });});// get a random number within a given intervalfunction randBetween(min, max) { return Math.floor(Math.random() * (max - min + 1) + min);}// generate sparklines as SVGfunction getSparklines(data) { var svg = '', min = Math.min.apply(Math, data), max = Math.max.apply(Math, data), x1 = 0, y1 = scaleY(data[0], min, max); for (var i = 1; i < data.length; i++) { var x2 = Math.round((i) / (data.length - 1) * 100); var y2 = scaleY(data[i], min, max); svg += '<line x1=' + x1 + '% y1=' + y1 + '% x2=' + x2 + '% y2=' + y2 + '% />'; x1 = x2; y1 = y2; } return '<svg><g>' + svg + '</g></svg>';}function scaleY(value, min, max) { return max > min ? 100 - Math.round((value - min) / (max - min) * 100) : 0;} |
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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | // This file locates: "Content/css/Lesson/C1FlexGrid/DynamicUpdates.css"..wj-flexgrid { max-height: 500px;}.wj-flexgrid .wj-cell { padding: 6px;}.wj-flexgrid .wj-cell:not(.wj-header) { border-bottom: none;}/* ticker cell */.ticker div { display: inline-block;}.ticker .chg { font-size: 75%; opacity: .75; text-align: center; width: 4em;}.ticker .glyph { font-size: 120%; text-align: center; width: 1em;}.ticker .spark { padding: 0 4px; width: 4em; height: 1em; opacity: .65;}.ticker .spark svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2px; overflow: visible;}/* value going up */.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .ticker.chg-up .chg,.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .ticker.chg-up .glyph { color: green;}/* value going down */.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .ticker.chg-down .chg,.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .ticker.chg-down .glyph { color: red;}/* value not changing */.ticker.chg-none .chg,.ticker.chg-none .glyph { opacity: .25;}/* up/down 'flare' animations */.ticker.flare-up:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: 1s ease-out flare-up;}@keyframes flare-up { from { background: rgba(50, 255, 50, 0.5); }}.ticker.flare-down:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: 1s ease-out flare-down;}@keyframes flare-down { from { background: rgba(255, 50, 50, 0.5); }} |
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: DynamicUpdates public ActionResult DynamicUpdates() { 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 | <h1> @Html.Raw(Resources.C1FlexGrid.DynamicUpdates_Title)</h1><p> @Html.Raw(Resources.C1FlexGrid.DynamicUpdates_Text1)</p><p> @Html.Raw(Resources.C1FlexGrid.DynamicUpdates_Text2)</p><p> @Html.Raw(Resources.C1FlexGrid.DynamicUpdates_Text3)</p><div class="demo-settings"> <label>@Html.Raw(Resources.C1FlexGrid.DynamicUpdates_Text4)</label> <input id="customCells" type="checkbox" checked="checked"> <br /> <label>@Html.Raw(Resources.C1FlexGrid.DynamicUpdates_Text5)</label> <input id="autoUpdate" type="checkbox" checked="checked"> <br /> <label>@Html.Raw(Resources.C1FlexGrid.DynamicUpdates_Text6)</label> @(Html.C1().ComboBox<int>().Id("updateInterval").Bind(new[] { 1000, 500, 100, 10, 1 }).SelectedValue(100)) <br /> <label>@Html.Raw(Resources.C1FlexGrid.DynamicUpdates_Text7)</label> @(Html.C1().ComboBox<int>().Id("batchSize").Bind(new[] { 100, 50, 10, 5, 1 }).SelectedValue(5))</div>@(Html.C1().FlexGrid().Id("theGrid") .IsReadOnly(true) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row) .AutoGenerateColumns(false) .Columns(cs=> { cs.Add().Binding("name").Header("Name").Width("200"); cs.Add().Binding("bid").Header("Bid").Format("n2").Width("200"); cs.Add().Binding("ask").Header("Ask").Format("n2").Width("200"); cs.Add().Binding("lastSale").Header("Last Sale").Format("n2").Width("200"); cs.Add().Binding("bidSize").Header("Bid Size").Format("n0"); cs.Add().Binding("askSize").Header("Ask Size").Format("n0"); cs.Add().Binding("lastSize").Header("Last Size").Format("n0"); cs.Add().Binding("volume").Header("Volume").Format("n0"); cs.Add().Binding("quoteTime").Header("Quote Time").Format("hh:mm:ss").Align("center"); cs.Add().Binding("quoteTime").Header("Quote Time").Format("hh:mm:ss").Align("center"); }) .Filterable()) |