jQuery UI Widgets Forums Grid Realtime stock price update with tick update color

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • kannan M
    Participant

    Hi

    I am using jqxGrid for updating real-time stock price update. I wanted highlight the cell with different background color depending on if the new update is positive or negative. And that should stay only for few milli seconds. Something like jquery toggleClass


    Dimitar
    Participant

    Hi kannan M,

    You can add your custom styling either via the callback function cellsrenderer or cellclassname. When your data is updated, the callback you implemented will be invoked again and the cells will be re-styled accordingly.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    kannan M
    Participant

    Hi Dimitar,

    Thanks for your quick and prompt response. I am already using cellsrenderer to change the background color based on the positive or negative movement. However that background color will stay until the next update comes. What I wanted is to just highlight with red or green color and reset to original background… Which means may be I have to add a class and then remove after some interval.

    Thanks again for your help.

    Regards
    Kannan


    Dimitar
    Participant

    Hi Kannan,

    In cellsrenderer, you can have a flag variable set to true when the data has just been updated, which allows the cellsrenderer to colour the cells. After a certain time has passed, set the variable to false and call the grid’s render method, which will invoke cellsrenderer, but the flag, being set to false, will not colour the cells. The cellsrenderer code can be something like this:

    var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
        if (flag === true) {
            return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
        } else {
            return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + value + '</span>';
        }
    }

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.