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
593.99
0.0%
594.68
0.0%
593.99
0.0%
168
369
52
19,395
09:57:16
09:57:16
Unilever
983.17
0.0%
983.86
0.0%
983.17
0.0%
219
246
128
14,032
09:57:16
09:57:16
HSBC
143.73
0.0%
144.20
0.0%
143.73
0.0%
27
396
449
18,685
09:57:16
09:57:16
British American Tobacco
979.72
0.0%
980.10
0.0%
979.72
0.0%
418
474
323
13,084
09:57:16
09:57:16
GlaxoSmithKline
576.19
4.5%
532.92
-3.4%
554.55
0.6%
387
109
248
14,084
09:57:16
09:57:16
SABMiller
50.13
3.2%
47.25
-4.3%
48.69
0.3%
445
695
570
19,970
09:57:16
09:57:17
BP
164.71
0.0%
165.37
0.0%
164.71
0.0%
161
464
381
19,026
09:57:16
09:57:16
Vodafone Group
603.09
4.2%
602.59
4.0%
602.84
4.2%
291
616
453
18,324
09:57:16
09:57:17
AstraZeneca
611.98
0.0%
612.81
0.0%
611.98
0.0%
378
211
157
17,686
09:57:16
09:57:16
Reckitt Benckiser
582.56
0.0%
582.72
0.0%
582.56
0.0%
48
261
14
19,586
09:57:16
09:57:16
Diageo
998.72
3.8%
986.64
2.4%
992.68
3.1%
969
560
764
13,161
09:57:16
09:57:17
BT Group
626.88
2.6%
640.67
4.8%
633.78
3.8%
392
907
649
10,544
09:57:16
09:57:17
Lloyds Banking Group
96.70
5.4%
92.72
0.9%
94.71
3.3%
524
189
356
13,735
09:57:16
09:57:17
BHP Billiton
143.68
0.0%
144.64
0.0%
143.68
0.0%
287
341
227
16,705
09:57:16
09:57:16
National Grid plc
526.17
-2.8%
540.67
-0.3%
533.42
-1.5%
900
383
641
18,095
09:57:16
09:57:17
Imperial Brands
492.79
0.0%
492.90
0.0%
492.79
0.0%
422
243
136
19,670
09:57:16
09:57:16
Rio Tinto Group
126.56
0.0%
127.55
0.0%
126.56
0.0%
217
273
59
13,827
09:57:16
09:57:16
Prudential plc
916.79
-0.9%
917.17
-0.9%
916.98
-0.8%
707
236
471
17,657
09:57:16
09:57:17
Royal Bank of Scotland Group
938.37
1.7%
884.36
-4.3%
911.37
-1.3%
352
213
282
12,053
09:57:16
09:57:17
Barclays
650.09
-0.6%
688.34
5.1%
669.22
2.3%
86
324
205
10,547
09:57:16
09:57:17
Associated British Foods
251.28
0.0%
251.91
0.0%
251.28
0.0%
421
11
276
11,581
09:57:16
09:57:16
RELX Group
631.80
0.0%
632.02
0.0%
631.80
0.0%
499
403
264
10,060
09:57:16
09:57:16
Rexam
787.47
-4.1%
861.42
-4.7%
824.45
-4.4%
919
254
586
15,786
09:57:16
09:57:17
Carnival Corporation & plc
52.24
0.0%
52.77
0.0%
52.24
0.0%
350
311
28
16,086
09:57:16
09:57:16
Shire plc
797.09
4.7%
777.49
-1.8%
787.29
1.4%
512
927
719
17,767
09:57:16
09:57:17
Compass Group
344.44
0.0%
344.84
0.0%
344.44
0.0%
128
316
206
12,326
09:57:16
09:57:16
WPP plc
124.80
0.0%
125.11
0.0%
124.80
0.0%
356
263
487
19,802
09:57:16
09:57:16
Aviva
940.73
0.0%
940.95
0.0%
940.73
0.0%
384
191
321
10,672
09:57:16
09:57:16
Sky plc
667.34
0.0%
667.43
0.0%
667.34
0.0%
353
18
349
19,876
09:57:16
09:57:16
Glencore
130.27
0.3%
132.27
1.3%
131.27
1.0%
827
107
467
10,279
09:57:16
09:57:17
BAE Systems
871.10
2.8%
868.04
2.4%
869.57
2.7%
286
815
550
13,928
09:57:16
09:57:17
Tesco
387.91
0.0%
388.31
0.0%
387.91
0.0%
250
23
178
12,928
09:57:16
09:57:16
SSE plc
317.77
3.7%
306.68
-0.3%
312.23
1.9%
507
200
353
16,229
09:57:16
09:57:17
Standard Chartered
774.97
0.0%
775.55
0.0%
774.97
0.0%
223
230
305
14,368
09:57:16
09:57:16
Legal & General
521.69
4.6%
526.55
5.5%
524.12
5.1%
214
701
457
10,164
09:57:16
09:57:17
ARM Holdings
994.68
0.0%
995.24
0.0%
994.68
0.0%
438
248
448
13,633
09:57:16
09:57:16
Rolls-Royce Holdings
297.21
0.0%
298.05
0.0%
297.21
0.0%
412
448
228
18,316
09:57:16
09:57:16
Experian
646.96
0.0%
647.02
0.0%
646.96
0.0%
310
119
349
19,448
09:57:16
09:57:16
International Consolidated Airlines Group SA
478.25
0.0%
478.86
0.0%
478.25
0.0%
151
108
430
18,154
09:57:16
09:57:16
CRH plc
955.28
0.0%
955.76
0.0%
955.28
0.0%
156
119
191
13,169
09:57:16
09:57:16
Centrica
484.97
-5.0%
567.47
0.6%
526.22
-2.0%
335
861
598
18,493
09:57:16
09:57:17
Smith & Nephew
825.69
0.0%
826.69
0.0%
825.69
0.0%
17
244
70
17,733
09:57:16
09:57:16
ITV plc
691.14
0.0%
691.19
0.0%
691.14
0.0%
318
18
289
14,147
09:57:16
09:57:16
Wolseley plc
791.48
0.0%
792.21
0.0%
791.48
0.0%
327
294
13
14,127
09:57:16
09:57:16
Old Mutual
611.30
0.0%
611.68
0.0%
611.30
0.0%
438
425
45
14,698
09:57:16
09:57:16
Land Securities
810.48
0.0%
810.88
0.0%
810.48
0.0%
13
200
66
15,673
09:57:16
09:57:16
London Stock Exchange Group
446.42
0.0%
446.82
0.0%
446.42
0.0%
250
375
478
12,513
09:57:16
09:57:16
Kingfisher plc
860.65
0.0%
861.53
0.0%
860.65
0.0%
260
46
234
15,976
09:57:16
09:57:16
Capita
465.49
0.0%
465.68
0.0%
465.49
0.0%
406
44
190
19,388
09:57:16
09:57:16
British Land
925.27
0.0%
925.87
0.0%
925.27
0.0%
384
206
266
11,317
09:57:16
09:57:16
Whitbread
322.03
0.0%
322.67
0.0%
322.03
0.0%
304
307
94
16,127
09:57:16
09:57:16
Marks & Spencer
357.67
0.0%
358.02
0.0%
357.67
0.0%
244
266
422
16,835
09:57:16
09:57:16
Fresnillo plc
92.88
2.7%
94.41
4.2%
93.64
3.5%
548
378
463
18,020
09:57:16
09:57:17
Next plc
39.51
0.0%
39.57
0.0%
39.51
0.0%
105
283
364
15,938
09:57:16
09:57:16
Schroders
258.97
0.0%
259.32
0.0%
258.97
0.0%
176
429
496
12,393
09:57:16
09:57:16
Standard Life
862.82
-2.6%
866.82
1.7%
864.82
-0.5%
674
764
719
18,684
09:57:16
09:57:17
Pearson PLC
22.09
0.0%
22.29
0.0%
22.09
0.0%
385
134
255
16,866
09:57:16
09:57:16
Bunzl
640.14
0.0%
640.88
0.0%
640.14
0.0%
43
58
369
18,981
09:57:16
09:57:16
Mondi
321.10
-0.2%
328.30
1.7%
324.70
0.9%
760
595
677
13,410
09:57:16
09:57:16
United Utilities
655.56
0.0%
656.10
0.0%
655.56
0.0%
176
322
60
17,793
09:57:16
09:57:16
Persimmon plc
843.96
0.0%
844.19
0.0%
843.96
0.0%
166
95
53
16,907
09:57:16
09:57:16
Sage Group
609.03
0.0%
609.35
0.0%
609.03
0.0%
264
189
398
14,887
09:57:16
09:57:16
EasyJet
547.36
0.0%
548.28
0.0%
547.36
0.0%
68
253
390
19,519
09:57:16
09:57:16
Anglo American plc
93.93
-2.2%
100.89
4.8%
97.41
1.4%
991
501
746
14,716
09:57:16
09:57:17
Taylor Wimpey
378.85
0.0%
379.30
0.0%
378.85
0.0%
224
373
348
17,362
09:57:16
09:57:16
TUI Group
947.15
0.0%
948.12
0.0%
947.15
0.0%
487
110
257
17,939
09:57:16
09:57:16
Worldpay
691.34
0.0%
691.70
0.0%
691.34
0.0%
11
91
155
10,771
09:57:16
09:57:16
Randgold Resources
984.97
0.0%
985.80
0.0%
984.97
0.0%
382
102
54
15,119
09:57:16
09:57:16
Hargreaves Lansdown
413.23
2.2%
420.71
3.9%
416.97
3.1%
662
264
463
13,946
09:57:16
09:57:17
Barratt Developments
554.48
0.0%
554.60
0.0%
554.48
0.0%
372
82
42
10,781
09:57:16
09:57:16
InterContinental Hotels Group
919.14
0.0%
919.60
0.0%
919.14
0.0%
335
13
165
10,710
09:57:16
09:57:16
Burberry
339.59
0.0%
340.18
0.0%
339.59
0.0%
296
423
232
18,639
09:57:16
09:57:16
Dixons Carphone
746.18
0.0%
746.95
0.0%
746.18
0.0%
33
276
439
16,916
09:57:16
09:57:16
Direct Line Group
25.69
0.0%
26.33
0.0%
25.69
0.0%
447
490
345
19,748
09:57:16
09:57:16
Coca-Cola HBC AG
353.59
0.0%
353.80
0.0%
353.59
0.0%
220
100
397
19,104
09:57:16
09:57:16
Severn Trent
503.46
-2.7%
523.55
1.1%
513.51
-0.8%
129
665
397
19,281
09:57:16
09:57:17
DCC plc
611.63
0.4%
598.49
-3.8%
605.06
-1.7%
102
757
429
12,437
09:57:16
09:57:17
Sainsbury's
705.44
0.0%
705.73
0.0%
705.44
0.0%
390
385
273
18,552
09:57:16
09:57:16
Admiral Group
692.87
-4.0%
821.37
4.6%
757.12
0.5%
239
230
234
11,888
09:57:16
09:57:17
GKN
733.84
0.0%
734.56
0.0%
733.84
0.0%
174
63
470
10,345
09:57:16
09:57:16
Johnson Matthey
659.31
0.0%
659.48
0.0%
659.31
0.0%
99
125
302
15,239
09:57:16
09:57:16
Provident Financial
962.30
0.0%
962.89
0.0%
962.30
0.0%
197
165
20
11,541
09:57:16
09:57:16
Antofagasta
944.71
-4.2%
1,004.32
-2.2%
974.51
-3.2%
834
502
668
19,994
09:57:16
09:57:17
St. James's Place plc
139.06
0.0%
139.48
0.0%
139.06
0.0%
338
102
357
12,024
09:57:16
09:57:16
Intertek
708.26
2.7%
705.25
2.1%
706.76
2.5%
474
176
325
10,431
09:57:16
09:57:17
Babcock International
810.91
0.0%
811.56
0.0%
810.91
0.0%
222
418
169
12,207
09:57:16
09:57:16
Berkeley Group Holdings
493.99
0.0%
494.48
0.0%
493.99
0.0%
270
341
102
12,331
09:57:16
09:57:16
Inmarsat
538.09
0.0%
538.34
0.0%
538.09
0.0%
179
238
381
14,999
09:57:16
09:57:16
Travis Perkins
26.54
0.0%
26.79
0.0%
26.54
0.0%
119
109
362
19,253
09:57:16
09:57:16
Hammerson
534.80
-3.1%
527.09
-4.5%
530.94
-3.8%
129
370
249
18,423
09:57:16
09:57:17
Merlin Entertainments
88.70
0.0%
88.82
0.0%
88.70
0.0%
161
143
425
17,855
09:57:16
09:57:16
Royal Mail
22.27
0.0%
22.54
0.0%
22.27
0.0%
248
261
200
19,874
09:57:16
09:57:16
Ashtead Group
187.37
4.1%
172.34
-4.4%
179.85
-0.1%
621
171
396
19,354
09:57:16
09:57:17
RSA Insurance Group
534.29
0.0%
534.73
0.0%
534.29
0.0%
182
357
190
15,278
09:57:16
09:57:16
3i
956.92
0.8%
979.35
3.2%
968.14
2.0%
807
957
882
18,911
09:57:16
09:57:17
Intu Properties
331.55
1.4%
340.50
3.8%
336.03
2.7%
634
684
659
17,271
09:57:16
09:57:16
Smiths Group
542.97
0.0%
543.25
0.0%
542.97
0.0%
419
388
185
17,474
09:57:16
09:57:16
Hikma Pharmaceuticals
952.27
0.0%
952.29
0.0%
952.27
0.0%
224
196
444
17,808
09:57:16
09:57:16
Aberdeen Asset Management
647.77
0.0%
648.67
0.0%
647.77
0.0%
431
68
278
19,365
09:57:16
09:57:16
Sports Direct
441.17
0.0%
441.53
0.0%
441.17
0.0%
371
122
293
18,688
09:57:16
09:57:16
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 array
function 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 Data
var 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 interval
function randBetween(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
 
// generate sparklines as SVG
function 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()
)