---
title: "Understanding Hierarchical and Self-Referential JSON Data Binding in Tree Grid"
published_at: "2020-12-02T12:24:02+00:00"
modified_at: "2020-12-02T12:24:02+00:00"
url: "https://www.syncfusion.com/blogs/post/understanding-hierarchical-and-self-referential-json-data-binding-in-tree-grid"
excerpt: "Syncfusion’s Tree Grid is a high-performance tree table component that visually represents data with hierarchical relations in it. To visually represent data in a tree grid, we first need to provide the data to the Tree Grid component. In tree..."
taxonomy_category:
  - "Essential JS 2"
  - "Grid"
  - "JavaScript"
  - "Syncfusion"
  - "UI"
taxonomy_post_tag:
  - "data"
  - "data binding"
  - "JSON"
  - "tree grid"
---

# Understanding Hierarchical and Self-Referential JSON Data Binding in Tree Grid

[Alan Sangeeth](https://www.syncfusion.com/blogs/author/alans)

![Understanding Hierarchical and Self-Referential JSON Data Binding in Tree Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Understanding-Hierarchical-and-Self-Referential-JSON-Data-Binding-in-Tree-Grid.png)


[Syncfusion’s Tree Grid](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid)
 is a high-performance tree table component that visually represents data with hierarchical relations in it. To visually represent data in a tree grid, we first need to provide the data to the Tree Grid component. In tree grid JSON data binding, you can choose between two structures of JSON data that can be bound to the Tree Grid control:

- [Hierarchical data](#hierarchical-data)
- [Self-referential data](#self-referential-data)

In this blog, we will explain the two JSON structures so that you can have a clear picture of them. It will help you decide when and how to use them in your application.

## Hierarchical data

Hierarchical data, as the name says, is when the data is in a hierarchical structure, i.e., a nested collection. In hierarchical data binding, all applicable parent records in a collection have child records as nested collections.

Consider the following sampleData collection. It contains the details of a task and its subtasks. Every task has its subtask collection nested under the property named **subtasks**.

So sampleData contains a collection of records of tasks and each record of tasks has a nested collection of subtasks. So, data that has nested collections for its child records is called hierarchical data and that method of binding is known as hierarchical data binding.

```
export var sampleData =  [
    {
        taskID: 1, taskName: 'Planning', startDate: new Date('02/03/2017'), duration: 5, subtasks: [
            { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), duration: 5 },
            { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), duration: 0 }
        ]
    },
    {
        taskID: 4, taskName: 'Design', startDate: new Date('02/10/2017'), duration: 3, subtasks: [
            { taskID: 5, taskName: 'Software Specification’, startDate: new Date('02/10/2017'), duration: 3 }
        ]
    }
]
```

For hierarchical data binding, we need to provide the nested collection property name to the **childMapping** field of the Tree Grid. For instance, from the previous data, we need to provide ** subtasks** as the childMapping property of Tree Grid.

```
let treegrid: TreeGrid = new TreeGrid({
    dataSource: sampleData,
    treeColumnIndex: 1,
    childMapping: "subtasks",
    columns: [
      { field: "taskID", headerText: "Task ID", isPrimaryKey: true, textAlign: "Right", width: 140 },
      { field: "taskName", headerText: "Task Name", width: 160 },
      { field: "startDate", headerText: "Start Date", textAlign: "Right", width: 120, format: { skeleton: "yMd", type: "date" } },
      { field: "duration", headerText: "Duration", textAlign: "Right", width: 110 }
    ]
});
```

## Self-referential data

While working in the backend, like with databases, we would not use hierarchical data (nested collections) in most situations. And self-referential databinding comes handy in situations like this to provide a tree structure without nested collections.

Self-referential data consists of flat records and doesn’t have nested collections to hold child records. Instead, parent and child relationships are represented in the properties of the record.

Each record should have a unique field that identifies a child record’s parent record.

Let’s see self-referential data with same content as used with hierarchical data.

```
var projectData = [
    { 'TaskID': 1, 'TaskName': 'Planning', 'StartDate': new Date('02/23/2017'), 'Duration': 5 },

    { 'TaskID': 2, 'TaskName': 'Plan timeline', 'StartDate': new Date('02/23/2017'), 'Duration': 5,  'parentID': 1 },

    { 'TaskID': 3, 'TaskName': 'Plan budget', 'StartDate': new Date('02/23/2017'), 'Duration': 0,  'parentID': 1,  },

    { 'TaskID':4, 'TaskName': 'Design', 'StartDate': new Date('02/10/2017'), 'Duration': 3 },

    { 'TaskID':5, 'TaskName': 'Software Specification','StartDate': new Date('02/10/2017'), 'Duration': 3, 'parentID': 4 }]
```

From this data, you can see **TaskID** is the unique field in every record and it is set as the ** idMapping**property in the tree grid. The ** parentID**in some records denotes that they are child records to the ** TaskID** of a value that equals the ** parentID** field value. Thus, the parentID field is mapped to the ** parentIdMapping** property of Tree Grid.

Refer to the following code example.

```
let treegrid: TreeGrid = new TreeGrid({
    dataSource: projectData,
    treeColumnIndex: 1,
    idMapping: "TaskID",
    parentIdMapping: "parentID",
    columns: [
      { field: "TaskID", headerText: "Task ID", isPrimaryKey: true, textAlign: "Right", width: 140 },
      { field: "TaskName", headerText: "Task Name", width: 160 },
      { field: "StartDate", headerText: "Start Date", textAlign: "Right", width: 120, format: { skeleton: "yMd", type: "date" } },
      { field: "Duration", headerText: "Duration", textAlign: "Right", width: 110 }
    ]
});
```

## Output

![Output](https://www.syncfusion.com/blogs/wp-content/uploads/2020/11/Output-1-2.png)

**Note:** Hierarchical and self-referential data binding look the same in the UI and only the data structure representation is different in JSON.

## Conclusion

I hope you now have a clear idea of the difference between hierarchical and self-referential data binding. The Syncfusion Tree Grid control is available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-tree-grid)
, ASP .NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid)
, [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid)
, [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/tree-grid)
), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid)
, [Angular](https://www.syncfusion.com/angular-ui-components/angular-tree-grid)
, [React](https://www.syncfusion.com/react-ui-components/react-tree-grid)
, [Vue](https://www.syncfusion.com/vue-ui-components/vue-tree-grid)
, [UWP](https://www.syncfusion.com/uwp-ui-controls/treegrid)
, [WPF](https://www.syncfusion.com/wpf-ui-controls/treegrid)
, and [WinUI](https://www.syncfusion.com/winui-controls/treegrid)
 platforms.

If you would like to try our Tree Grid component, you can download our [free trial](https://www.syncfusion.com/downloads/essential-js2/confirm)
. You can check our [sample browser](https://ej2.syncfusion.com/demos/#/material/tree-grid/default.html)
 and [documentation](https://ej2.syncfusion.com/documentation/treegrid/data-binding/#local-data)
 for detailed explanations and the facts you need to proceed further.

Feel free to share your feedback or questions in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums)
, [Direct-Trac](https://www.syncfusion.com/account/login)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. We are always happy to assist you!