DropDown in Kendo UI Grid showing Object-Object after selecting option from drop down list

Question

I am using kendo grid in my application. In that grid, I have used kendo drop down list. I have an array for datasource of that dropdownlist. The array looks like

var arr = [{text: "demo 1", value: 1}, {text: "demo 2", value: 2}]

My Dropdownlist Looks like:

    $("#grid").kendoGrid({
        dataSource: dataSource,
        navigatable: true,
        pageable: true,
        height: 550,
        filterable: {
            mode: "row"
        },
        sortable: {
            mode: "single",
            allowUnsort: false
        },
        toolbar: ["create"],
        columns: [
            { field: "Item", title: "Item", width: "300px", editor: categoryDropDownEditor }
        ],
        editable: true
    });

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

It is showing the text in dropdown correctly but after selecting the option from drop down it shows object object as a selected text.

Attached the screenshot of the drop down selected value and after option after selecting Image of option selecting and After option selected

I have tried a lot of solutions but didn't work. It will be great if someone provides the solution.

Thanks

Punit Punit · Accepted Answer · 2017-08-22T06:30:24

I Just Have Updated "Cara Tilos's" Jsfiddle code,

http://jsfiddle.net/0zauzskn/5/

This will give you your desired result.

I have added

schema: {
    model: {
        fields: {
            item: { type: "string" }
        }
    }
}

Into your dataSource

Best Of Luck.

DropDown in Kendo UI Grid showing Object-Object after selecting option from drop down list

2 Answers