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

Thread is closed for posting
5 posts, 0 answers
  1. Bill
    Bill avatar
    13 posts
    Member since:
    Jul 2012

    Posted 05 Aug 2012 Link to this post

    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}]}
    ];
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 08 Aug 2012 Link to this post

    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!
  3. Bill
    Bill avatar
    13 posts
    Member since:
    Jul 2012

    Posted 11 Aug 2012 Link to this post

    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);

  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 16 Aug 2012 Link to this post

    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!
  5. Devon
    Devon avatar
    28 posts
    Member since:
    Aug 2012

    Posted 16 Aug 2012 Link to this post

    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?
Back to Top