Kendo UI: Update transport doesn't trigger after calling datasource sync

Question

Im struggling on this in hours now, I cant find a good documentation on how to implement simple ajax UPDATE on server using forms and Kendo MVVVM and datasource.

KENDO MVVM

$(function() {

    var apiUrl = "http://a31262cd2f034ab8bcda22968021f3b8.cloudapp.net/api",            
        meetingDatasource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: apiUrl + "/meetings/4",
                    dataType: "jsonp"
                },
                update: {
                    type: "PUT",
                    url: apiUrl + "/meetings",
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                },

                parameterMap: function(options, operation) {
                    return kendo.stringify(options);
                }
            },
            batch: true,
            change: function() {
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Title: { editable: true },
                        StartTime: { type: "date" },
                        EndTime: { type: "date" }
                    }
                }
            }
        });

    meetingDatasource.fetch(function () {

        var viewModel = kendo.observable({
            description: result.Description,
            title: result.Title,
            venue: result.Location,
            startDate: result.StartTime,
            endDate: result.EndTime,
            saveChanges: function (e) {

                //im not sure with this line
                this.set("Title", this.Title);
                meetingDatasource.sync();

                e.preventDefault();

            }
        });

        kendo.bind($("#view"), viewModel);
    });

});

THE UI

<ul class="forms"  id="ul-meeting">
            <li>
                <label for="title" >Title:</label> 
                <input data-bind="value: title" class="k-textbox" style="width:350px;"/>
            </li>
            <li>
                <label for="description" >Description:</label> 
                <textarea data-bind="value: description"  id="description" rows="6" cols="80" class="k-textbox" style="width:350px;"></textarea>
            </li>
            <li>    
                <label for="location">Venue:</label> 
                <textarea  data-bind="value: venue" id="location" rows="4" cols="80" class="k-textbox" style="width:350px;"></textarea>
            </li>
            <li>
                <p>
                    <label for="start-datetime">Start:</label> 
                    <input  data-bind="value: startDate" id="start-datetime" style="width:200px;" />
                </p>
                <p>
                    <label for="end-datetime">Finish:</label> 
                    <input data-bind="value: endDate"  id="end-datetime" style="width:200px;" />
                </p>
            </li>
        </ul>

The problem is, the TRANSPORT READ triggers but the TRANSPORT UPDATE never triggers even if I explicity call the Datasource.sync(). Is is something I am missing here?

Answer 1

Your code is not complete (you are not showing what is result or how you trigger saveChanges but from what I see the problem is that you are not updating the content of the DataSource (meetingDataSource).

In your code that you copy the fields from result into and ObservableObject but you never update the content of the DataSource. When you do this.set, in that context this is not the DataSource so when you call sync you are doing nothing.

Try doing:

meetingDatasource.data()[0].set(`Title`, this.Title);
meetingDatasource.sync();

This should do the trick!