Kendo UI AutoComplete as editor in grid - how to display selected value?

Question

I do have a Kendoui grid in which I fill one column with the AutoComplete as editor:

{ title: "Desription", 
    field: 'description',
    editor: function(container, options) {
        var input = $("<input id='selecteditem' />");
        input.attr("name", options.field);
        input.appendTo(container);
        input.kendoAutoComplete({ 
            dataSource: dataSource, 
            dataTextField: "name"
        }); 
    },
    template: "#=name in description#",
    width: "300px"
} 

where the aoutocomplete data comes from a database via php:

var dataSource = new kendo.data.DataSource({
    transport: { read: 
       { 
         url: "/cabinet/test/autocomplete/data.php", 
         dataType: "json" 
       }
});

and the php is the following:

$query = ('SELECT shipitem_id AS id, name, description, cat_id, lang_string FROM jml_mss_shipment_items');              

$link = mysql_pconnect($dbOptions['host'], $dbOptions['user'], $dbOptions['password']) or die ("Unable To Connect To Database Server");
mysql_select_db($dbOptions['database']) or die ("Unable To Connect To Database");

$arr = array();
$rs = mysql_query($query);
while($obj = mysql_fetch_object($rs)) { $arr[] = $obj; }

header("Content-type: application/json; charset=utf-8");
echo json_encode($arr);
exit(); 

This works fine when I select the items but when I move on to the next row it leaves

[object Object]

in the cell.

I have tried everything to get the original value displayed, including the above template (which gives an error that description is undefined), without success.

What can I do to overcome this? It must be something simple!

Answer 1

I had a similar problem with the Keno Autocomplete (= when selecting a value in an empty field Kendo will display [object Object]. When selecting a value in a populated cell Kendo will sometime display the correct value).

After a long and mighty struggle I found this attribute: valuePrimitive (see here)

It seems that this attribute was added on Kendo Q2 2013. It does NOT exist on Kendo Q1 2013.

Once I added this attribute AND switched to Kendo Q2 2013 my application started working OK.

For the sake of completeness and since real-life examples of Kendo code are rare here is my full Kendo autocomplete editor function:

function productNameAutoCompleteEditor(container, options) {
    $('<input data-text-field="ContactBusinessName" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
            autoBind: false,
            serverFiltering: true,
            filter: "contains",
            ignoreCase: true,
            valuePrimitive: true,   //<<<<<<<<<<<<<<<<<<<<<<<<
            dataTextField: "ContactBusinessName",
            dataSource: {
                type: 'odata',
                serverFiltering: true,
                serverPaging: true,
                pageSize: 40,
                transport: {
                    read:
                        {
                            url: "/api/v1/AutoCompleteContacts",
                            dataType: "json"
                        },
                    parameterMap: function (options, type) {
                        var paramMap = kendo.data.transports.odata.parameterMap(options);
                        delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
                        delete paramMap.$format; // <-- remove format parameter.
                        delete paramMap.$callback; // <-- remove format parameter.
                        return paramMap;
                    }
                },
                schema: {
                    data: function (data) {                            
                        return data; // <-- The result is just the data, it doesn't need to be unpacked.
                    },
                    total: function (data) {
                        return data.length; // <-- The total items count is the data length, there is no .Count to unpack.
                    }
                }
            },
            select: function (e) {
                var item = e.item;
                var text = item.text();
                // Use the selected item or its text
            }
        });
}

Answer 2

The problem is that when you create a new row the row is created according your model definition in the DataSource. Since you are using nested objects (the field description is actually an object containing name) this is not created.

So you should check in your template that you have an actual value. Something like:

template: "#= (data.description ? data.description.name : '') #",

For the question of closing the autocomplete as soon as you hit enter, you need to invoke closeCell from the autocomplete change event. Something like:

{
    title   : "Description",
    field   : 'description',
    editor  : function (container, options) {
        var input = $("<input id='selecteditem' />");
        input.attr("name", options.field);
        input.appendTo(container);
        input.kendoAutoComplete({
            dataSource   : dataSource,
            dataTextField: "name",
            change       : function (e) {
                grid.closeCell();
            }
        });
    },
    template: "#= (data.description ? data.description.name : '') #",
    width   : "300px"
}

Check a complete running example here http://jsfiddle.net/OnaBai/mpNuA/3/