MVVM with Single Entity from Remote Server

[James]

Every sample I can find works on the premise of multiple rows of data coming back.

In our case there is only one row being returned because this is a single item edit screen.

I have a Web API request that returns an object. Here's the response from the call:

{
  "FirstName": "James",
  "LastOrCompanyName": "Hancock",
  "MiddleName": "Robert",
  "Salutation": "Mr.",
  "Suffix": null,
  "Individual": true,
 <...more fields...>
}

It's formatted exactly like that with Json.

What I'm attempting to do is put text boxes that allow edit of those values.

Here's what I have:

var Contact = kendo.data.Model.define({
        ID: "ID"
    });


    dataSource = new kendo.data.DataSource({
        type: "json", // specifies data protocol
        transport: {
            read: { url: "/api/v1/contacts/GetContactByID?id=" + ContactID },
        },
        schema: {
            model: {
                    id: "ID"
            }
        },
        change: function (e) {
            selectedContact = e;
        },
        error: function (e) {
            debugger;
        }
    });

    var viewModel = kendo.observable({
        dataSource: dataSource,
        hasChanges: false,
        change: function () {
            this.set("hasChanges", true);
        }
    });


    kendo.bind($("#contact-info"), viewModel);

for sake of argument I also bound a grid to the datasource like so:

    $("#g-contact-info").kendoGrid({
        groupable: true,
        scrollable: { virtual: true },
        sortable: true,
        pageable: true,
        dataSource: dataSource
    });

The grid doesn't display any data even though one item came back.

And I can't figure out any way to logically set the observable to the first item even if it did. I was expecting some sort of data control on the observable that allowed you to change which is the current item just like a BindingSource in Winforms or something.

Can someone help with the two issues? First being the data not coming back and binding properly, the second being how do I get the observable to set properly and get my selectedContact set with the right value.

Thanks!

[Alexander Valchev]

Hello James,

The dataSource expects to receive and array of items and for that reason is not populating with data. As a solution I suggest to return an array containing single record, Alternatively you could use the parse function to create an array from the raw data received by the server. For example:

schema: {
    parse: function(data) {
        return [data];
    }
}

I hope this information helps. For convenience please check the following example - version 1 and version 2.

Greetings,
Alexander Valchev
the Telerik team

[James]

Thank you for the single item work around, however you should strongly consider handling the single item for a number of reasons:

1. CRUD is almost always on a single record.
2. Web API and all standards docs say that when requesting a single record, return a single record. That means that it will never be an array and thus would blow up without this work around.


On the overall issue however even if I return an array, the below code when hooked up to a simple Web API back end doesn't bind automatically. I have to call fetch and handle the event and put the datasource into the observable as a variable.

Further, I get "undefined" all of the time unless I set the data-source to be datasource.data and that causes issues. I should be able to just create an observable from a datasource, and it should automatically fetch the data and display it.

Further, when posting this back, it posts back all rows, not just the ones that actually changed which I would think would be a core function of an observable to determine which have changed and only post back those.

Further, when it posts back those changes, it is sending them all to the inserted section of the datasource, not to the correct inserted, destroyed, updated sections.

And destoryed doesn't seem to work at all. I have told it to do a "DELETE" instead of a "POST" which is the correct and standards compliant method for doing a delete, however it never actually makes the call.

A full sample that does a round trip from a standard Web API class DBController bound to the data source, and doing read, update, delete, and insert and only sending updates for items that actually changed would be greatly appreciated. I think to me and to everyone else out there.

Also my frustration comes with all of these magic functions in the data source. so below you mention the parse method. I can find absolutely no documentation on this method. It's invaluable but I don't know how I could possibly have known about it. Please as soon as possible write full documentation with examples and explaination as to when you'd use it and why and what it expects as a result and what the parameters are for the method signature for all of these methods in datasource in all sections. It will make my life much easier and ensure that I can be far more productive while not bugging you as much.

[Luc]

James,

Regarding your last paragraph, while the parse method is in fact documented, I have to add my voice to yours concerning the poor state of the KendoUI documenation. For instance, the only thing said about this parse method is the following phrase: "Executed before deserialized data is read. Appropriate for preprocessing of the raw data.". It doesn't specify the parameters nor the expected return value.

A lot of the critical information is still spread across the official documentation, blog posts, sample code and forum posts. My feeling is that the programmers on the Kendo team tend to think that we, as end users, should be on top of all the posting done on their whole web site, which is impossible for us of course. We have other interests in our workday, and we can't focus strictly on kendo.

On the other hand, I and others have been very voiceful about this, and they have promised to rectify the situation soon.

Cheers

[Alexander Valchev]

Hello guys,

Thank you for the feedback and suggestions.

We do realize the importance of good documentation and examples, that is why the improvement of docs have a very high priority for us in next Q2 release.
You could read more about upcoming changes, documentation plans and new features in this blog post.

All the best,
Alexander Valchev
the Telerik team

[Gareth]

thanks for that link showing the schema workaround.  I would hate to have changed my rest api to return an array of 1 object, just to satisfy 1 front end application.