I am getting the response back from the server, and everything looks good, but for some reason items are not been displayed for the autocomplete widget. If someone could point out what I'm doing wrong, that would be much appreciated.
Response from the server when I type something in the autocomplete box:
{"d":[{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":0,"Name":"Name0"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":1,"Name":"Name1"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":2,"Name":"Name2"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":3,"Name":"Name3"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":4,"Name":"Name4"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":5,"Name":"Name5"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":6,"Name":"Name6"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":7,"Name":"Name7"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":8,"Name":"Name8"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":9,"Name":"Name9"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":10,"Name":"Name10"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":11,"Name":"Name11"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":12,"Name":"Name12"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":13,"Name":"Name13"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":14,"Name":"Name14"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":15,"Name":"Name15"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":16,"Name":"Name16"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":17,"Name":"Name17"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":18,"Name":"Name18"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":19,"Name":"Name19"}]}
Autocomplete definition and binding:
<
input
id
=
"acMedications"
data-role
=
"autocomplete"
data-text-field
=
"Name"
data-bind
=
"source: dsMedication, value: SelectedMedication"
style
=
"width: 400px;"
placeholder
=
"Enter value..."
/>
ViewModel and DataSource definition:
$(document).ready(
function
() {
var
viewModel = kendo.observable({
dsMedication:
new
kendo.data.DataSource({
transport: {
read: {
contentType:
"application/json; charset=utf-8"
,
type:
"POST"
,
url:
"../Services/svcMedication.asmx/SearchMedication"
,
dataType:
"json"
,
cache:
false
},
update: {
contentType:
"application/json; charset=utf-8"
,
type:
"POST"
,
url:
"../Services/svcMedication.asmx/SaveMedication"
,
dataType:
"json"
,
cache:
false
},
destroy: {
url:
"../Services/svcMedication.asmx/DeleteMedication"
,
type:
"DELETE"
,
dataType:
"json"
,
cache:
false
},
create: {
url:
"../Services/svcMedication.asmx/SaveMedication"
,
type:
"PUT"
,
cache:
false
},
parameterMap:
function
(options, operation) {
if
(operation !==
"read"
&& options.models) {
return
{
models: kendo.stringify(options.models)
};
}
options.MedicationParam = $(
'#acMedications'
).val();
return
kendo.stringify(options);
}
},
batch:
true
,
schema: {
data:
"d"
,
model: {
id:
"MedicationId"
,
fields: {
MedicationId: {
type:
"number"
},
Name: {
type:
"text"
}
}
}
}
}),
SelectedMedication:
null
,
HasChanges:
false
,
save:
function
() {
this
.dsMedication.sync();
this
.set(
"HasChanges"
,
false
);
},
remove:
function
() {
if
(confirm(
"Are you sure you want to delete this record?"
)) {
this
.dsMedication.remove(
this
.SelectedMedication);
this
.set(
"SelectedMedication"
,
this
.dsMedication.view()[0]);
this
.change();
}
},
showForm:
function
() {
return
this
.get(
"SelectedMedication"
) !==
null
;
},
change:
function
() {
this
.set(
"HasChanges"
,
true
);
}
});
kendo.bind($(
"#fmMedication"
), viewModel);
});
THANK YOU!!