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

Hierarchical Data Binding and Children

5 Answers 110 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 2
Simon asked on 24 Feb 2015, 12:57 PM
Hi.
Hoping you can help.

I have been using your demo at
http://demos.telerik.com/kendo-ui/mobile-listview/hierarchical-databinding#hierarchical-view?parent=2  in order to learn how to bind to hierarchical data.

In my data, (outline structure below), you'll see that the elements with children are called 'ChildNodes'

How do I build the list, as per your example, so that the ChildNode elements appear ready to load in their data?

Tree struct:
--Root level
----ChildNodes
----Active (bool)
----num (int)
--------Active (bool)
--------ChildNodes
------------Active (bool)
------------num (int)
----------------ChildNodes
--------------------Active (bool)
--------------------num (int)
------------------------Active (bool)
------------------------ChildNodes: []
--------------------Completed: int
------------------------Description: string
------------------------ElapsedSeconds: int
------------------------Guid: string
------------------------Id: int
------------------------NodeType: int
------------------------ParentId: int
------------------------PersonId: int
------------------------Project: string
------------------------ProjectId: int
------------------------State: string
------------------------WorkItemType: string
--------------------...
--Completed: int
--Description: string
--ElapsedSeconds: int
--Guid: string
--Id: int
--NodeType: int
--ParentId: int
--PersonId: int
--Project: string
--ProjectId: int
--State: string
--WorkItemType: string

Many thanks in advance.

5 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 26 Feb 2015, 07:25 AM
Hi Simon,

the demo in question lazy loads the data for each page; however, this is just for illustration purposes - there are many other ways to implement the same behavior. You may fetch the entire data initially, using jQuery Ajax request, and provide the data immediately upon navigate. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Simon
Top achievements
Rank 2
answered on 26 Feb 2015, 01:36 PM
Hi Petyo.
Thanks for getting back to me.

I suppose what I am really asking for, is a practical example of parsing json data which is nested 3 or four levels deep.
All of the examples I have seen work well, but they are very simplistic and don't cover what I need to do

My  data (an example attached) has nested levels.  Each level has some fields at its root, and another array, containing the same structure, as you see in the example.

I'll look forward to hearing back from you.

Thanks in advance.

0
Simon
Top achievements
Rank 2
answered on 26 Feb 2015, 01:37 PM
Hi Petyo.
I'm not sure if the attachment worked, as I got a 'Something went wrong' message.
I'm attempting to send it again.
0
Simon
Top achievements
Rank 2
answered on 27 Feb 2015, 09:45 AM
Hi Petyo.
The forum keeps rejecting my zip file.  It is only 2K, so the data below represents that which I need to work with.

My objective is as follows:
To show all nodes in the data, ideally as a list view, where the user can click any node.
If the node has children, then that node becomes the root and lists all of its children
and so on
If a node doesn't have children, then the information in that node is to be displayed.

I will appreciate all help you can give with this, as we are a licensed customer and really need to get to grips with getting the most from this.

My json data is below (suitable anonymised so as not to give away any confidential information :-)  )
I have also reduced the amount of data in there, as it would scroll for a long way, otherwise.

Many thanks in advance

============  JSON ==============
{
  "Active": true,
  "ChildNodes": [
    {
      "Active": true,
      "ChildNodes": [
        {
          "Active": true,
          "ChildNodes": [
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "General development tasks",
              "ElapsedSeconds": 0,
              "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 83,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            },
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "Support & Investigation",
              "ElapsedSeconds": 0,
              "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 83,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            },
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "Admin & Training",
              "ElapsedSeconds": 0,
              "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 83,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            }
          ],
          "Completed": 0,
          "Description": "Pro Golf Links",
          "ElapsedSeconds": 0,
          "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
          "Id": 83,
          "NodeType": 1,
          "ParentId": 0,
          "PersonId": 0,
          "Project": "",
          "ProjectId": 0,
          "State": "",
          "WorkItemType": ""
        },
        {
          "Active": true,
          "ChildNodes": [
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "General development tasks",
              "ElapsedSeconds": 0,
              "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 77,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            },
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "Support & Investigation",
              "ElapsedSeconds": 0,
              "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 77,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            },
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "Admin & Training",
              "ElapsedSeconds": 0,
              "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 77,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            }
          ],
          "Completed": 0,
          "Description": "Legacy iForm Pro Portal",
          "ElapsedSeconds": 0,
          "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
          "Id": 77,
          "NodeType": 1,
          "ParentId": 0,
          "PersonId": 0,
          "Project": "",
          "ProjectId": 0,
          "State": "",
          "WorkItemType": ""
        },
        {
          "Active": true,
          "ChildNodes": [
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "General development tasks",
              "ElapsedSeconds": 0,
              "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 76,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            },
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "Support & Investigation",
              "ElapsedSeconds": 0,
              "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 76,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            },
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "Admin & Training",
              "ElapsedSeconds": 0,
              "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 76,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            }
          ],
          "Completed": 0,
          "Description": "Retail Support Pro",
          "ElapsedSeconds": 0,
          "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
          "Id": 76,
          "NodeType": 1,
          "ParentId": 0,
          "PersonId": 0,
          "Project": "",
          "ProjectId": 0,
          "State": "",
          "WorkItemType": ""
        }
      ],
      "Completed": 0,
      "Description": "Footlights Studios",
      "ElapsedSeconds": 0,
      "Guid": "a2734b02-da15-401c-b043-53c0e5beb35b",
      "Id": 0,
      "NodeType": 2,
      "ParentId": 0,
      "PersonId": 0,
      "Project": "",
      "ProjectId": 0,
      "State": "",
      "WorkItemType": ""
    },
    {
      "Active": true,
      "ChildNodes": [
        {
          "Active": true,
          "ChildNodes": [
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "General development tasks",
              "ElapsedSeconds": 0,
              "Guid": "e87e628c-1d84-4e6c-a0c2-885f0a0b66f2",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 51,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            },
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "Support & Investigation",
              "ElapsedSeconds": 0,
              "Guid": "e87e628c-1d84-4e6c-a0c2-885f0a0b66f2",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 51,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            },
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "Admin & Training",
              "ElapsedSeconds": 0,
              "Guid": "e87e628c-1d84-4e6c-a0c2-885f0a0b66f2",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 51,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            }
          ],
          "Completed": 0,
          "Description": "APU V1",
          "ElapsedSeconds": 0,
          "Guid": "e87e628c-1d84-4e6c-a0c2-885f0a0b66f2",
          "Id": 51,
          "NodeType": 1,
          "ParentId": 0,
          "PersonId": 0,
          "Project": "",
          "ProjectId": 0,
          "State": "",
          "WorkItemType": ""
        },
        {
          "Active": true,
          "ChildNodes": [
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "General development tasks",
              "ElapsedSeconds": 0,
              "Guid": "e87e628c-1d84-4e6c-a0c2-885f0a0b66f2",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 52,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            },
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "Support & Investigation",
              "ElapsedSeconds": 0,
              "Guid": "e87e628c-1d84-4e6c-a0c2-885f0a0b66f2",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 52,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            },
            {
              "Active": true,
              "ChildNodes": [
 
              ],
              "Completed": 0,
              "Description": "Admin & Training",
              "ElapsedSeconds": 0,
              "Guid": "e87e628c-1d84-4e6c-a0c2-885f0a0b66f2",
              "Id": 0,
              "NodeType": 3,
              "ParentId": 52,
              "PersonId": 0,
              "Project": "",
              "ProjectId": 0,
              "State": "",
              "WorkItemType": ""
            }
          ],
          "Completed": 0,
          "Description": "APU V2",
          "ElapsedSeconds": 0,
          "Guid": "e87e628c-1d84-4e6c-a0c2-885f0a0b66f2",
          "Id": 52,
          "NodeType": 1,
          "ParentId": 0,
          "PersonId": 0,
          "Project": "",
          "ProjectId": 0,
          "State": "",
          "WorkItemType": ""
        }
      ],
      "Completed": 0,
      "Description": "APU",
      "ElapsedSeconds": 0,
      "Guid": "e87e628c-1d84-4e6c-a0c2-885f0a0b66f2",
      "Id": 0,
      "NodeType": 2,
      "ParentId": 0,
      "PersonId": 0,
      "Project": "",
      "ProjectId": 0,
      "State": "",
      "WorkItemType": ""
    }
  ],
  "Completed": 0,
  "Description": "Neil Mcleish",
  "ElapsedSeconds": 0,
  "Guid": "bf20e65a-bf6b-4fdb-857a-70b11dcab2a2",
  "Id": 5,
  "NodeType": 4,
  "ParentId": 0,
  "PersonId": 0,
  "Project": "",
  "ProjectId": 0,
  "State": "",
  "WorkItemType": ""
}

================================


.
0
Petyo
Telerik team
answered on 02 Mar 2015, 11:35 AM
Hello Simon,

I may suggest that you use the hierarchical datasource for that purpose - the help topic describes how to convert a structure similar to yours to a datasource.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ListView (Mobile)
Asked by
Simon
Top achievements
Rank 2
Answers by
Petyo
Telerik team
Simon
Top achievements
Rank 2
Share this question
or