How to implement data live streaming on the Javascript Grid
This article explains how to implement data live streaming on the Javascript Grid. To implement data live streaming in this demo, we used the setCellValue method and the queryCellInfo event of the Grid.
The setCellValue method is used to update the Grid cell values only on the client side. It will not affect the Grid data source.
For cell-level customization, the queryCellInfo event can be used. It has the option to apply your own custom logic to cell formatting and text corrections. The queryCellInfo event will be triggered before rendering the cell.
In the following sample, Change %, Net, NetIncome, and Rating columns' cell values are updated dynamically using the setCellValue() method of the Grid. The color of the text can be changed using the queryCellInfo event of the Grid. In that event, you can add the custom CSS class based on the cell value.
let num: number = Math.floor(Math.random() * 99) + 1; num *= Math.floor(Math.random() * 2) == 1 ? 1 : -1; num = num * 0.25; isDataBound = true; oldValue = grid.currentViewData[i]['Net']; grid.setCellValue(grid.currentViewData[i]['CountryCode'], 'Net',parseFloat(num.toFixed(2))); isDataBound = true; newValue = parseFloat((grid.currentViewData[i]['Net'] - oldValue).toString().substring(0, 2)); grid.setCellValue(grid.currentViewData[i]['CountryCode'], 'change', parseFloat(newValue.toFixed(2))); isDataBound = true; let ratingValue: string = grid.currentViewData[i]['Net'] < 0 ? 'Sell' : 'Buy'; grid.setCellValue(grid.currentViewData[i]['CountryCode'], 'Rating', ratingValue); let val = num + newValue; grid.setCellValue(grid.currentViewData[i]['CountryCode'], 'NetIncome',val);
function queryCellInfo(args: any): void {
if (args.column.field === 'NetIncome') {
if (args.data['Net'] < 0) {
args.cell.classList.remove('e-increase');
args.cell.classList.add('e-decrease');
} else if (args.data['Net'] > 0) {
args.cell.classList.remove('e-decrease');
args.cell.classList.add('e-increase');
}
} else if (args.column.field === 'change') {
if (args.data.change < 0) {
updateCellDetails(args.cell, 'below-0');
} else {
updateCellDetails(args.cell, 'above-0');
}
} else if (args.column.field === 'Net') {
if (args.data.Net < 0) {
updateCellDetails(args.cell, 'below-0');
} else {
updateCellDetails(args.cell, 'above-0');
}
} else if (isDataBound) {
if (args.data[args.column.field] < 0) {
args.cell.classList.remove('e-pos');
args.cell.classList.add('e-neg');
} else if (args.column.field === 'Rating') {
if (args.data['Net'] < 0) {
let span = document.createElement('span');
span.classList.add('ic');
span.classList.add('e-negc');
span.classList.add('e-icons');
span.classList.add('e-icon-descending');
span.classList.add('ic');
args.cell.appendChild(span);
args.cell.classList.remove('e-pos');
args.cell.classList.add('e-neg');
} else {
let span = document.createElement('span');
span.classList.add('ic');
span.classList.add('e-posc');
span.classList.add('e-icons');
span.classList.add('e-icon-ascending');
span.classList.add('ic');
args.cell.appendChild(span);
args.cell.classList.remove('e-neg');
args.cell.classList.add('e-pos');
}
} else {
args.cell.classList.remove('e-neg');
args.cell.classList.add('e-pos');
}
}
isDataBound = false;
}
function updateCellDetails(cell: any, className: any) {
var div = document.createElement('div');
var span1 = document.createElement('span');
span1.classList.add('rowcell-left');
div.classList.add(className);
span1.innerHTML = cell.innerHTML;
div.appendChild(span1);
cell.appendChild(div);
}
Output
You can find the sample here :Javascript Sample
Note:
Initially, the sample is in a non-update state. You need to click the (start data update) button for a live update.
Documentation
https://ej2.syncfusion.com/documentation/grid/getting-started/
