Autocomplete not loading items (when using MVVM)

2 posts, 0 answers
  1. Renan
    Renan avatar
    1 posts
    Member since:
    Feb 2013

    Posted 22 Feb 2013 Link to this post

    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!!
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Feb 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top