Reputation: 93
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!
Upvotes: 0
Views: 5541
Reputation: 1466
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
}
});
}
Upvotes: 2
Reputation: 40887
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/
Upvotes: 0