DevExtreme Datagrid WebSocket Protocol

DevExtreme Data Grid, from DevExpress, it's a powerful Data Grid for Javascript. One of the features it's partial updates which allows to update a record of a grid without updating the full page. Usually the update is received using WebSocket protocol.

sgcWebSockets library can be used with DevExtreme Data Grid, allowing to update the Grid in Real-Time without losing performance.

Push API 

DevExtreme uses a push API to update the Grid when a new modification is received. The server pass the data to the clients, usually using WebSocket protocol, and then pushes the modifications to the grid.

1
2
3
4
store.push([{ type: "insert", data: data }]); // if a new object is created
store.push([{ type: "update", data: data, key: key }]); // if an existing object is changed
store.push([{ type: "remove", key: key }]); // if an object is removed 
X

Below is an example of using sgcWebSockets Dataset Protocol with the DevExtreme Push API. It's a WebSocket server that provides Real-Time Stock Quotes to all Clients connected.

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
    // ... create a new websocket connection using dataset protocol
    var ws = new sgcws_dataset("ws://127.0.0.1:5413");
    // ... when the client connects to websocket server
    ws.on('open', function(evt){
        // first request all quotes
        ws.subscribe_all();
    
        // create the grid configuration    
        $("#gridContainer").dxDataGrid({
            dataSource: store,
            showBorders: true,
            repaintChangesOnly: true,
            highlightChanges: true,
            columns: [
            {dataField: "Id"},
            {dataField: "Symbol"},
            {
                dataField: "Open",
                dataType: "number",
                format: "#0.####"
            },
            {
                dataField: "High",
                dataType: "number",
                format: "#0.####"
            },  
            {
                dataField: "Low",
                dataType: "number",
                format: "#0.####"
            },          
            {
                dataField: "Last",
                dataType: "number",
                format: "#0.####"
            }]
        });   
    }); 
    
    // ... synchronization starts
    ws.on('sgcbeforesynchronize', function(evt) {
        vSync = true;
    });
    
    // ... synchronization ends
    ws.on('sgcaftersynchronize', function(evt) {
        vSync = false;
    });
    
    // ... record update is received
    // ... create a new JSON object with stock data information
    // ... call push method to update the grid
    ws.on('sgcdataset', function(evt){ 
      var id = evt.dataset["ID"];
      var symbol = evt.dataset["NAME"];
      var open = evt.dataset["OPEN"].replace(',', '.');
      var high = evt.dataset["HIGH"].replace(',', '.');
      var low = evt.dataset["LOW"].replace(',', '.');
      var last = evt.dataset["LAST"].replace(',', '.');     
      var change = evt.dataset["CHANGE"].replace(',', '.');     
        
      var quote = JSON.parse("{\"Id\":" + id + ", \"Symbol\":\"" + symbol + "\"\"Open\": " + open + ", \"High\": " + high + ", \"Low\": " + low + ", \"Last\": " + last + ", \"Change\": " + change + "}");
      if (vSync == true)
      {
        store.push([{ type: "insert", key: quote.Id, data: quote, index: -1 }]);
      }
      else
      {
        store.push([{ type: "update", key: quote.Id, data: quote}]);
      }
    });  
X

Find below the compiled DevExtreme Data Grid + sgcWebSockets demo for Windows.

File Name: sgcDevExtremeGrid
File Size: 3.3 mb
Download File
×
Stay Informed

When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.

Rad Studio 11 Alexandria
Delphi 3Commas Client

Related Posts