title: How to get data from master view to detail view
body: <p>I have an <a href="http://imgur.com/lUbpnvH" rel="nofollow">image to illustrate</a> my question<br />
  I'm using devextreme, html, js(knockout), c#, odata
  This is my code : </p>
  
  <p><strong>order-details.dxview</strong></p>
  
  <pre><code>&lt;div data-options="dxView : { name: 'OrderDetail', title: 'Order' } " &gt;
  &lt;div data-bind="dxCommand: { onExecute: '#OrderEdit/{id}', direction: 'none', id: 'edit', title: 'Edit', icon: 'edit' }"&gt;&lt;/div&gt;
  &lt;div data-bind="dxCommand: { onExecute: handleDelete, id: 'delete', title: 'Delete', icon: 'remove' }"&gt;&lt;/div&gt;
  &lt;div  data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-detail-view dx-content-background" data-bind="dxDeferRendering: { showLoadIndicator: true, staggerItemSelector: 'dx-fieldset-header,.dx-field', animation: 'detail-item-rendered', renderWhen: isReady }" &gt;
      &lt;div data-bind="dxScrollView: { }"&gt;
          &lt;div class="dx-fieldset"&gt;
              &lt;div class="dx-fieldset-header" data-bind="text: order.PhoneNumber"&gt;&lt;/div&gt;
              &lt;div class="dx-field"&gt;
                  &lt;div class="dx-field-label"&gt;Order id&lt;/div&gt;
                  &lt;div class="dx-field-value-static" data-bind="text: order.OrderId"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="dx-field"&gt;
                  &lt;div class="dx-field-label"&gt;Phone number&lt;/div&gt;
                  &lt;div class="dx-field-value-static" data-bind="text: order.PhoneNumber"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="dx-field"&gt;
                  &lt;div class="button-info" data-bind="dxButton: { text: 'Add Item', onClick: '#AddItem/{order.OrderId}', icon: 'add', type: 'success' }"&gt;&lt;/div&gt;
                  &lt;!-- Item List --&gt;
                  &lt;div data-bind="dxList: { dataSource: dataSource, pullRefreshEnabled: true }"&gt;
                      &lt;div data-bind="dxAction: '#OrderDetailDetails/{OrderDetailId}'" data-options="dxTemplate : { name: 'item' } "&gt;
                          &lt;!--&lt;div class="list-item" data-bind="text: Item().ItemName"&gt;&lt;/div&gt;
                          &lt;div class="list-item" style="float:right;" data-bind="text: Amount"&gt;&lt;/div&gt;--&gt;
                          &lt;div class="item-name" data-bind="text: Item().ItemName"&gt;&lt;/div&gt;
                          &lt;div class="item-amount" data-bind="text: Amount"&gt;&lt;/div&gt;
                          &lt;div class="clear-both"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="dx-field"&gt;
                  &lt;div class="dx-field-label"&gt;Grand total&lt;/div&gt;
                  &lt;div class="dx-field-value-static" data-bind="text: order.GrandTotal"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-options="dxContentPlaceholder : { name: 'view-footer', animation: 'none' } " &gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>order-details.js</strong></p>
  
  <pre><code>POSApp.OrderDetail = function(params, viewInfo) {
      "use strict";
  
      var id = params.id,
          order = new POSApp.OrderViewModel(),
          isReady = $.Deferred(),
          // Item List
          shouldReload = false,
          dataSourceObservable = ko.observable(),
          dataSource;
  
      function handleDelete() {
          DevExpress.ui.dialog.confirm("Are you sure you want to delete this item?", "Delete item").then(function(result) {
              if(result)
                  handleConfirmDelete();
          });
      }
  
      function handleConfirmDelete() {        
          POSApp.db.Orders.remove(id).done(function() {
              if(viewInfo.canBack) {
                  POSApp.app.navigate("Orders", { target: "back" });
              }
              else {
                  POSApp.app.navigate("Blank", { target: "current" });
              }
          });
      }
  
      function handleViewShown() {
          POSApp.db.Orders.byKey(id).done(function(data) {
              order.fromJS(data);
              isReady.resolve();
          });
  
          //Item List
          if (!dataSourceObservable()) {
              dataSourceObservable(dataSource);
              dataSource.load().always(function () {
                  isReady.resolve();
              });
          }
          else if (shouldReload) {
              refreshList();
          }
      }
  
      //Item List
  
      function handleOrderDetailsModification() {
          shouldReload = true;
      }
  
      function handleViewDisposing() {
          POSApp.db.OrderDetails.off("modified", handleOrderDetailsModification);
      }
  
      function refreshList() {
          shouldReload = false;
          dataSource.pageIndex(0);
          dataSource.load();
      }
  
      dataSource = new DevExpress.data.DataSource({
          store: POSApp.db.OrderDetails,
          map: function (item) {
              return new POSApp.OrderDetailViewModel(item);
          },
          expand: ["Item"],
          sort: { field: "OrderDetailId", desc: false },
          filter: ["OrderId", parseInt(id)]
      });
  
      POSApp.db.OrderDetails.on("modified", handleOrderDetailsModification);
  
      //Item List
  
      return {
          id: id,
          order: order,
          handleDelete: handleDelete,        
          viewShown: handleViewShown,
          isReady: isReady.promise(),
          //Item List
          dataSource: dataSourceObservable,
          refreshList: refreshList,
          viewDisposing: handleViewDisposing,
      };
  };
  </code></pre>
  
  <p><strong>add-item.dxview</strong></p>
  
  <pre><code>&lt;div data-options="dxView : { name: 'AddItem', title: 'Add Item' } " &gt;
      &lt;div data-bind="dxCommand: { onExecute: handleSave, id: 'save', title: 'Save', icon: 'save' } "&gt;&lt;/div&gt;
      &lt;div data-bind="dxCommand: { onExecute: handleCancel, id: 'cancel', behavior: 'back', title: 'Cancel', icon: 'close' }"&gt;&lt;/div&gt;
      &lt;div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-edit-view dx-content-background dx-form-background" data-bind="dxDeferRendering: { showLoadIndicator: true, staggerItemSelector: '.dx-field', animation: 'edit-item-rendered', renderWhen: isReady }"&gt;
          &lt;div data-bind="dxScrollView: { }"&gt;
              &lt;div class="dx-fieldset"&gt;
                  &lt;div class="dx-field"&gt;
                      &lt;div class="dx-field-label"&gt;Order detail id: &lt;/div&gt;
                      &lt;div class="dx-field-value" data-bind="dxNumberBox: { value: orderdetail.OrderDetailId, readOnly: true }"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="dx-field"&gt;
                      &lt;div class="dx-field-label"&gt;Order Id: &lt;/div&gt;
                      &lt;div class="dx-field-value" data-bind="dxLookup: { dataSource: ordersSource, value: orderdetail.Order, displayExpr: 'PhoneNumber', title: 'Orders', placeholder: 'Choose Order' }"&gt;&lt;/div&gt;
                      &lt;!--&lt;div class="dx-field-value" data-bind="dxNumberBox: { value: orderdetail.Order, placeholder: 'Enter Order Id' }"&gt;&lt;/div&gt;--&gt;
                  &lt;/div&gt;
                  &lt;div class="dx-field"&gt;
                      &lt;div class="dx-field-label"&gt;Item: &lt;/div&gt;
                      &lt;div class="dx-field-value" data-bind="dxLookup: { dataSource: itemsSource, value: orderdetail.Item, displayExpr: 'ItemName', title: 'Items', placeholder: 'Choose Item' }"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="dx-field"&gt;
                      &lt;div class="dx-field-label"&gt;Quantity: &lt;/div&gt;
                      &lt;div class="dx-field-value" data-bind="dxNumberBox: { value: orderdetail.Quantity, placeholder: 'Enter Quantity' }"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="dx-field"&gt;
                      &lt;div class="dx-field-label"&gt;Price: &lt;/div&gt;
                      &lt;div class="dx-field-value" data-bind="dxNumberBox: { value: orderdetail.Price, placeholder: 'Enter Price' }"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="dx-field"&gt;
                      &lt;div class="dx-field-label"&gt;Amount: &lt;/div&gt;
                      &lt;div class="dx-field-value" data-bind="dxNumberBox: { value: orderdetail.Amount, placeholder: 'Enter Amount' }"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>add-item.js</strong></p>
  
  <pre><code>POSApp.AddItem = function (params, viewInfo) {
      "use strict";
  
      var id = params.id,
          isNew = (id === undefined),
          isSplitLayout = viewInfo.layoutController.name === "split",
          orderdetail = new POSApp.OrderDetailViewModel(),
          isReady = $.Deferred();
  
      orderdetail.Order(parseInt(id));
      //orderdetail.Order(new POSApp.OrderViewModel(id));
      alert(parseInt(id));
  
      function load() {
          return POSApp.db.OrderDetails.byKey(id, { expand: ["Item"] }).done(function (data) {
              orderdetail.fromJS(data);
          });
      }
  
      function insert() {
          // Insert Code
          POSApp.db.OrderDetails.insert(orderdetail.toJS()).done(function (values, newId) {
              //POSApp.app.navigate({ view: "order-details", id: params.id }, { target: "back" });
              POSApp.app.back();
              orderdetail.clear();
          });
      }
  
      function handleSave() {
          insert()
          //orderdetail.clear();
          //POSApp.app.back();
          // Go back to order-edit and the item that have been chosen will be displayed in the order-edit
          // And so on for the next item
      }
  
      function handleCancel() {
          orderdetail.clear();
          POSApp.app.back();
      }
  
      function handleViewShown() {
          isReady.resolve();
      }
  
      return {
          orderdetail: orderdetail,
          ordersSource: {
              store: POSApp.db.Orders,
              map: function(data) {
                  return new POSApp.OrderViewModel(data);
              }
          },
          itemsSource: {
              store: POSApp.db.Items,
              map: function (data) {
                  return new POSApp.ItemViewModel(data);
              }
          },
          handleSave: handleSave,
          handleCancel: handleCancel,
          viewShown: handleViewShown,
          isReady: isReady.promise()
      };
  
  };
  </code></pre>
  
  <p>What I'm asking is how to pass the id of the order to the add item view properly? because with this code, when I save it, in the database the orderid is null, so there's no value inserted. But in the add item view, in the order lookup filed, the id or value was there but it wont be inserted to the database.</p>
  
  <p>Many Thanks &amp; Best Regards
  Michael Reno</p>