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

[Nicolas Siatras]

hi,

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?

Regards,

Nikolas Siatras

[Prasanna Kumar Viswanathan]

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);

            $("#Grid").ejGrid({

                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(!this.initialRender){

                    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);

                                                                                                }

                        else

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

                                                                    }

                                                                }

                                                   }

            });

                   });

                  

                   $("#button").ejButton({

                      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;

            }

            $("#Grid").ejGrid("refreshContent");

                                  }

                   });

    </script>

 

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

Regards,

Prasanna Kumar N.S.V