Kendo Grid using inline editing and custom editor dropdown control

Question

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>

Solution 1

I was able to get it working using a MVC wrapper and by following this post:

http://www.sitereq.com/post/kendo-mvc-dropdown-lists-inside-inline-kendo-mvc-grids

The key was adding the save event due to a known Kendo grid bug - seems to me the Kendo docs should have some mention of this issue.

I tried implementing the same logic using the javascript implementation but could not get it working.

Solution 2

Try this

function formTypeDropDownEditor(container, options) {
     $('<input name="' + options.field + '" 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
                    });
}