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. Image for the cookie policy date

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


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

1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team 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

Live Chat Icon For mobile
Up arrow icon