Self-Referential Data binding (Flat Data) for multidimensional hierarchy (nested tree array)

[Tonathiu]

Hello,

We have been working with vue tree grid. As seen in the below example we are trying to make a multi dimensional parent child table. 

The problem is that we have a flat array and the structure is not as in your example below. I saw your documentation regarding the parentIdMapping and idMapping. 

But that only takes two fields. We want use something similar but for flat data array.   Is it possible or do we need to structure our data with subtaks and taskname?. 




How do you make the picture below from a flat array using "Self-Referential Data binding"? can you send me a data sample if possible.

e.g: Implementation Phase--> Phase 1-->Imple..-->Developmnet 




https://stackblitz.com/run?file=jsontreegriddata.ts

Much thanks for your response.

i have attached a sample data where we are trying to make kind a cascade data binding

Best

Tonathiu 

Attachment: datasample_60bb6c6a.rar

[Padmavathy Kamalanathan]

Hi Tonathiu, 

  

QUERY: Sample using Self referetial Data Binding 

  

For rendering TreeGrid with Self Referential Data, you need to provide two fields ID field and parent ID field in your data. 

  

ID Field: This field contains the unique value used to identify nodes. It's name is assigned to the IDMapping Property 

  

Parent ID Field: This field contains values that indicate parent nodes. It's name is assigned to the ParentIDMapping Property. 

 

Please check the below help documentation and API link, 

https://ej2.syncfusion.com/vue/documentation/treegrid/data-binding/#self-referential-data-binding-flat-data 

https://ej2.syncfusion.com/documentation/api/treegrid#idmapping 

https://ej2.syncfusion.com/documentation/api/treegrid#parentidmapping 

 

As per your requirement, we have created sample with ""Self Referential Data". Please check the below sample, 

https://codesandbox.io/s/sf-vue-treegrid-example-06t1n 

 

In our sample, "taskID" field is the unique field and is assigned to IDMapping and "parentID" field is assigned to ParentIDMapping

 

  

Please check the below  code and screenshot, 

  

  

    <ejs-treegrid :dataSource="data" :treeColumnIndex="1" 

 

      idMapping="taskID"  parentIdMapping="parentID" 

      ref="treegrid"> 

      <e-columns> 

        <e-column  field="taskID" headerText="Task ID" 

          width="70"isPrimaryKey="true"> 

          </e-column> 

        <e-column field="taskName" headerText="Task Name" 

        width="180"> 

        </e-column> 

        <e-columnfield="duration" headerText="Duration" 

        width="80"> 

        </e-column> 

      </e-columns> 

    </ejs-treegrid> 

  

  

 

  

 

  

Kindly get back to us for further assistance. 

  

Regards, 

Padmavathy Kamalanathan 

[Tonathiu]

Thank you very much! great help as always

[Padmavathy Kamalanathan]

Hi Tonathiu,

We are glad to hear that you have achieved your requirement. 

  

If you have further queries, please get back to us. 

  

Regards, 

Padmavathy Kamalanathan