How to implement data live streaming on the Javascript Grid

2 mins read

This knowledge base 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, queryCellIfo 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 column’s 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);
}