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

I'm having problems converting from an array to an external data source. Need some guidance.

3 Answers 47 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Doug
Top achievements
Rank 1
Doug asked on 04 Sep 2015, 11:35 PM

I'm trying to load a two level structure into a treeview control.

The structure is like a calendar in that there is a date, followed by 1 or more events on that date.  

 They problem I have is that it displays correctly using a local array, but not when I get the data from an external source.  The 

two hierarchical definitions follow:

    window.calendarData = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "https://admin.medinet.ca/cgi-non/mmb/json_calendar.cgi",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "eventId",
                hasChildren: "items",
                fields: {
                    eventId: {
                        editable: false
                    },
                    date: {
                        editable: true
                    },
                    items: {
                        model: {
                            id: "eventId",
                            fields: {
                                eventId: {
                                    editable:false
                                },
                                lastname: {
                                    type: "string",
                                    editable: true
                                }
                            }
                        }
                    }
                }
            }
        }
    });
    window.calendarDataLocal = new kendo.data.HierarchicalDataSource({
        data: [
            {
                eventId: 0,
                date: '2015-08-01',
                items: [
                    {
                        eventId: 1,
                        lastname: "poulin",
                        },
                    {
                        eventId: 2,
                        lastname: "smith",
                     }
                  ]
              },
            {
                eventId: 3,
                date: '2015-08-02',
                items: [
                    {
                        eventId: 4,
                        lastname: "jones"
                      }
                 ]
             }
        ]
    });

 

I'm pretty sure it has to do with my model definition, so if I'm doing something wrong in there please point me in the right direction.  I've tried a number of different approaches but so far no luck.

The result I'm seeing is that the for local array the control works as expected,  But the remote dataSource shows only the top level nodes and undefined for the lower level nodes.

 

Here is the div for displaying it.

    <div id="mainCalendar">
    </div>
    <script>
        $(document).ready(function () {
            $("#mainCalendar").kendoTreeView({
                dataSource: window.calendarData,
                dataTextField: ["date", "lastname"]
            })
        });
    </script>

Note that the dataTextField uses different name for each level.

 

Here is a copy of the data as returned from the  remote source.

[{

  "date":"2015-08-11",

  "eventId":0,

  "items":[{

    "firstname":"Fred",

    "stopTime":"11:00",

    "startTime":"10:30",

    "lastname":"Flintstone",

    "type":"paid",

    "eventId":1

  },

  {

    "stopTime":"12:44",

    "actvity":"lunch",

    "startTime":"12:00",

    "type":"unpaid",

    "eventId":1

  }]

},

{"date":"2015-08-12",

  "eventId":3,

  "items":[{

    "firstname":"Kermit",

    "lastname":"Frog",

    "type":"paid",

    "eventId":4

  }]

}]

Any help would be appreciated.  

3 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 08 Sep 2015, 12:31 PM

Hello Doug,

I noticed that schema.model.hasChildren is set to the field that contains the child items. It actually expects a Boolean value indicating whether there are any child items in order to show an expand icon. 

When the TreeView is bound to remote data initially it loads only the root nodes from the server. When a node is expanded it makes another request to the server to load its child items and so on. 

Please refer to the TreeView / Binding to remote data demo. 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Doug
Top achievements
Rank 1
answered on 08 Sep 2015, 05:53 PM

I must admit that the multiple requests was not obvious to me.  It's a bit harder since I can't use the Telerik cloud platform for my data source (confidentiality and legal reasons).

So I see now on my server the new request for the branch items on the tree.  What is still confusing is how to define a different schema for the second level items, since they are not the same as the top level items.

The demo is not very helpful since it only deals with a single level tree with only one kind of data.

Do I define two different models in the schema?  Do they sit at the same level, or as a subset like I've done?

Also what is the format of the json data being sent back from the server for the second level node.  The top level node still works properly.  Should I include the top level data element or just the items for this branch (which is what I'm currently doing).

 As of now I get and respond to the multiple requests, but the tree doesn't display any of the data for the lower nodes, so it's not understanding my response.  So either the response if flawed or the schema is not correct.  Here is how they look at the moment.

    window.calendarData = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "https://admin.medinet.ca/cgi-non/mmb/json_calendar.cgi",
                dataType: "json"
            }
        },
        schema: {
            data: "events",
            dataType: "json",
            model: {
                id: "eventId",
                hasChildren: "has_items",
                fields: {
                    eventId: {
                        editable: false
                    },
                    date: {
                        editable: true
                    },
                    items: {
                        model: {
                            id: "eventId",
                            fields: {
                                eventId: {
                                    editable: false
                                },
                                type: {
                                    type: "string",
                                    editable: false
                                },
                                lastname: {
                                    type: "string",
                                    editable: true
                                }
                            }
                        }
                    }
                }
            }
        }
    });

 The string I'm returning from the server for the top level node looks like this.

{"events":

[{"has_items":"true",

"date":"2015-08-11",

"eventId":0},

{"has_items":"true",

"date":"2015-08-12",

"eventId":3}],

"state":"SUCCESS"}

The string I'm returning from the server for the second level nodes looks like this.

 {"items":

[{"firstname":"Fred",

"stopTime":"11:00",

"startTime":"10:30",

"lastname":"Flintstone",

"type":"paid",

"eventId":1},

{"stopTime":"12:44",

"actvity":"lunch",

"startTime":"12:00",

"type":"unpaid",

"eventId":2}],

"state":"SUCCESS"}

This is probably the most complicated part of what I'm trying to accomplish.  If we can get this fixed, I can get on with the rest of my project without much more help (I hope).

Please provide a sample (or fix the one I've created) so that it is formatted correctly.

 

 

 

0
Accepted
Boyan Dimitrov
Telerik team
answered on 10 Sep 2015, 01:19 PM

Hello Doug,

 

My suggestion is to review the Overview article of the Kendo UI HierarchicalDataSource. It shows what data should be returned when child data is requested. The article does have a sample code that shows how to define a different data source for the child items. 

 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeView
Asked by
Doug
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Doug
Top achievements
Rank 1
Share this question
or