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

i have kendoui grid in fill 1 column autocomplete 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 aoutocomplete data comes database via php:

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

and php following:

$query = ('select shipitem_id id, name, description, cat_id, lang_string jml_mss_shipment_items');                $link = mysql_pconnect($dboptions['host'], $dboptions['user'], $dboptions['password']) or die ("unable connect database server"); mysql_select_db($dboptions['database']) or die ("unable connect 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 select items when move on next row leaves

[object object] 

in cell.

i have tried original value displayed, including above template (which gives error description undefined), without success.

what can overcome this? must simple!

the problem when create new row row created according model definition in datasource. since using nested objects (the field description object containing name) not created.

so should check in template have actual value. like:

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

for question of closing autocomplete hit enter, need invoke closecell autocomplete change event. 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 complete running example here http://jsfiddle.net/onabai/mpnua/3/