CODEWITHSUNDEEP
jqueryasp.netmvvmkendo-uidatasource
Naner
Naner

Reputation: 1292

Kendo MVVM Bindings Add/Insert Item, How to?

I have defined a kendo datasource with transport methods (create, read, update, and destroy), as well as a schema definition:

$(document).ready(function() {
        var viewModel = kendo.observable({
            dsMedication: new kendo.data.DataSource({
                type: "json",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 6,
                error: function(e) {
                    //alert(e.responseText);
                    //var error_obj = $.parseJSON(e.responseText);
                    //if (error_obj.Message != null) {
                    //alert(error_obj.Message);
                    //}
                },
                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: {
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        url: "../Services/svcMedication.asmx/SaveMedication",
                        cache: false
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return kendo.stringify({ models: options.models });
                        }
                        options.MedicationParam = $('#acMedications').val();
                        return kendo.stringify(options);
                    }
                },
                batch: true,
                schema: {
                    data: "d",
                    model: {
                        id: "MedicationId",
                        fields: {
                            MedicationId: {
                                type: "number",
                                editable: false // this field is not editable
                            },
                            Name: {
                                type: "text",
                                validation: { // validation rules
                                    required: true // the field is required
                                }
                            }
                        }
                    }
                }
            }),
            SelectedMedication: null,
            HasChanges: false,
            save: function() {
                //if (this.SelectedMedication == null) {
                    //this.dsMedication.add({ MedicationId: this.get("MedicationId"), Name: this.get("Name") });
                //}
                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);
    });

My form elements contain appropriate data-bind attributes to form elements, and I am calling kendo.bind passing the form. The goal is that the form is used for both adding and editing records.

If I search an item and make changes to it, everything works like a charm!

MY PROBLEM IS:

I am not sure how to write the code to initialize the form for adding a new record to the datasource.

I've been unsuccessful finding an example or resources on this anywhere!!

Any help would be appreciated! Thanks!

Upvotes: 2

Views: 3247

Answers (1)

Petur Subev
Petur Subev

Reputation: 20203

Basically since you have not defined the Model explicitly you cannot easily create instances of it. So if you have declared the model separately like here - it will be a little bit easier to create instance and most probably you would know what to do next.

In your case you can create instance of the model like this:

var newRecord = new viewModel.dsMedication.reader.model();

Once you have new record you can easily add it to the dataSource either via the add or the insert methods (they are both described in the documentation).

And finally when you have the records added locally (you should be able to see the changes immediately on the screen) you can call the sync method of the dataSource to send these new records to be saved on the server - the create transport option will be used.

Upvotes: 1

Related Questions