Hello,

Thank you for your question.

I have created a sample for you in order to show you how to implement similar scenario, basically the read-only cell will be changed and then the summary row will be updated according that change. Please have a look at the sample and let me know if I am missing something from your scenario.

Code snippet:

<script type="text/javascript">
    function WebDataGrid_CellEditing_ExitingEditMode(sender, eventArgs) {
        var columnKey = eventArgs.getCell().get_column().get_key();
 
        switch (columnKey) {
            case "Salary":
                eventArgs.getCell().get_row().get_cellByColumnKey("Total").set_value(eventArgs.getCell().get_value() +
                    eventArgs.getCell().get_row().get_cellByColumnKey("Bonuses").get_value());
                break;
            case "Bonuses":
                eventArgs.getCell().get_row().get_cellByColumnKey("Total").set_value(eventArgs.getCell().get_value() +
                    eventArgs.getCell().get_row().get_cellByColumnKey("Salary").get_value());
                break;
            default:
 
        }
    }
    function WebDataGrid_SummaryRow_Initialize(sender, eventArgs) {
        var e = eventArgs;
    }
    function WebDataGrid_Initialize(sender, eventArgs) {
        var row;
        var cellTotal;
 
        for (var i = 0; i < sender.get_rows().get_length() ; i++) {
            row = sender.get_rows().get_row(i);
            cellTotal = row.get_cellByColumnKey("Total");
            cellTotal.set_value(row.get_cellByColumnKey("Salary").get_value() + row.get_cellByColumnKey("Bonuses").get_value());
        }
    }
    </script>