This is a migrated thread and some comments may be shown as answers.

Autocomplete not loading items (when using MVVM)

1 Answer 85 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Renan
Top achievements
Rank 1
Renan asked on 22 Feb 2013, 03:22 PM

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!!

1 Answer, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 26 Feb 2013, 09:33 AM
Hello Renan,

 As I said in my stackoverflow reply I can't reproduce the problem in this sample: http://jsbin.com/ahiyay/2/edit

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
AutoComplete
Asked by
Renan
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question
or