Refreshing a single cell

[Nicolas Siatras]

Hi,

First of all thank you for the quick response on all our questions. You have a great team there... 

We have one more question... Is there a way when we change a value in a single cell to refresh only that cell and not the entire grid (...grid.ejGrid("refreshContent"))/ this is what we do now... We need this because queryCellInfo runs for all cells and this is taking valid process time.

Regards,

Nikolas Siatras 

[Balaji Marimuthu]

Hi Nicolas,

Thanks for the feedback.

Your requirement is achieved using the rowDataBound event in Grid. Refer to the sample and code example as below.
Jsplaygroundsample: https://jsplayground.syncfusion.com/xrnc4fih

$("#Grid").ejGrid({

                dataSource: data,

                allowPaging: true,

                allowSorting: true,

                columns: [

                        { field: "OrderID", headerText: "Order ID", width: 75 , textAlign: ej.TextAlign.Right },

                        { field: "CustomerID", headerText: "Customer ID", width: 80 },

                        { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },

                        { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },

                        { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },

                        { field: "ShipCity", headerText: "Ship City", width: 110 }

                ],

             

                rowDataBound: function (args) {

                    if (args.data["OrderID"] == "10250") {

                        args.data["CustomerID"] = "abcdefg";  //change value to the datasource

                        $(args.row).find('td').eq(1).text("abcdefg");  //change value to the cell

                    }

                }
            });

The rowDataBound event is triggered every time a request made to access row information, element and data. So you can change the value of cell using args.row element and refresh value to the Grid using the args.data.

Refer to the Helpdocument:
https://help.syncfusion.com/js/api/ejgrid#events:rowdatabound

Regards,
Balaji Marimuthu

[Nicolas Siatras]

Thanks for your response, although probably not what we are looking for. Let me give a better idea of our requirement.

1. We have a grid bound to a local array

2. We change some data in the array

3. We need the changes to reflect to the grid (now we are calling refreshContent)

4. We need an event for all cells that their value has changed in order to change their background color

The problem is that querycellinfo is being called for EVERY cell in the grid despite that for example only one cell had its value changed. What we are looking for is to probably NOT use refreshContent.

If I understand correctly we can skip refreshContent and go directly and change the cell values by using find('td')..... Would that not cause issues to the operation of the grid? 

By the way our values are changing constantly like in your sample:

http://jsplayground.syncfusion.com/dhgxjx4b

So what we actually need is what is being done in this sample, but an event for the CHANGED cells only and NOT all cells. If you notice for every call to 'refreshContent', queryCellInfo is being called 50 times (once for each cell in the grid). Imagine you have 3-4 grids of 300 cells and you change a value in each, you get 1.200 calls to queryCellInfo which is unacceptable.

[Balaji Marimuthu]

Hi Nicolas,

We have achieved your requirement using the separate function setCellVal. Refer to the sample and code example as below.
Jsplaygroundsample: https://jsplayground.syncfusion.com/j2dgbm54

function refreshGrid() {

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

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

                setCellVal(i, "unitPrice", Math.floor(Math.random() * 50 + 1));

                setCellVal(i, "unitsInStock", Math.floor(Math.random() * 100));

                setCellVal(i, "unitsOnOrder", Math.floor(Math.random() * 5) * 10);

            }

        }

        //index- row index, fieldName- column field name, cellValue - need to set value to the cell

        function setCellVal(index, fieldName, cellValue) {

            obj = $('#Grid').ejGrid('instance');

            var tr = $(obj.getRows()[index]);  //get row index

            var data = obj.model.currentViewData[index];  //get data from currentjson data

            data[fieldName] = cellValue;  //assign value to datasource

            columnIndex = obj.getColumnIndexByField(fieldName);  //get column index

            var $element = $(tr).find('td').eq(columnIndex);

            $element.text(cellValue);  //set value to the cell

            //apply background color to the cell

            if (fieldName === "unitPrice") {

                if (Globalize.parseFloat(Globalize.format($element.text(), "c")) < 30) {

                    $element.css("background-color", "#b0e98f").css("color", "black");

                }

                else {

                    $element.css("background-color", "#f4a496").css("color", "black");

                }

            }
        }

Instead of changing value to the DataSource, we have changed the particular cell value and applied color to the cell using the separate function setCellVal. The value of the cell has been changed by passing the row index, column Field Name and cell value to the function.

So, no need to use refreshContent in Grid and queryCellInfo event to change the element style property & value.

Regards,
Balaji Marimuthu