I am trying to implement a custom editor for a column on a grid. The editor uses a DropdownList control.

I am able to get the Dropdown to show upon add/edit, however after making a selection and posting the json that is sent contains the default value, not the value that was selected.

My implementation is below it is an excerpt from a Razor page.

Can you help me figure out what I've done wrong here?

<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>