Set item name from combobox to knockout list

Question

I have one issue displaying value from combobox to knockout list. Please image below where i am selecting item from combobox. When i select item from combobox it updates all the rows with same value.

The list on left hand side doesnt store name from combobox in database but it stores id. So combobox and list is connected with column called Status. In my html i have defined list as below where ChangeControlName is the one which i want to bind to list

<tbody data-bind="foreach: versionDataByProduct">

    <tr data-bind="click: $root.EditVersionDetail, css: { selected: isSelected}"   >

        <td data-bind="text: Name "></td>
        <td data-bind="text: Code"></td>
        <td data-bind ="text: PlatformVersionName"></td>
        <td data-bind ="text: ChangeControlName"></td>
      </tr>                 

The combox is loaded as below in my viewmodel

     // Load Change Control List
    function loadChangeControlList() {
        $.ajax({
            url: "../RestService/Product/ChangeControlList",
            type: "PUT",
            contentType: 'application/json',
            processData: false,
            error: function (XMLHttpRequest, textStatus, errorThrown) {

            },
            success: function (allData) {
                var mappedChangeControls = $.map(allData, function (item) {

                    return new changeControlList(item);
                });
                self.ChangeControls(mappedChangeControls);

            }
        });
    }

I have binded my combobox in html as below

<td><select id="selModuleType"  data-bind="options: $root.modules,  optionsCaption: 'Please select Module...' , value: $root.editModuleId , optionsText: 'ModuleName'" /></td>

When i select row on left hand side shown in image above i get selectedrow. On subscribe event of value editModuleId i try to assign value to selected row as below.

self.editChangeControl.subscribe(function (value) {
        if (!value) {
            return;
        }

        self.selecteditem().ChangeControlId(value.Status());

        self.selecteditem().ChangeControlName(value.ChangeControl());

    });

In the code above selecteditem contains the row we selected. ChangeControlId as you can see above in the code is the id of value we select from combobox and this is set correctly to the list. But name is not set correctly. The reason being that ChangeControlId is stored in database. The ChangeControlId is part of table from where these rows are shown. ChangeControlName i want for just display purpose. What should i do? I also tried using computed observable but it shows as "object object" in the list. I used computed observable as below

       this.ChangeControlName = ko.computed({
            read: function () {
                debugger;
                return ko.utils.arrayFirst(self.ChangeControls(), function (item) {
                    if (item.Status() === productVersionId.ChangeControlId()) {
                        return item.ChangeControl();
                    }
                });
            },

            write: function (value) {
                console.log("Value i get " + value);
                return value;
            }
        });

Answer 1

Here you go, the design you have makes it very difficult to get where you want to go.

var VersionModel = function () {
  var self = this;

  self.changeControls = ko.observable([{
    name: "Addressed",
    value: 1
  }, {
    name: "Not Addressed",
    value: 2

  }]);

  console.log(self.changeControls()[0].value);
  self.versionDataByProduct = [{
    Name: "DS",
    Code: "sd",
    PlatformVersionName: "5.5.3",
    ChangeControl: ko.observable(self.changeControls()[0]),
  }, {
    Name: "EF",
    Code: "sd",
    PlatformVersionName: "5.5.3",
    ChangeControl: ko.observable(self.changeControls()[0])
  }];
  self.selected = ko.observable(self.versionDataByProduct[0]);
  self.EditVersionDetail = function (item) {

    self.selected(item);
  };
  self.editModuleId = ko.observable();
  self.modules = [{
    editModuleId: 1,
    ModuleName: "ABW-BP-Batch Input"
  }];

  self.editChangeControl = ko.computed({
    read: function () {
      if (self.selected()) {
          console.log('something selected and editChangeControl is changing');
        return self.selected().ChangeControl();
      }
      return '';
    },
    write: function (value) {
      if (value && value != '') {
          console.log('writing new value');
        self.selected().ChangeControl(value);
      }
    }
  });

}
ko.applyBindings(new VersionModel());

and the html:

<table class="floatLeft">
  <thead>
    <tr>
      <th>Version name</th>
      <th>Version Code</th>
      <th>Framework version</th>
      <th>Change control</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: versionDataByProduct">
    <tr data-bind="click: $root.EditVersionDetail, css: { selected: $root.selected() == $data}">
      <td data-bind="text: Name "></td>
      <td data-bind="text: Code"></td>
      <td data-bind="text: PlatformVersionName"></td>
      <td data-bind="text: ChangeControl().name,attr:{'data-value':ChangeControl().value}"></td>
    </tr>
  </tbody>
</table>
<select id="selModuleType" data-bind="options: $root.modules,  optionsCaption: 'Please select Module...' , value: $root.editModuleId , optionsText: 'ModuleName'"></select>
<select id="selfChangeControl" data-bind="options: $root.changeControls,  optionsCaption: 'Please select Change control...' , value: editChangeControl , optionsText: 'name'"></select>

http://jsfiddle.net/2Khk3/4/