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.
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.
1234store.push([{ type: "insert", data: data }]); // if a new object is createdstore.push([{ type: "update", data: data, key: key }]); // if an existing object is changedstore.push([{ type: "remove", key: key }]); // if an object is removed
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.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273// ... create a new websocket connection using dataset protocolvar ws = new sgcws_dataset("ws://127.0.0.1:5413");// ... when the client connects to websocket serverws.on('open', function(evt){// first request all quotesws.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 startsws.on('sgcbeforesynchronize', function(evt) {vSync = true;});// ... synchronization endsws.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 gridws.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}]);}});
Find below the compiled DevExtreme Data Grid + sgcWebSockets demo for Windows.
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.