Grid records cannot be updated

Question

Hi,The Grid cannot be updated dynamically.Is there a solution?The source is listed below.cshtml"Taid" is the primary key.I want to start this application and use setCellValue to change the value of "Status" for an existing record, but I can't.The version you are using is 18.4.0.43.Regards,Pylori.

Rajapandi Ravi · Accepted Answer

Hi Pylori, 

Greetings from syncfusion support 

Based on your query we could see that you like to change the cell value by using setCellValue method and like to get the changed value by using datasource and currentViewData of Grid. 

We would like to inform you that the setCellValue method is used for modifying the cell value only in the UI level and that is why it is not updated on performing the edit action. This is its default behavior. So, if you like to update the modified cell value to the Grid’s dataSource and currentViewData, we suggest you use the updateRow or updateCell method to update the data values which are explained below. 

updateCell: 

We would like to let you know that the updateCell method can be used only with ‘Batch’ edit mode of the Grid. Please check the below API for more information. 

API: https://ej2.syncfusion.com/documentation/api/grid/#updatecell 

updateRow: 

If you need to update the row data in the Grid’s datasource, then we suggest you use the updateRow method. In this method you need to pass the index value of the row to be updated(Which can be retrieved with primary key value using the getRowIndexByPrimaryKey method) along with the updated data. Please check the below API for more information 

API: https://ej2.syncfusion.com/documentation/api/grid/#updaterow 
Regards,Rajapandi R

Pylori · Answer

Hi,Thank you for answering.Changed to use updateCell method instead of setCellValue method and added the following line to Html.EJS().Grid..EditSettings(edit => edit.AllowAdding(true).AllowDeleting(true).AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch))(I don't want users to edit it, so I set "args.cancel = true;" in the beginEdit event.)And I changed javascript as follows.    $.connection.tradeActionHub.client.updateDuringTradeActions = function (data) {

        var data = JSON.parse(data);

        var grid = document.getElementById("ej2TradeActionsGrid").ej2_instances[0];

        var index =
grid.getRowIndexByPrimaryKey(data["Taid"]);

        if (index == -1 && data["Status"] != "取引終了") {

            console.log("grid.addRecord: " + JSON.stringify(data));

            grid.addRecord(data);

        }

        else if (index != -1) {

            console.log("grid.updateCell: " + JSON.stringify(data));

            grid.updateCell(data["Taid"], "Payout", data["Payout"]);

            grid.updateCell(data["Taid"], "LogicName", data["LogicName"]);

            grid.updateCell(data["Taid"], "GameTabName", data["GameTabName"]);

            grid.updateCell(data["Taid"], "Asset", data["Asset"]);

            grid.updateCell(data["Taid"], "TradeActionMarkerType", data["TradeActionMarkerType"]);

            grid.updateCell(data["Taid"], "TradingStrike", data["TradingStrike"]);

            grid.updateCell(data["Taid"], "TradingDateTimeText", data["TradingDateTimeText"]);

            grid.updateCell(data["Taid"], "ExpirationDateTimeText", data["ExpirationDateTimeText"]);

            grid.updateCell(data["Taid"], "Status", data["Status"]);

            grid.updateCell(data["Taid"], "ClosingRate", data["ClosingRate"]);

            grid.updateCell(data["Taid"], "MoneyInvested", data["MoneyInvested"]);

            /*

           
console.log("grid.setCellValue: " + JSON.stringify(data));

           
grid.setCellValue(data["Taid"], "Payout",
data["Payout"]);

           
grid.setCellValue(data["Taid"], "LogicName",
data["LogicName"]);

           
grid.setCellValue(data["Taid"], "GameTabName",
data["GameTabName"]);

           
grid.setCellValue(data["Taid"], "Asset",
data["Asset"]);

           
grid.setCellValue(data["Taid"],
"TradeActionMarkerType", data["TradeActionMarkerType"]);

           
grid.setCellValue(data["Taid"], "TradingStrike",
data["TradingStrike"]);

           
grid.setCellValue(data["Taid"],
"TradingDateTimeText", data["TradingDateTimeText"]);

           
grid.setCellValue(data["Taid"],
"ExpirationDateTimeText", data["ExpirationDateTimeText"]);

           
grid.setCellValue(data["Taid"], "Status", data["Status"]);

           
grid.setCellValue(data["Taid"], "ClosingRate",
data["ClosingRate"]);

           
grid.setCellValue(data["Taid"], "MoneyInvested",
data["MoneyInvested"]);

            */

        }

        else

            console.log("noop: " + JSON.stringify(data));

    };

 

    $.connection.hub.start();But an error occurred.ej2.min.js:10 Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined    at df (ej2.min.js:10)    at cf (ej2.min.js:10)    at e.updateCell (ej2.min.js:10)    at e.updateCell (ej2.min.js:10)    at t.updateCell (ej2.min.js:10)    at init.$.connection.tradeActionHub.client.updateDuringTradeActions ((index):499)    at init.<anonymous> (hubs:25)    at init.handler (jquery.signalR-2.4.1.js:2811)    at init.dispatch (jquery?v=8Oos0avDZyPg-cbyVzvkIfERIE1DGSe3sRQdCSYrgEQ1:1)    at init.a.handle (jquery?v=8Oos0avDZyPg-cbyVzvkIfERIE1DGSe3sRQdCSYrgEQ1:1)By the way, I have asked a similar question before.(Question at that time https://www.syncfusion.com/forums/137932/how-to-dynamically-update-grid)At that time, the problem was solved by using the setCellValue and setRowData methods. (I used addRecord because it didn't work for the setRowData method)Has the spec changed to use the updateCell method now?The requirements for the grid I want to create are the same as before.The requirements for that grid are:1. Users cannot edit. (Reference only)2. Dynamically update cells or add rows based on the data received by SignalR.(In the image of the grid you want to implement: http://demo.grapecity.com/c1/aspnet/LearnMvcClient/C1FlexGrid/DynamicUpdates)How can I implement it?Regards,Pylori.

Pylori · Answer

Hi,After trial and error, I was able to solve it.Receive the data with SignalR and get the index with the findIndex method of grid.dataSource.When adding datagrid.dataSource.push(data);When updating data (cell)grid.dataSource[index].FieldName = data["FieldName"];Finallygrid.refresh();I was able to update the display smoothly.Thank you very much.Regards,Pylori.

Sujith Kumar Rajkumar · Answer

Hi Pylori, 
 
Thanks for the update. We are glad to hear that your query has been resolved. 
 
Also regarding your issue related to the Grid’s updateCell method, we suspect that you might be passing the wrong parameters to the method which might have caused the problem in your case. For your reference, please find the arguments to be passed to this method below, 
 




// gridInstance.updateCell(row index, column field, updated value) 
grid.updateCell(index, 'Payout', data['Payout']); 
 
API link: https://ej2.syncfusion.com/documentation/api/grid/#updatecell 
 
Please get back to us if you require any further assistance with this. 
 
Regards, 
Sujith R