This is a migrated thread and some comments may be shown as answers.

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

4 Answers 2397 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Bill
Top achievements
Rank 1
Bill asked on 06 Aug 2012, 03:18 AM
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}]}
];

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 08 Aug 2012, 03:24 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bill
Top achievements
Rank 1
answered on 12 Aug 2012, 04:35 AM
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);

0
Atanas Korchev
Telerik team
answered on 16 Aug 2012, 07:35 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Devon
Top achievements
Rank 1
answered on 16 Aug 2012, 10:03 AM
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": "(011) 123 4567",
  "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?
Tags
Data Source
Asked by
Bill
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Bill
Top achievements
Rank 1
Atanas Korchev
Telerik team
Devon
Top achievements
Rank 1
Share this question
or