title: Update a cell value from a DropDownList in another cell in same row
body: <p>I'm struggling with a use-case scenario:</p>
  
  <p>User selects a terminal and the services dropdown gets populated (cascading). The JSON that populates the services dropdown contains a field <code>Fee</code> that I want to pick and use it's value for the <code>ServiceFee</code> of the grid/datasource column for a row currently being edited/inserted</p>
  
  <p>.<a href="https://i.stack.imgur.com/KMAUu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KMAUu.png" alt="process"></a></p>
  
  <p>I have tried two approaches so far:</p>
  
  <p><strong>Approach #1:</strong>
  I tried to hook into the Service DropDownList's event to see what item user selctes and extract the <code>Fee</code> and them try to update the grid's edit/new row's dataItem's <code>ServiceFee</code> field. However, the place where I hooked in to the Service DropDownList's event had no access to the grid.</p>
  
  <pre><code>var gridMain = $("#serviceDetailsGrid").kendoGrid({
      dataSource: kendoDataSource,
      pageable: false,
      sortable: false,
      toolbar: ["create"],
      columns:
      [
          { field: "ParkingServiceId", title: "Id", hidden: true },
          { field: "TerminalId", title: "Terminal", width: 130, template: getTerminalTitle, editor: terminalDropDownEditor },
          { field: "ServiceId", title: "Service", template: getServiceTitle, editor: serviceDropDownEditor },
          { field: "ParkingCardNumber", width: 120, title: "Card #" },
          { field: "ParkingCardIssueDate", width: 120, title: "Issued On", format: "{0:dd-MMM-yyyy}", template: "#= kendo.toString(kendo.parseDate(ParkingCardIssueDate,  'dd-MMM-yyyy'), 'dd-MMM-yyyy') #" },
          { field: "ParkingCardExpiryDate", width: 120, title: "Expiry", format: "{0:dd-MMM-yyyy}", template:   "#= kendo.toString(kendo.parseDate(ParkingCardExpiryDate, 'dd-MMM-yyyy'), 'dd-MMM-yyyy') #" },
          { field: "ServiceFee", width: 100, title: "Fee" },
          { command: ["edit", "destroy"], title: "Actions", width: "200px" }
      ],
      editable: "inline",
      cancel: function (e) { $('#serviceDetailsGrid').data('kendoGrid').dataSource.cancelChanges(); },
  }).data("kendoGrid");
  
  function serviceDropDownEditor(container, options) {
      $('&lt;input id="servicesDropDownList" required data-text-field="NameEnglish" data-value-field="Code" data-bind="value:' + options.field + '"/&gt;')
      .appendTo(container)
      .kendoDropDownList({
          optionLabel: "Select service...",
          autobind: false,
          dataTextField: "NameEnglish",
          dataValueField: "Code",
          change: serviceDropDown_OnChange
      });
  }
  
  function serviceDropDown_OnChange(a) {
      var serviceDropDown = $("input[id^='servicesDropDownList']").data("kendoDropDownList");
      var extract = serviceDropDown.dataItem(serviceDropDown.select());
      // I have the fee at extract.Fee but don't know how to send it back to grid
  }
  </code></pre>
  
  <p><strong>Approach 2:</strong>
  I tried to hook into grid's <code>edit</code> event. But that even triggers only once and immediately upon new row or edit row. The Service DropDownList is cascaded. So user needs to select terminal first and then Service. The <code>edit</code> has already triggered before user makes these selections:</p>
  
  <pre><code>var gridMain = $("#serviceDetailsGrid").kendoGrid({
      dataSource: kendoDataSource,
      pageable: false,
      sortable: false,
      toolbar: ["create"],
      columns:
      [
          { field: "ParkingServiceId", title: "Id", hidden: true },
          { field: "TerminalId", title: "Terminal", width: 130, template: getTerminalTitle, editor: terminalDropDownEditor },
          { field: "ServiceId", title: "Service", template: getServiceTitle, editor: serviceDropDownEditor },
          { field: "ParkingCardNumber", width: 120, title: "Card #" },
          { field: "ParkingCardIssueDate", width: 120, title: "Issued On", format: "{0:dd-MMM-yyyy}", template: "#= kendo.toString(kendo.parseDate(ParkingCardIssueDate,  'dd-MMM-yyyy'), 'dd-MMM-yyyy') #" },
          { field: "ParkingCardExpiryDate", width: 120, title: "Expiry", format: "{0:dd-MMM-yyyy}", template:   "#= kendo.toString(kendo.parseDate(ParkingCardExpiryDate, 'dd-MMM-yyyy'), 'dd-MMM-yyyy') #" },
          { field: "ServiceFee", width: 100, title: "Fee" },
          { command: ["edit", "destroy"], title: "Actions", width: "200px" }
      ],
      editable: "inline",
      cancel: function (e) { $('#serviceDetailsGrid').data('kendoGrid').dataSource.cancelChanges(); },
      edit: function (e) {
          var model = e.model; //reference to the model that is about the be edited
          var container = e.container; //reference to the editor container
  
          //find second dropdown and then get the widget instance
          var serviceDropDownList = container.find("[data-role=dropdownlist]").eq(1).data("kendoDropDownList");
  
          // if DropDownListwidget is found
          if (serviceDropDownList) {
              var extract = serviceDropDownList.dataItem(serviceDropDownList.select());
              // I have "Select service" item here as the edit event triggered far too early
  
              console.log("Grid Edit Event --&gt; DropDownList (Id: " + serviceDropDownList.id + "), Selected: " + extract, serviceDropDownList);
              e.model.ServiceFee = extract.Fee;
          }
      }
  }).data("kendoGrid");
  </code></pre>
  
  <p>Here is debug view from IE for approach 2:</p>
  
  <p><a href="https://i.stack.imgur.com/QfC0k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QfC0k.png" alt="debug process"></a></p>
  
  <p>Now I'm thinking that I should hook into the Update/Confirm button and manually do the needful there but I need some input regarding Approaches 1 &amp; 2 before I start Approach 3. Am I missing something here? Approach 1 was the best candidate AFAIK.</p>
  
  <p><strong>Update</strong>
  Approach #1 got an update from Telerik forums here: <a href="http://www.telerik.com/forums/update-a-read-only-column-with-value-while-editing#dExxMF1g9UenKYD0vE_XkA" rel="nofollow noreferrer">http://www.telerik.com/forums/update-a-read-only-column-with-value-while-editing#dExxMF1g9UenKYD0vE_XkA</a></p>
  
  <p>After testing the new Select event on the Serice DropDownList, I see a strange behaviour: It doesn't reflect the latest selected record but instead the last one. I replied to the official thread here:<a href="http://www.telerik.com/forums/update-a-read-only-column-with-value-while-editing#RXPhUgu-_0yo7MhPsaDTEw" rel="nofollow noreferrer">http://www.telerik.com/forums/update-a-read-only-column-with-value-while-editing#RXPhUgu-_0yo7MhPsaDTEw</a></p>
  
  <p>Regards.</p>