剑道网格使用内联编辑和自定义编辑器下拉控件

我正在尝试为网格上的列实现自定义编辑器。编辑器使用DropdownList控件。

我能够得到下拉菜单显示在添加/编辑，但做出选择后，张贴json发送包含默认值，而不是被选中的值。

我的实现是下面这是一个摘自Razor页面。

<div id="divGrid"></div>
<script>
    $(document).ready(function () {
        var dsGroupForm = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Action("GroupForm_Read", "Settings")',
                    dataType: "json"
                },
                update: {
                    url: '@Url.Action("GroupForm_Update", "Settings")',
                    dataType: "json"
                },
                destroy: {
                    url: '@Url.Action("GroupForm_Destroy", "Settings")',
                    dataType: "json"
                },
                create: {
                    url: '@Url.Action("GroupForm_Create", "Settings")',
                                    dataType: "json"
                }
             },
            batch: false,
            pageSize: 5,
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "GroupFormId",
                    fields: {
                        GroupFormId: { editable: false, nullable: false },
                        AdGroupId: { required: false },
                        AdGroupDisplayName: { validation: { required: true } },
                        FormKey: { validation: { required: true } },
                        Ordinal: { validation: { required: true } },
                        FormType: { validation: { required: false } },
                        FormTypeDisplay: { defaultValue: { FormTypeName: "Form1", FormTypeId: "1" } },
                        FormProjectionId: { validation: { required: false } }
                    }
                }
            }
        });
    $("#divGrid").kendoGrid({
        autobind: true,
        dataSource: dsGroupForm,
        pageable: true,
        height: 430,
        toolbar: [{ name: "create", text: "Add"}],
        columns: [
            {field: "AdGroupDisplayName", title: "Group" },
            { field: "FormKey", title: "Key" },
            { field: "Ordinal", title: "Ordinal", format: "{0:d}", width: "100px" },
            { field: "FormTypeDisplay", title: "Type", width: "150px", editor: formTypeDropDownEditor, template: "#=FormTypeDisplay.FormTypeName#" },
            { field: "FormProjectionId", title: "ProjectionId" },
            { command: [{ name: "edit", text: "Edit" }, { name: "destroy", text: "Remove" }], title: " ", width: "172px" }
        ],
        editable: "inline"
    });
});

    var formTypeData = new kendo.data.DataSource({
        data: [
            { FormTypeName: "Form1", FormTypeId: "1" },
            { FormTypeName: "Form2", FormTypeId: "2" },
            { FormTypeName: "Form3", FormTypeId: "3" }
        ]
    });
    function formTypeDropDownEditor(container, options) {
        $('<input name="FormTypeDisplay" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataTextField: "FormTypeName",
                dataValueField: "FormTypeId",
                dataSource: formTypeData
            });
    }
</script>