live price update color

[ganeshParticipant]

Hi there,
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 then green or if negative then red. And that should stay only for few milli seconds. Something like jquery toggleClass.
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. can you please provide solution on react typescript.
I am using following code in cellrenderer.

  if (String(value).startsWith("U")) {
      cellValue = String(value).replace("U", "");
      cssClass = "grid_number_cells liveGreen";
    } else if (String(value).startsWith("D")) {
      cellValue = String(value).replace("D", "");
      cssClass = "grid_number_cells liveRed";
    } else {
      cssClass = "grid_number_cells";
    }

Thanks and regards,
Ganesh M.

[HristoParticipant]

Hello Ganesh M.,

In this case, the cellclassname member of the columns property will be useful.
After that, you need to use the refresh method to update the jqxGrid and at that moment the cellclassname callback will be invoked again you need to prohibit the previous class.
In that way you could add a new class or remove the previous one.
Please let me know if you have any other questions.
I would like to suggest you look at this demo.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts