Kendo AutoComplete Not Displaying - kendo-ui

Question

I have a custom editor that I use with autocomplete. The web service is getting called and returning the data. However, nothing is diaplying in the editor. I put a breakpoint in schema.parse() but it's never hit. What am I missing?
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
autoBind: false,
suggest: true,
delay: 500,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: function (opt) {
$.getJSON("/myWebService/GetData");
},
},
schema: {
errors: function (e) {
return e;
},
parse: function (data) {
return data.Name;
}
}
})
});
}
UPDATE:
The data, when shown via JSON.stringfy(data) is like this:
[{"Address":"123 1st St.","ID":"1","Name":"David"},{"Address":"234 2nd St.","ID":"2","Name":"Smith"}]
UPDATE 2:
The code looks like this now:
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
dataValueField: "Name",
autoBind: false,
suggest: true,
delay: 500,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: function (opt) {
return "/myWebServices/GetData/" + opt.filter.filters[0].value;
},
dataType: "json"
}
},
schema: {
errors: function (e) {
return e;
}
},
data: function (response) {
return $.parseJSON(response);
}
})
});
}
UPDATE 3:
Finally got it working by removing the schema and data section. Accepting OnaBai's answer since he definitely pointed me to the right direction. The final code looks like this:
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
dataValueField: "Name",
autoBind: false,
suggest: true,
delay: 500,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: function (opt) {
return "/myWebServices/GetData/" + opt.filter.filters[0].value;
},
dataType: "json"
}
}
})
});
}

Answer 1

The problem is the implementation of read function. This function should invoke opt.success with data that you want to return. What you are doing is retrieving data from a URL but you are not returning such data.
But in your case it seem that you don't do anything special (no need for defining a function). So you can define it as an Object and just define transport.read.url
You can use:
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url : "/myWebService/GetData"
}
},
schema: {
parse: function (data) {
return data.Name;
}
}
})
EDIT: For using the data as the server returns it and do not have to parse, you can use:
function myAutoCompleteEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>').appendTo(container).kendoAutoComplete({
autoBind : false,
suggest : true,
delay : 500,
dataValueField: "Name",
dataSource : new kendo.data.DataSource({
transport: {
read: {
url : "/myWebService/GetData"
}
}
})
});
}
The trick is defining dataValueField that defines which value of the returned array is the value of the autocomplete.