Kendo Grid с использованием встроенного редактирования и выпадающего меню пользовательского редактора

Я пытаюсь реализовать собственный редактор для столбца в сетке. Редактор использует элемент управления 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>