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
64.17
0.0%
64.69
0.0%
64.17
0.0%
116
92
430
11,792
11:24:59
11:24:59
Unilever
829.75
0.0%
829.89
0.0%
829.75
0.0%
96
387
370
13,018
11:24:59
11:24:59
HSBC
293.96
0.0%
294.40
0.0%
293.96
0.0%
451
228
238
14,322
11:24:59
11:24:59
British American Tobacco
388.28
0.0%
389.05
0.0%
388.28
0.0%
413
137
366
13,391
11:24:59
11:24:59
GlaxoSmithKline
40.36
3.4%
41.03
4.3%
40.70
4.2%
848
102
475
11,081
11:24:59
11:24:59
SABMiller
969.97
0.0%
970.65
0.0%
969.97
0.0%
481
117
262
14,854
11:24:59
11:24:59
BP
869.33
0.0%
869.66
0.0%
869.33
0.0%
152
500
373
11,653
11:24:59
11:24:59
Vodafone Group
359.59
0.0%
359.66
0.0%
359.59
0.0%
372
217
178
14,708
11:24:59
11:24:59
AstraZeneca
299.89
0.0%
300.84
0.0%
299.89
0.0%
288
482
92
16,195
11:24:59
11:24:59
Reckitt Benckiser
164.08
0.0%
164.76
0.0%
164.08
0.0%
134
108
243
15,005
11:24:59
11:24:59
Diageo
137.84
0.0%
138.77
0.0%
137.84
0.0%
17
409
171
14,007
11:24:59
11:24:59
BT Group
694.23
0.0%
694.71
0.0%
694.23
0.0%
28
334
126
10,757
11:24:59
11:24:59
Lloyds Banking Group
352.99
0.0%
353.54
0.0%
352.99
0.0%
210
263
224
11,912
11:24:59
11:24:59
BHP Billiton
948.37
0.0%
948.88
0.0%
948.37
0.0%
183
183
267
12,385
11:24:59
11:24:59
National Grid plc
382.17
0.0%
383.16
0.0%
382.17
0.0%
482
98
414
16,116
11:24:59
11:24:59
Imperial Brands
459.30
0.0%
460.28
0.0%
459.30
0.0%
260
495
210
19,107
11:24:59
11:24:59
Rio Tinto Group
157.40
0.0%
157.40
0.0%
157.40
0.0%
253
297
27
13,179
11:24:59
11:24:59
Prudential plc
952.22
0.0%
952.47
0.0%
952.22
0.0%
33
134
478
18,116
11:24:59
11:24:59
Royal Bank of Scotland Group
774.94
0.0%
775.36
0.0%
774.94
0.0%
90
248
266
17,391
11:24:59
11:24:59
Barclays
264.61
0.0%
265.39
0.0%
264.61
0.0%
414
435
437
16,516
11:24:59
11:24:59
Associated British Foods
434.17
0.0%
434.68
0.0%
434.17
0.0%
49
34
499
11,312
11:24:59
11:24:59
RELX Group
67.45
0.0%
67.61
0.0%
67.45
0.0%
117
225
73
12,772
11:24:59
11:24:59
Rexam
268.33
3.3%
258.50
-0.8%
263.41
1.4%
816
179
497
13,034
11:24:59
11:24:59
Carnival Corporation & plc
894.12
0.0%
894.99
0.0%
894.12
0.0%
188
37
152
11,437
11:24:59
11:24:59
Shire plc
125.73
0.0%
126.55
0.0%
125.73
0.0%
486
248
275
10,365
11:24:59
11:24:59
Compass Group
214.25
4.8%
208.08
1.3%
211.16
3.3%
587
715
651
15,518
11:24:59
11:24:59
WPP plc
528.99
0.0%
529.12
0.0%
528.99
0.0%
276
263
424
13,296
11:24:59
11:24:59
Aviva
919.33
0.0%
920.03
0.0%
919.33
0.0%
13
218
492
17,179
11:24:59
11:24:59
Sky plc
700.92
0.0%
701.16
0.0%
700.92
0.0%
195
193
489
15,595
11:24:59
11:24:59
Glencore
503.93
0.0%
504.17
0.0%
503.93
0.0%
105
110
154
10,424
11:24:59
11:24:59
BAE Systems
559.56
0.0%
559.70
0.0%
559.56
0.0%
187
124
225
16,881
11:24:59
11:24:59
Tesco
366.56
0.0%
367.14
0.0%
366.56
0.0%
162
383
65
15,534
11:24:59
11:24:59
SSE plc
562.31
0.0%
562.95
0.0%
562.31
0.0%
132
256
356
11,791
11:24:59
11:24:59
Standard Chartered
520.11
0.0%
520.66
0.0%
520.11
0.0%
280
303
455
10,502
11:24:59
11:24:59
Legal & General
576.91
0.0%
577.02
0.0%
576.91
0.0%
401
150
48
11,660
11:24:59
11:24:59
ARM Holdings
692.56
0.0%
692.81
0.0%
692.56
0.0%
261
349
209
16,959
11:24:59
11:24:59
Rolls-Royce Holdings
437.35
0.0%
438.19
0.0%
437.35
0.0%
66
250
435
15,267
11:24:59
11:24:59
Experian
673.46
0.0%
673.77
0.0%
673.46
0.0%
453
457
403
19,348
11:24:59
11:24:59
International Consolidated Airlines Group SA
205.83
0.0%
206.14
0.0%
205.83
0.0%
86
337
436
16,758
11:24:59
11:24:59
CRH plc
236.35
0.0%
237.10
0.0%
236.35
0.0%
18
317
495
11,684
11:24:59
11:24:59
Centrica
728.93
0.0%
729.88
0.0%
728.93
0.0%
74
203
173
12,185
11:24:59
11:24:59
Smith & Nephew
957.11
0.0%
958.11
0.0%
957.11
0.0%
401
307
202
11,591
11:24:59
11:24:59
ITV plc
307.29
0.0%
307.39
0.0%
307.29
0.0%
172
65
444
15,638
11:24:59
11:24:59
Wolseley plc
28.02
0.0%
28.57
0.0%
28.02
0.0%
359
160
185
18,469
11:24:59
11:24:59
Old Mutual
836.96
0.0%
837.12
0.0%
836.96
0.0%
202
235
158
12,898
11:24:59
11:24:59
Land Securities
173.59
0.0%
173.91
0.0%
173.59
0.0%
272
90
250
15,988
11:24:59
11:24:59
London Stock Exchange Group
802.86
0.0%
803.14
0.0%
802.86
0.0%
461
210
355
10,457
11:24:59
11:24:59
Kingfisher plc
465.79
0.0%
465.86
0.0%
465.79
0.0%
427
174
53
10,238
11:24:59
11:24:59
Capita
201.01
0.0%
201.87
0.0%
201.01
0.0%
492
430
293
18,604
11:24:59
11:24:59
British Land
569.75
0.0%
570.45
0.0%
569.75
0.0%
88
197
274
10,270
11:24:59
11:24:59
Whitbread
433.38
0.0%
433.72
0.0%
433.38
0.0%
313
112
80
16,299
11:24:59
11:24:59
Marks & Spencer
312.46
0.0%
312.97
0.0%
312.46
0.0%
359
461
422
11,283
11:24:59
11:24:59
Fresnillo plc
251.30
0.0%
258.86
2.8%
255.08
1.5%
725
433
579
15,247
11:24:59
11:24:59
Next plc
93.13
0.0%
93.66
0.0%
93.13
0.0%
400
127
240
16,314
11:24:59
11:24:59
Schroders
385.37
0.0%
386.06
0.0%
385.37
0.0%
99
235
470
12,425
11:24:59
11:24:59
Standard Life
667.94
0.0%
668.41
0.0%
667.94
0.0%
495
259
49
19,934
11:24:59
11:24:59
Pearson PLC
152.71
0.0%
153.27
0.0%
152.71
0.0%
354
302
349
15,088
11:24:59
11:24:59
Bunzl
918.80
0.0%
919.46
0.0%
918.80
0.0%
96
255
324
10,164
11:24:59
11:24:59
Mondi
261.20
0.0%
261.45
0.0%
261.20
0.0%
19
60
22
10,806
11:24:59
11:24:59
United Utilities
1.72
0.0%
2.62
0.0%
1.72
0.0%
68
283
338
16,244
11:24:59
11:24:59
Persimmon plc
121.94
0.0%
122.28
0.0%
121.94
0.0%
430
291
263
12,985
11:24:59
11:24:59
Sage Group
895.86
0.0%
896.22
0.0%
895.86
0.0%
49
474
378
11,601
11:24:59
11:24:59
EasyJet
614.60
0.0%
615.31
0.0%
614.60
0.0%
25
405
139
19,327
11:24:59
11:24:59
Anglo American plc
496.62
0.0%
496.85
0.0%
496.62
0.0%
143
263
67
19,389
11:24:59
11:24:59
Taylor Wimpey
39.15
0.0%
39.42
0.0%
39.15
0.0%
166
136
236
14,868
11:24:59
11:24:59
TUI Group
981.93
0.0%
982.22
0.0%
981.93
0.0%
253
341
135
12,794
11:24:59
11:24:59
Worldpay
407.75
0.0%
408.15
0.0%
407.75
0.0%
181
311
51
13,290
11:24:59
11:24:59
Randgold Resources
27.89
0.0%
28.72
0.0%
27.89
0.0%
397
471
251
12,835
11:24:59
11:24:59
Hargreaves Lansdown
350.20
0.0%
350.37
0.0%
350.20
0.0%
137
188
156
17,248
11:24:59
11:24:59
Barratt Developments
143.64
0.0%
143.90
0.0%
143.64
0.0%
217
230
339
17,881
11:24:59
11:24:59
InterContinental Hotels Group
889.82
0.0%
890.16
0.0%
889.82
0.0%
148
63
435
12,879
11:24:59
11:24:59
Burberry
810.00
0.0%
810.70
0.0%
810.00
0.0%
142
484
181
13,306
11:24:59
11:24:59
Dixons Carphone
75.10
0.0%
75.33
0.0%
75.10
0.0%
385
451
342
13,658
11:24:59
11:24:59
Direct Line Group
104.91
0.0%
105.13
0.0%
104.91
0.0%
366
247
50
19,154
11:24:59
11:24:59
Coca-Cola HBC AG
358.44
0.0%
358.46
0.0%
358.44
0.0%
162
83
380
10,885
11:24:59
11:24:59
Severn Trent
573.95
0.0%
574.45
0.0%
573.95
0.0%
490
491
264
17,716
11:24:59
11:24:59
DCC plc
373.74
0.0%
374.57
0.0%
373.74
0.0%
170
98
70
10,918
11:24:59
11:24:59
Sainsbury's
240.00
0.0%
240.39
0.0%
240.00
0.0%
214
435
290
10,210
11:24:59
11:24:59
Admiral Group
91.10
0.0%
91.48
0.0%
91.10
0.0%
143
396
451
13,654
11:24:59
11:24:59
GKN
75.54
-4.5%
82.45
3.5%
78.99
-0.1%
248
251
249
19,332
11:24:59
11:24:59
Johnson Matthey
910.58
0.0%
911.33
0.0%
910.58
0.0%
179
396
482
10,497
11:24:59
11:24:59
Provident Financial
199.31
0.0%
199.55
0.0%
199.31
0.0%
131
100
338
14,102
11:24:59
11:24:59
Antofagasta
315.82
0.0%
316.65
0.0%
315.82
0.0%
378
476
140
15,513
11:24:59
11:24:59
St. James's Place plc
667.43
0.0%
668.43
0.0%
667.43
0.0%
224
463
142
17,210
11:24:59
11:24:59
Intertek
502.87
0.0%
502.97
0.0%
502.87
0.0%
234
105
343
12,441
11:24:59
11:24:59
Babcock International
132.28
0.0%
132.42
0.0%
132.28
0.0%
444
247
254
15,000
11:24:59
11:24:59
Berkeley Group Holdings
4.06
0.0%
4.21
0.0%
4.06
0.0%
298
346
89
12,589
11:24:59
11:24:59
Inmarsat
711.04
0.0%
711.34
0.0%
711.04
0.0%
181
327
363
17,735
11:24:59
11:24:59
Travis Perkins
672.31
0.0%
672.55
0.0%
672.31
0.0%
272
458
390
18,908
11:24:59
11:24:59
Hammerson
948.71
0.0%
949.71
0.0%
948.71
0.0%
22
99
394
11,154
11:24:59
11:24:59
Merlin Entertainments
575.33
0.0%
575.65
0.0%
575.33
0.0%
220
272
407
18,210
11:24:59
11:24:59
Royal Mail
892.22
0.0%
892.94
0.0%
892.22
0.0%
145
12
28
14,528
11:24:59
11:24:59
Ashtead Group
31.36
0.0%
31.80
0.0%
31.36
0.0%
468
102
266
10,944
11:24:59
11:24:59
RSA Insurance Group
969.59
0.0%
970.21
0.0%
969.59
0.0%
192
436
25
15,717
11:24:59
11:24:59
3i
329.78
0.0%
330.41
0.0%
329.78
0.0%
278
488
284
18,141
11:24:59
11:24:59
Intu Properties
656.41
0.0%
656.71
0.0%
656.41
0.0%
201
275
180
12,538
11:24:59
11:24:59
Smiths Group
177.91
0.0%
178.81
0.0%
177.91
0.0%
180
474
221
19,094
11:24:59
11:24:59
Hikma Pharmaceuticals
378.47
0.0%
378.75
0.0%
378.47
0.0%
128
324
41
17,140
11:24:59
11:24:59
Aberdeen Asset Management
476.05
0.0%
476.56
0.0%
476.05
0.0%
365
216
330
11,382
11:24:59
11:24:59
Sports Direct
149.18
0.0%
149.97
0.0%
149.18
0.0%
469
179
472
18,624
11:24:59
11:24:59
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()) |