title: Nested Table With KnockoutJS Observable array's(Parent & Child Table)
body: <p>I am trying to build a Nested Editable gridview with KnockoutJS, and I have no idea where or what to do with it.</p>
  
  <p>I have started the process by obtaining JSON data from my server and using the Mapping Model to map the required JSON info. I even have the Parent grid with all the required Values.
  Now Based on the selection of the parent grid it should Pass 2 values to the Child then the Child JSON method should appear. And because it's knockout obviously it should be completely observable.</p>
  
  <p>Here is the Code that I have done so far:</p>
  
  <pre><code>var ProductViewmodel;
  
  function bindProductModel(Products) {
      var self = this;
      self.items = ko.mapping.fromJS([]);
      ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
      console.log(ProductViewmodel);
      ko.applyBindings(ProductViewmodel);
  }
  
  function bindModel(data) {
      var self = this;
      self.Locations = ko.mapping.fromJS([]);
      viewModel = ko.mapping.fromJS(data.d, self.Locations);
      console.log(viewModel);
      ko.applyBindings(viewModel);
  }
  
  $(document).ready(function () {
      bindProductModel(data);
      $('#child').click(function () {
          bindModel(data2);
          $('#childtable').show();
      });
  });
  </code></pre>
  
  <p>The JSON that get's returend From Server:</p>
  
  <pre><code>var data = {
      "d": [{
          "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.ProductStagingMethod",
          "ProductSKUID": 2,
          "ProductSKUName": "Decoder 1131",
          "WarehouseID": 1,
          "WarehouseName": "SoftwareDevelopmentTest",
          "SystemAreaName": "Staging",
          "Qty": 5
      }]
  };
  
  var data2 = {
      "d": [{
          "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.StockReturnMethod",
          "LotID": 3,
          "LotName": "TestLot3",
          "AreaID": 11,
          "AreaName": "TestArea2L3",
          "BinID": 20,
          "BinName": "Area10Bin1"
      }, {
          "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.StockReturnMethod",
          "LotID": 4,
          "LotName": "TestLot4",
          "AreaID": 15,
          "AreaName": "TestArea2L4",
          "BinID": 24,
          "BinName": "Area14Bin1"
      }, {
          "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.StockReturnMethod",
          "LotID": 2,
          "LotName": "TestLot2",
          "AreaID": 8,
          "AreaName": "TestArea3L2",
          "BinID": 18,
          "BinName": "Area8Bin2"
      }]
  };
  </code></pre>
  
  <p>And Finally my Simple Table:</p>
  
  <pre><code> &lt;table border="1" cellpadding="0" cellspacing="0"&gt;
   &lt;tbody data-bind="foreach: items"&gt;
     &lt;tr&gt;
     &lt;td&gt;
         &lt;input type="button" name="ShowmetheChild" value="ShowmetheChild" id="child" /&gt;&lt;/td&gt;
      &lt;td data-bind="text: ProductSKUID"&gt;&lt;/td&gt;
      &lt;td data-bind="text: ProductSKUName"&gt;&lt;/td&gt;
      &lt;td data-bind="text: WarehouseID"&gt;&lt;/td&gt;
      &lt;td data-bind="text: WarehouseName"&gt;&lt;/td&gt;
      &lt;td data-bind="text: SystemAreaName"&gt;&lt;/td&gt;
      &lt;td data-bind="text: Qty"&gt;&lt;/td&gt;
      &lt;div id="childtable" style="display: none";&gt;
          &lt;table&gt;
          &lt;tbody data-bind="foreach: Locations&gt;
          &lt;tr&gt;
             &lt;td data-bind="text: LotName"&gt;&lt;/td&gt;
             &lt;td data-bind="text: AreaName"&gt;&lt;/td&gt;
             &lt;td data-bind="text: BinName"&gt;&lt;/td&gt;
             &lt;td&gt;&lt;input type="text" name="Qty" data-bind="text: 0"  /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;/tr&gt;
  
      &lt;/tbody&gt;
  </code></pre>
  
  <p>So In the Parent Table the Qty table should be the Observable (It should decrease with each QTY entered in the Child Table.)</p>
  
  <p>Any advice would be greatly appreciated.</p>