Kendo UI Grid drop down/select menu

Question

How would I bring in a select drop down into one of my Kendo ui grid columns using remote data?

The documentation is very limited on this subject, specifically with my requirement which is:

To have a list of options from my PHP/MySQL script populate the drop down menu.

If one of those options is already set based on a query in the database, have that option in the menu already selected.

Based on the answer provided I now have the following, but it is not working. I get a dropdown list with a load of options all 'undefined':

function categoryDropDownEditor(container, options) {
$('<input required data-text-field="'+options.field+'" data-value-field="'+options.field+'" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        dataTextField: "text",
        dataValueField: "value",
        dataSource: {
            type: "POST",
            transport: {
                read: ROOT+"user/branch-list"
            }
        },
        index: 0
    });
}

My PHP script just returns JSON like so:

[{text: "Germany", value: "1"}]

Please, remove data-text-field and data-value-field from the input definition. — OnaBai

OnaBai OnaBai · Accepted Answer · 2013-01-21T15:22:25

You can use editor when define the column for that field.

{ field: "color", title: "Color", editor: editColor }

where editColor is a function defined as:

var data = [
     { text: "Black", value: "1" },
     { text: "Orange", value: "2" },
     { text: "Grey", value: "3" }
];

function editColor(container, options) {
    $('<input data-bind="value:' + options.field + '" '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data,
                index: 0,
            });
}

You might set in kendoDropDownList whichever configuration option you need.

Kendo UI Grid drop down/select menu

2 Answers