Update ReadOnly Field on selection change of select field.

Hi, after looking a lot of your suggestion I have come so far that I am able to update a text field where editing = true when I change the selection on select field. But I want to keep that text field editing = false. Below is working code where I want to make "Unit" field as ReadOnly and still able to update from Selection Change of "Item" field .

fields: [
                    {
                        name: "foodItemId", type: "select", valueField: "id", textField: "name", title: "Item", width: "35%", validate: "required", align: "left",
                        items: foodItems,
                        editTemplate: function (value, item) {
                            var grid = this._grid;
                            var $editControl = jsGrid.fields.select.prototype.editTemplate.call(this, value);
                            $editControl.change(function (value, item) {
                                var selectedValue = $(this).val();
                                $.each(foodItemsDataService.foodItems, function (i, item) {
                                    if (item.id == selectedValue) {
                                        grid.fields[1].editControl.val(item.unit.name);
                                        grid.fields[2].editControl.val(item.caloriesPerUnit);
                                    }
                                });
                            });
                            return $editControl;
                        }
                    },
                    {
                        name: "foodItem.unit.name", title: "Unit", type: "text", width: "15%", editing: true
                    }