Kendo UI Grid. DropDown does not show the pre-selected value as default

Question

First of all i'd like to apologize for my humble english.

I am currently experimenting with Kendo UI, more specifically the grid.

I have the colums "id", "event", "database", "address" and "eventtype" (simplified).

columns: [
{field: "id", hidden: true},
{field: "event", hidden: false, title: "Event"},
{field: "database", hidden: false, title: "Database", width: 100},
{field: "address", hidden: false, title: "Address", width: 100},
{field: "eventtype", hidden: false, title: "Event Type", editor: eventtypeDropDownEditor},
{command: ["destroy", "edit"],  hidden: false, width: 200}],

All these are common text-inputs and buttons, except the eventtype. The Event Types are stored in a separate table (id and eventtype(string)).

The eventtypeDropDownEditor is as following

 function eventtypeDropDownEditor(container, options) {
$('<input data-text-field="eventtype" data-value-field:"id" data-bind="value:' + options.field+ '"/>')
    .appendTo(container)
    .kendoDropDownList ({
        autoBind: false,
        dataTextField: "eventtype",
        dataValueField:"id",
        dataSource: {
            transport: {
                read: "https://some.url/default/ajax/geteventtype",
                dataType: "json"
            }
        },
    });

};

The called dataSource URL delivers a JSON like

[{"id":"0","eventtype":"placeholder0"},{"id":"1","eventtype":"placeholder1"},{"id":"2","eventtype":"placeholder2"},{"id":"6","eventtype":"placeholder3"}]

So far, so good. Editing, deleting, creating is working perfectly.

My only problem (for 6 hours now) is to display the corresponding Event Type in my column eventtype after enabling the edit.

In other words: if i click the "edit" button, the displayed text under eventtype "placeholder1" changes to a drop down. But instead of pre-selecting "placeholder1" the dropdown is empty. I have to manually click the dropdown and choose one of the options. Even if i only want to change the database for example, i always have to select an Event Type to have a valid value for my query.

While testing different solutions i stumbled upon the index option. Strangely enough, this one isnt working either. Nor does changing the data-bind value.

I guess its some sort of "greater" error preventing any kind of option to work as intended for that context. But i simply cant find a solution or "direction" to investigate any further.

I would really appreciate a solution or "hint" for that matter!

Greetings Marcel

Answer 1

I found the solution. Instead of calling the function eventtypeDropDownEditor in the fields definition, i had to define the editor directly in there.

    {field: "eventtype", title: "Event Type",
    editor: function(container) {
        var input = $('<select id="eventtype" name="eventtype">');
        input.appendTo(container);
        input.kendoDropDownList({
            dataTextField: "eventtype",
            dataValueField: "eventtype",
            dataSource: {
                transport: {
                    read: "https://some.url/default/ajax/geteventtype",
                    dataType: "json"
                }
            }
        }).appendTo(container);
    }
},