Kendo UI Grid Dropdown绑定到外键

Question

我正在尝试绑定到Kendo UI Grid中的外键值，我正在获取数据并且能够在编辑器模板中选择外键但是所选的值没有绑定到Grid中的相应列

请在下面找到我的代码，CostcetreId是ForeignKey，因此所选的CostCentre ID需要绑定到此值但始终为CostCentreId = 0，我使用JavaScrpit和HTML for Asp.net WebAPi Services，Jquery 1.9.1 Kendo UI 2013.2 0.716

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: " ", width: "172px" }],
    editable: "inline",
    edit: attachRemove
});

function departmentDropDownEditor(container, options) {
    $('<input required data-text-field="CostCentreCode" data-value-field="Id" data-bind="value:' + options.field + '"/>')
        .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 < 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] })));
}