Dealing with data which includes a field having an array of objects

[Bill]

I'm wondering how a datasource that returns data--like the person object here--which mixes fields with an array in it would look?  For example, how would the model in the schema of the datasource look?  If the fields (like Lastname here) were bound to textboxes thru  data-bind attributes, how would the array of Likes be extracted to be display in, say, a grid. Do we use a function to return the grid's data, a hierarchical datasource to build the whole thing or what?


var person = [
    { Firstname: "Jim"},
    { Lastname: "Smith" },
    { Birthday: "08/29/1979"},
    { Likes: [ { id: 1, description: "Baseball", rank: 1 }, {id: 2, description: "music", rank: 3 }, { id: 3, description: "Surfing the web", rank: 2}]}
];

[Alexander Valchev]

Hello Bill,

We do not support such data format, the closest possible solution is to use a view model defined like this:

var viewModel = kendo.observable({
    person: {
        Firstname: "Jim",
        Lastname: "Smith",
        Birthday: "08/29/1979",
        Likes: [
            { id: 1, description: "Baseball", rank: 1 },
            {id: 2, description: "music", rank: 3 },
            { id: 3, description: "Surfing the web", rank: 2}
        ]
    }
});

I am afraid that your scenario is a bit unclear. I created a small jsFiddle page that shows one possible implementation using MVVM source and template binding. In case this approach does not fit in your requirements please modify my example to demonstrate what you would like to achieve.
Thank you in advance.

Regards,
Alexander Valchev
the Telerik team

[Bill]

Thanks, Alex.  Your jsfiddle example is very illuminating.  Does your remark  " We do not support such data format" mean that it is not possible to adapt your example for a remote datasource?  I can't make this code work with the html and template that you used in your jsfiddle example.  Or do you say I can't do the same thing with a remote datasource?

    var viewModel = kendo.observable({
        person: new kendo.data.DataSource({
            transport: {
                read: "/remoteurl",
                dataType: "json"
            },
            schema: {
                model: {
                    fields: {
                        Firstname: { editable: false, nullable: false, defaultValue: "" },
                        Lastname: { editable: false, nullable: false, defaultValue: "" },
                        Likes: [{ id: { editable: true} },
                                { description: { editable: true} },
                                { rank: { editable: true}}]
                    }
                }
            }
        })
    });
 
    kendo.bind($("#example"), viewModel);

[Atanas Korchev]

Hi Bill,

 The Kendo DataSource does not currently support model fields of complex type (object or array). However MVVM should work with data structure defined in this way. I have modified the example to demonstrate how to do that: http://jsfiddle.net/ja8MK/12/ 

I hope this helps,
Atanas Korchev
the Telerik team

[Devon]

Hi guys.

I am having a similar issue.

I have an external datasource with records on it that look like this:

{
  "id": 2,
  "Name": "Sarah Carlson",
  "Telephone": "[phone]",
  "Address": "1 Test ave",
  "Suburb": "Test",
  "City": "Testville",
  "Province": "Gauteng",
  "Country": "South Africa",
  "PostalCode": "0001",
  "DeliveryStatus": "Pending",
  "Packages": [
    {
      "ID": 0,
      "Name": "Package 1",
      "Status": "Pending"
    },
    {
      "ID": 1,
      "Name": "Package 2",
      "Status": "Pending"
    }
  ]
}

Currently I can display the customer details in a listview and when the listview is selected, it brings up an inset list with the selected customer's packages in it. Each Package has a dropdownlist, which allows you to select a status for the package, and a "Save" button.

When the save button is tapped I want to update the package status in the remote datasource.

I can get it updating locally but not to the remote datasource. I'm not quite sure how to do this using the viewmodel examples here??

I have attached my code if anyone would like to have a look and help me?