Grid structure for hierarchical data

[Tom McNeer]

I've searched the forums extensively, but unfortunately I haven't been able to find a post (or an example in the docs) that illustrates how to handle a TreeGrid with hierarchical data, with different columns for each level of the hierarchy, and with custom templates at the lowest level.

I have attached a .json file with sample data. It contains three levels: Provider, Location and Treatments. Each needs different column structures, and the Treatment level will need custom templates. Not every property at the treatment level will be shown, but for the top two levels, the properties need their own columns.

Is this possible within the TreeGrid, and if so, could you please give me some guidance?

Attachment: provider.json_da6e3176.zip

[Manivannan Padmanaban]

Hi Tom, 

Greetings from Syncfusion Support. 

If you want to use different columns for each hierarchy level, we suggest that you use the hierarchical binding feature of the Grid Component. Please refer to the demo link below, 

https://ej2.syncfusion.com/vue/demos/#/material/grid/hierarchy-grid.html  

Also, refer to the below help documentation link 

https://ej2.syncfusion.com/vue/documentation/grid/hierarchy-grid/  

Please get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 

Manivannan Padmanaban 

[Tom McNeer]

Thanks for your reply.

First, are you saying that it is not possible to use the TreeGrid for this purpose? This article - https://www.syncfusion.com/forums/129629/treegrid-parent-child-have-different-columns - seems to show using the TreeGrid hierarchically.

Also, your Hierarchical Grid example uses only two levels, with the second accessed through the childGrid property. As you can see in the data sample I attached earlier, my use case has three levels. How could that be achieved?

And finally, since your examples and documentation do not show the structure of the data being used, could you please look at the data sample I sent earlier and help me understand how it can be used within either the Grid or TreeGrid.

[Manivannan Padmanaban]

Hi Tom, 

 

Thank you for the update. 

 

Tree Grid Query 

 

Yes, it is not possible to use the Tree Grid for this purpose and the same has also been stated in the shared forum, refer to the screenshot below. 

 

 

 

Grid Query  

 

We have achieved your requirement “Three levels of Hierarchical Grid” using childGrid property of secondChildGrid. Please refer to the below code and sample link.  

 

let secondChildGrid = {  

      dataSource: customerData,  

      queryString: "CustomerID",  

      columns: [  

        . . . . .  

      ],  

      childGrid: {  

        dataSource: hierarchyOrderdata,  

        queryString: "CustomerID",  

        columns: [  

          {  

            field: "OrderID",  

            headerText: "Customer ID",  

            textAlign: "Right",  

            width: 75,  

          },  

          { field: "ShipCountry", headerText: "Country", width: 100 },  

        ],  

      },  

    };  

 

    return {  

      parentData: employeeData.slice(0, 5),  

      childGrid: {  

. . . .  . .   

        columns: [  

          {  

            field: "OrderID",  

            headerText: "Order ID",  

            textAlign: "Right",  

            width: 120,  

          },  

. . . . .  

        ],  

        childGrid: secondChildGrid,  

      },  

    };  

  },  

 

Sample link: https://codesandbox.io/s/vue-template-forked-divhm  

 

Please get back to us, if you need any further assistance.  

 

Regards, 

Manivannan Padmanaban