Hierarchical Data Binding and Children

6 posts, 0 answers
  1. Simon
    Simon avatar
    8 posts
    Member since:
    Apr 2009

    Posted 24 Feb 2015 Link to this post

    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.

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 26 Feb 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Simon
    Simon avatar
    8 posts
    Member since:
    Apr 2009

    Posted 26 Feb 2015 in reply to Petyo Link to this post

    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.

  5. Simon
    Simon avatar
    8 posts
    Member since:
    Apr 2009

    Posted 26 Feb 2015 in reply to Simon Link to this post

    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.
  6. Simon
    Simon avatar
    8 posts
    Member since:
    Apr 2009

    Posted 27 Feb 2015 Link to this post

    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": ""
    }

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


    .
  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 Mar 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready