We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

queryCellInfo - Getting the old and the new data of an updating cell

Thread ID:





120940 Oct 28,2015 07:05 PM UTC Oct 29,2015 12:27 PM UTC JavaScript 1
Tags: ejGrid
Nicolas Siatras
Asked On October 28, 2015 07:05 PM UTC


in the queryCellInfo i want to compare new data with old one in order to color according. Data are numeric and if new value is < i want to color it red or > green or if it's same white. 

Also this color will flash. that means after 1 sec i will shitch it back to yellow

Is there a way to get cells prev price? or if i have prev price in $element.text how can i see the new value for that cell?


Nikolas Siatras

Prasanna Kumar Viswanathan [Syncfusion]
Replied On October 29, 2015 12:27 PM UTC

Hi Nikolas,


Thanks for contacting Syncfusion support.


Your requirement has been achieved by the queryCellinfo event of ejGrid. In button click event, we changed the value of the unit price and refreshed the Grid using refresh content method. Initially, we stored the datasource in an array using extend method.

 In the querycellinfo event, we check the condition with initial rendering and compare the new data of unit price with the old data, and apply CSS to the unit price column. Using setTimeout function, we changed the CSS of the unit price column.


Please find the code example and sample:


<script type="text/javascript">

         $(function () {



                                                window.details2 = [];

                                                window.details2 = $.extend(true, [], window.details);


                dataSource: window.details,

                enableRowHover: false,

                allowSelection: false,

                columns: [

                            { field: "productId", headerText: "Product ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 55 },

                            { field: "productName", headerText: "Product Name", width: 160 },

                            { field: "unitPrice", headerText: "Unit Price", textAlign: ej.TextAlign.Right, format: "{0:c2}", width: 65 },

                            { field: "unitsInStock", headerText: "Units In Stock", textAlign: ej.TextAlign.Right, width: 65 },

                            { field: "unitsOnOrder", headerText: "Units On Order", textAlign: ej.TextAlign.Right, width: 75 }


                queryCellInfo: function (args) {


                    if (args.column !== undefined && args.column.field === "unitPrice") {

                        var $element = $(args.cell);

                                                                                                var index = this.getIndexByRow($(args.cell).parent());

                        if (args.data.unitPrice < window.details2[index].unitPrice){

                           $element.css("color", "red");

                                                                                                   setTimeout( function() {

                                                                                                      var $element = $(args.cell);

                                                                                                                  $element.css("color", "yellow");

                                                                                                   }, 1000);


                                                                                                else if(args.data.unitPrice > window.details2[index].unitPrice){

                                                                                                   $element.css("color", "green");

                                                                                                    setTimeout( function() {

                                                                                                      var $element = $(args.cell);

                                                                                                                  $element.css("color", "yellow");

                                                                                                   }, 1000);



                           $element.css("color", "white");








                      click: function(args){

                                   var model = $("#Grid").ejGrid("model");

            for (var i = 0; i < model.dataSource.length; i++) {

                model.dataSource[i].unitPrice = Math.floor(5 * i);

                model.dataSource[i].unitsInStock = Math.floor(Math.random() * 100);

                model.dataSource[i].unitsOnOrder = Math.floor(Math.random() * 5) * 10;







Sample Link: http://jsplayground.syncfusion.com/ayqx1kxp


Prasanna Kumar N.S.V


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon