title: Kendo UI Grid Dropdown binding to Foreign Key
body: <p>I am trying to bind to Foreign Key value in Kendo UI Grid , I am getting data and able to select Foreign Key in Editor Template but the selected value is not binding to the corresponding column in Grid</p>
  
  <p>Please find my code below , CostcetreId Is ForeignKey , So the selected CostCentre ID needs to bind to this value but always CostCentreId =0 , I am  using JavaScrpit and HTML for Asp.net WebAPi Services, Jquery 1.9.1 Kendo UI 2013.2.716</p>
  
  <pre><code>dataSource = new kendo.data.DataSource({
      transport: {
          read: {
              url: "../api/department/GetDepartments",
              dataType: "json"
          },
          update: {
              url: function (department) {
                  return "../api/department/UpdateDepartment/" + department.Id;
              },
              contentType: "application/json",
              type: "PUT"
          },
          destroy: {
              url: function (department) {
                  return "../api/department/DeleteDepartment/" + department.Id;
              },
              contentType: "application/json",
              type: "DELETE"
          },
          create: {
              url: "../api/department/InsertDepartment",
              contentType: "application/json",
              type: "POST"
          },
          parameterMap: function (data, operation) {
              if (operation !== "read") {
                  debugger;
                  //data.CostCentreId
              }
              return JSON.stringify(data);
          }
      },
      batch: false,
      pageSize: 20,
      error: error,
      schema: {
          model: {
              id: "Id",
              fields: {
                  Id: { editable: false, nullable: true },
                  Name: { validation: { required: true } },
                  IsActive: { type :"boolean" },
                  CostCentreId: { validation: { required: true } },
              }
          }
      }
  });
  
  $("#departmentGrid").kendoGrid({
      dataSource: dataSource,
      pageable: true,
      filterable: true,
      dataBound: onDataBound,
      height: 430,
      toolbar: ["create"],
      columns: [
          { field: "Name", title: "Name" },
          { field: "IsActive", title: "Is Active" },
          ***{ field: "CostCentreId",type: "number", title: "Cost Centre", width: "160px", editor: departmentDropDownEditor }***,
          { command: ["edit", "destroy"], title: "&amp;nbsp;", width: "172px" }],
      editable: "inline",
      edit: attachRemove
  });
  
  function departmentDropDownEditor(container, options) {
      $('&lt;input required data-text-field="CostCentreCode" data-value-field="Id" data-bind="value:' + options.field + '"/&gt;')
          .appendTo(container)
          .kendoDropDownList({
              autoBind: false,
              dataSource: {
                  transport: {
                      read: {
                          url: "../api/costcentre/GetCostCentres",
                          dataType: "json"
                      },
  
                  }
              }
          });
  }
  function onDataBound(e) {
      var data = this._data;
      for (var x = 0; x &lt; data.length; x++) {
          var dataItem = data[x];
          if (!dataItem.CanDelete) {
              var tr = $("#departmentGrid").find("[data-uid='" + dataItem.uid + "']");
              tr.find('a.k-grid-delete').remove();
          }
  
          if (!dataItem.CanEdit) {
              var edit = $("#departmentGrid").find("[data-uid='" + dataItem.uid + "']");
              edit.find('a.k-grid-edit').remove();
          }
      }
      if (!data[0].CanEdit) {
          //   $('#departmentGrid.k-grid-toolbar').remove();
      }
  }
  
  function attachRemove(e) {
      $(".k-grid-cancel").on("click", function () {
          var del = $("#departmentGrid").data("kendoGrid")._data[0].CanDelete;
          if (!del) {
              setTimeout(function () {
                  $("#departmentGrid").data("kendoGrid").trigger("dataBound");
              });
          }
      });
  }
  
  var validationMessageTmpl = kendo.template($("#message").html());
  
  function error(args) {
      debugger;
      if (args.errors) {
          debugger;
          var grid = $("#departmentGrid").data("kendoGrid");
          grid.one("dataBinding", function (e) {
              e.preventDefault(); // cancel grid rebind if error occurs                            
              for (var error in args.errors) {
                  showMessage(grid.editable.element, error, args.errors[error].errors);
              }
          });
      }
      if (args.status == "error") {
          debugger;
          var grid = $("#departmentGrid").data("kendoGrid");
          grid.one("dataBinding", function (e) {
              e.preventDefault(); // cancel grid rebind if error occurs         
              var modal = $.sp_modal({ title: 'Error', content: args.xhr.responseText });
              modal.show();
              console.log(args.xhr.responseText);
          });
      }
  }
  
  function showMessage(container, name, errors) {
      //add the validation message to the form
      container.find("[data-val-msg-for=" + name + "]")
          .replaceWith($(validationMessageTmpl({ field: name, message: errors[0] })));
  }
  </code></pre>