jquery - 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.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] })));
}